New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Write UI Module Readme

by remix-run in remix-run/remix

Write concise module README files for packages/ui/src/lib/ primitives.

MITAuto-check passedDevelopment

Install Write UI Module Readme

skills CLI
$ npx skills add remix-run/remix --skill write-ui-module-readme -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install remix-run/remix write-ui-module-readme --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/remix-run/remix.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/write-ui-module-readme .claude/skills/write-ui-module-readme && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
write-ui-module-readme
GitHub stars
33k
Token cost
~1.1k tokens
SKILL.md length
590 words
Files
1
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

Write concise module README files for packages/ui/src/lib/ primitives.

  • Works in 6 steps: # ModuleName → One or two sentences: what it is, what… → ## Usage → …
  • Revising README docs for UI package modules like popover
  • SKILL.md covers Overview, Workflow, Recommended Structure and Usage Section, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Write UI Module Readme is an agent skill from remix-run/remix. Write concise module README files for packages/ui/src/lib/ primitives. Use when drafting or revising README docs for UI package modules like popover, press, or other first-party UI helpers, especially when the main goal is agent-friendly usage guidance and a short explanation of each exported value.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Technical documentation. The repository describes itself as: The fully-stacked web framework. The licence is MIT.

When your agent uses it

  • Revising README docs for UI package modules like popover
  • Other first-party UI helpers
  • Especially when the main goal is agent-friendly usage guidance and a short explanation of each exported value

Example prompts

  • “/write-ui-module-readme”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. # ModuleName
  2. One or two sentences: what it is, what it is for, and what it is not for
  3. ## Usage
  4. ## \module.*\ or equivalent export reference
  5. ## Behavior Notes
  6. ## When To Use Something Else when the primitive sits below higher-level widgets

What it can do on your machine

Read from SKILL.md and the folder at commit 27bd7a4. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Write UI Module Readme loads about 1.1k tokens when it runs. Until then it costs about 82 tokens; SKILL.md has 590 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~82
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from remix-run/remix at commit 27bd7a4, republished under its MIT licence (© remix-run). 590 words, ~1,119 tokens.

Download SKILL.mdSave it as .claude/skills/write-ui-module-readme/SKILL.md (or your agent's skills folder).
name
write-ui-module-readme
description
Write concise module README files for `packages/ui/src/lib/*` primitives. Use when drafting or revising README docs for UI package modules like popover, press, or other first-party UI helpers, especially when the main goal is agent-friendly usage guidance and a short explanation of each exported value.

Write UI Module Readme

Overview

Write module README files for packages/ui/src/lib/* as practical usage guides for agents and developers.

Optimize for fast, correct adoption:

  • show the canonical usage first
  • explain each exported module.* value briefly
  • document the important behavior guarantees
  • avoid implementation-history dumps and internal type walkthroughs

These are module docs for UI primitives, not package-level READMEs.

Workflow

  1. Read the module source first.
  • Identify the actual public exports and their roles.
  • Confirm the behavior from code, not memory.
  1. Read nearby tests and demos.
  • Pull behavior notes from tests.
  • Reuse the most realistic example shape from a demo when available.
  1. Document the module as it exists today.
  • Do not describe planned APIs.
  • Do not document internal coordinators, private state, or workaround history unless they are part of the public contract.
  1. Keep the README short and scannable.
  • Prefer short paragraphs and flat bullets.
  • Use one strong canonical example instead of multiple weak snippets.

Use this structure unless the module needs something more specific:

  1. # ModuleName
  2. One or two sentences: what it is, what it is for, and what it is not for
  3. ## Usage
  4. ## \module.*`` or equivalent export reference
  5. ## Behavior Notes
  6. ## When To Use Something Else when the primitive sits below higher-level widgets

Usage Section

Lead with a copy-pasteable example that shows the real shape of usage.

  • Prefer production-shaped UI over toy snippets.
  • Use the actual exported API names.
  • Show the minimum surrounding structure needed to use the primitive correctly.
  • If the module composes with other first-party UI helpers, show that composition.

For popup-style primitives, the example should usually show:

  • trigger
  • surface/root
  • one or two meaningful controls inside
  • dismissal or completion path

Export Reference

After the example, explain the role of each important exported value in a few lines each.

For example:

  • module.context: what shared coordination it provides
  • module.button(...): what it registers or activates
  • module.surface(): what it turns the host into
  • module.dismiss(): how it closes or finalizes
  • module.change: what event it emits and the useful event fields

Keep this section focused on:

  • what it does
  • where to apply it
  • key arguments or options
  • observable behavior

Do not turn this into a full API dump.

Show full SKILL.md (228 more words)Show less

Behavior Notes

Document the behaviors that matter when composing with the primitive:

  • focus movement
  • dismissal rules
  • anchoring rules
  • keyboard behavior
  • multi-trigger behavior
  • any important guarantees tested in the module suite

This section should save a reader from opening the implementation just to answer “what happens when...?”

Scope Rules

  • Treat the primary audience as an agent or developer trying to use the primitive correctly.
  • Prefer usage guidance over architecture explanation.
  • Name public events and useful event fields, but avoid deep event-class internals unless necessary.
  • Do not document private classes, internal coordinators, or helper mixins unless the README is specifically for that helper.
  • Do not pad the README with generic accessibility or popover theory the agent already knows.

Good Patterns

  • “Use popover directly for custom floating panels like filters or view options.”
  • “Wrap triggers and the surface in popover.context.”
  • “The opener that started the current session controls anchoring and focus return.”
  • “Do not use this as the final consumer-facing primitive for menus or comboboxes.”

Checklist

  • Did you read the module source first?
  • Did you confirm behavior from tests or demos?
  • Does the README start with a realistic usage example?
  • Does it explain each important exported value briefly?
  • Does it include behavior notes that matter in practice?
  • Does it avoid internal implementation detail and historical debugging context?
  • Would an agent know how to use the primitive correctly without opening the source?

© remix-run, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/write-ui-module-readme of remix-run/remix.

Open the folder on GitHubat commit 27bd7a4

Compare with similar skills

Write UI Module Readme next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Write UI Module Readme compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Write UI Module Readme this skillremix-run/remix33k—~1.1kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design44k1 repos~7.5kAutomated safety check: PassMIT
Simple Englishmoeru-ai/airi50k2 repos~4.6kAutomated safety check: PassMIT
Get API Docs with chubandrewyng/context-hub14k2 repos~775Automated safety check: PassMIT
Doc SyncJetBrains/ideavim10k2 repos~2.6kAutomated safety check: PassMIT
Mailspring App ScreenshotsFoundry376/Mailspring18k—~1.4kAutomated safety check: PassGPL-3.0

Similar skills

  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    44k GitHub starsUsed in 1 repo~7.5k tokens
    DevelopmentAuto-check passed

  • Simple English

    moeru-ai/airi

    Write or rewrite technical text with the rules of ASD-STE100 Simplified Technical English so it is clear, unambiguous, and free of AI slop.

    50k GitHub starsUsed in 2 repos~4.6k tokens
    DevelopmentAuto-check passed

  • Get API Docs with chub

    andrewyng/context-hub

    Fetches current documentation for third-party APIs and SDKs with the chub CLI before the agent writes code against them, instead of relying on remembered API shapes.

    14k GitHub starsUsed in 2 repos~775 tokens
    DevelopmentAuto-check passed

  • Doc Sync

    JetBrains/ideavim

    Official

    Keeps IdeaVim documentation in sync with code changes. An agent skill from JetBrains/ideavim.

    10k GitHub starsUsed in 2 repos~2.6k tokens
    DevelopmentAuto-check passed

  • Mailspring App Screenshots

    Foundry376/Mailspring

    Captures screenshots of the running Mailspring dev app for docs, PRs or visual checks by launching it with a debugging port, driving the UI and clipping to an element.

    18k GitHub stars~1.4k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated 5 days ago
    DevelopmentAuto-check: notes

More from remix-run/remix

All 19 skills in this repo

  • Supersede PR

    remix-run/remix

    Safely replace one GitHub pull request with another. An agent skill from remix-run/remix.

    33k GitHub stars~456 tokensUpdated yesterday
    Auto-check passed

  • Add Package

    remix-run/remix

    Create or align a package in the Remix monorepo to match existing package conventions.

    33k GitHub stars~2k tokensUpdated yesterday
    Auto-check passed

  • Author UI Primitives

    remix-run/remix

    Build idiomatic headless primitives in packages/ui for Remix.

    33k GitHub stars~2.5k tokensUpdated yesterday
    Auto-check passed

  • Fix Issue

    remix-run/remix

    Fix a reported issue in Remix from a GitHub issue. An agent skill from remix-run/remix.

    33k GitHub stars~1.8k tokensUpdated yesterday
    Auto-check passed

  • Make Demo

    remix-run/remix

    Create or revise demos in the Remix repository. An agent skill from remix-run/remix.

    33k GitHub stars~2.4k tokensUpdated yesterday
    Auto-check passed

  • Make PR

    remix-run/remix

    Create GitHub pull requests with clear, reviewer-friendly descriptions.

    33k GitHub stars~847 tokensUpdated yesterday
    Auto-check passed

Categories

Questions about Write UI Module Readme

What does Write UI Module Readme do?

Write concise module README files for packages/ui/src/lib/ primitives. Write UI Module Readme is an agent skill from remix-run/remix. Write concise module README files for packages/ui/src/lib/ primitives.

When should I use Write UI Module Readme?

Write UI Module Readme fits situations like: revising README docs for UI package modules like popover; other first-party UI helpers; especially when the main goal is agent-friendly usage guidance and a short explanation of each exported value.

How do I install Write UI Module Readme in Claude Code?

Run `npx skills add remix-run/remix --skill write-ui-module-readme -a claude-code`. Or copy the skill folder (.agents/skills/write-ui-module-readme in remix-run/remix) into .claude/skills/write-ui-module-readme in your project. Claude Code loads it when a task matches its description.

How do I install Write UI Module Readme in Codex?

Run `npx skills add remix-run/remix --skill write-ui-module-readme -a codex`. Or copy the skill folder (.agents/skills/write-ui-module-readme in remix-run/remix) into .agents/skills/write-ui-module-readme in your project. Codex loads it when a task matches its description.

Can I use Write UI Module Readme in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add remix-run/remix --skill write-ui-module-readme -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/write-ui-module-readme, .gemini/skills/write-ui-module-readme, .github/skills/write-ui-module-readme and .opencode/skills/write-ui-module-readme in your project.

What does Write UI Module Readme need to run?

SKILL.md names no scripts, command-line tools or credentials: Write UI Module Readme is instructions for the agent only.

Does Write UI Module Readme access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Write UI Module Readme safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Write UI Module Readme use?

Write UI Module Readme is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Write UI Module Readme use?

About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Write UI Module Readme?

Skills that share tags, products or a category with Write UI Module Readme: Diagram Design (cathrynlavery/diagram-design, 44k stars), Simple English (moeru-ai/airi, 50k stars), Get API Docs with chub (andrewyng/context-hub, 14k stars) and Doc Sync (JetBrains/ideavim, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Write UI Module Readme?

remix-run (a GitHub organization) maintains it in remix-run/remix, which has 33,396 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 6, 2026.

Source: remix-run/remix on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.