component
Skill2 starsChanged 14 days agoMITView on GitHub
Design and build a React component the agent-craft way — place it in the tree, list its states, design the props API before the markup, compose existing primitives, and keep everything it uses in one file. Use whenever the user asks for a new component, card, list, row, panel, widget, or UI piece, or asks to split or restructure a component, even if they only say "add a button that…".
8 other projects use a version of this.
Adopted by
Most recently taken up by
- microsoft/vscodetheir own version, first seen Nov 2, 2026
- vansh-nagar/Pixel-Perfecttheir own version, first seen Nov 1, 2026
- darkroomengineering/cc-settingstheir own version, first seen Sep 24, 2026
- gabriellst/codmtheir own version, first seen Aug 26, 2026
- asw101/ai-skillstheir own version, first seen Aug 21, 2026
- Maximepodgorski/agent-skillstheir own version, first seen May 3, 2026
Other versions8 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 8
- microsoft/vscode★ 195ksame name
- vansh-nagar/Pixel-Perfect★ 748same name
- darkroomengineering/cc-settings★ 52same name
- Maximepodgorski/agent-skills★ 21same name
- gabriellst/codm★ 4same name
- asw101/ai-skills★ 3same name
- gauravv-g/claude-skills-collection★ 1same name
- silverkyoon-Rachel/claude-skills★ 0same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository9 other files it gives its agents.
- templates/CLAUDE.mdCLAUDE.md
- conventionsSkill
- debugSkill
- featureSkill
- formSkill
- nextjs-pageSkill
- planSkill
- reviewSkill
- serviceSkill
The file
We split this skill into the rules it gives an agent
5 rules. 0 are common, 5 are distinctive, and 0 are very specific to this project.
0
Common
Most of the 7 edited versions we read keep these.
5
Distinctive
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 13
No new primitive while an existing one fits: Search the UI layer and the repo first.
- Distinctive: line 14
No prop nobody passes today: No speculative variants, sizes, or flags.
- Distinctive: line 20
List its states: default, hover, focus, disabled, loading, empty, error, whichever apply.
- Distinctive: line 25
Only the props today's callers need, and only the fields the component reads.
- Distinctive: line 42
Every state from step 1 renders, including loading, empty, and error.
“Common” is measured: kept by at least 6 in 10 of the 7 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
agent-craft Component
The steps for designing a new component. The rules it must follow live in agent-craft:conventions → references/components.md; read that first.
Gates
- Steps 1–2 before any markup.
- No new primitive while an existing one fits. Search the UI layer and the repo first.
- No prop nobody passes today. No speculative variants, sizes, or flags.
1. Role
- Place it in the tree. Is it a section or a primitive? If it would only forward props to one child, it shouldn't exist.
- Search first. An existing shadcn/ui primitive or house component may already do this; compose or extend it.
- List its states: default, hover, focus, disabled, loading, empty, error, whichever apply. Each one maps to a prop or a state value. States found mid-build are how boolean props pile up.
- Name it by business meaning:
PlanCard,MessageRow, notWrapperorListItem2.
2. Props API
- Only the props today's callers need, and only the fields the component reads.
childrenor slot props over configuration props; compound parts only when callers arrange several slots.- Variants are one typed union prop.
- State stays with its owner: the component receives values and emits
on*callbacks. It doesn't fetch or hold state its siblings also need.
3. Server or client
Server component unless it needs interactivity; then 'use client' on this leaf only.
4. Build
- One kebab-case file colocated with its feature, in dependency order: private pieces first, then the props interface and exported component.
- Composition, styling, icons, and accessibility per
components.md. - Over 60 lines: split into private sub-components in the same file.
5. Verify
- Every state from step 1 renders, including loading, empty, and error.
- The tree stayed flat: no new pass-through layer, no prop drilled past one intermediate.
- The component can be understood from its own file plus at most two others.
- The repo's
typecheckandlintscripts pass.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.