sukirman1901sukirman1901/frontend-expert/skills/components/SKILL.md

components

Skill9 starsChanged 2 months agoMITView on GitHub

Build composable UI with a small public props contract, loading/error/empty states, Reicon icons by default, and mobile-first layout. Use when implementing or refactoring pages, screens, components, dialogs, tables, navigation, “buat component”, “prop terlalu banyak”, “API component”, or “bikin form”. Report Conventions check before done.

7 other projects use a version of this.

Adopted by

Most recently taken up by

CreativesLibrary/Componentstheir own version, first seen Nov 8, 2026
AnayDhawan/Componentstheir own version, first seen Oct 13, 2026
trezor/trezor-suitetheir own version, first seen Oct 8, 2026
wachterjohannes/symfony-skillstheir own version, first seen Sep 3, 2026
blixvip/skillstheir own version, first seen Aug 19, 2026
mistralai/client-tstheir own version, first seen Jul 2, 2026

Other versions7 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 7
trezor/trezor-suite★ 1.1ksame name
mistralai/client-ts★ 162same name
AnayDhawan/Components★ 17same name
CreativesLibrary/Components★ 17same name
blixvip/skills★ 4same name
wachterjohannes/symfony-skills★ 4same name
andrmaz/spec-driven-architecture★ 1same 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 repository36 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- .cursor/rules/design-system-enforcer.mdcCursor rule
- frontend-expertSkill
- accessibilitySkill
- anti-slop-codeSkill
- anti-slop-designSkill
- app-shellSkill
- architectureSkill
- content-designSkill
- data-fetchingSkill
- design-colorSkill
- design-directionSkill
- design-foundationsSkill
- design-surfacesSkill
- design-typographySkill
- design-vocabularySkill
- devtoolsSkill
- engineering-vocabularySkill
- fidelitySkill
- formsSkill
- frontend-expertSkill
- marketingSkill
- monitoringSkill
- motion-inspectionSkill
- motionSkill
- performanceSkill
- polishSkill
- prototypeSkill
- quality-loopSkill
- responsiveSkill
- seoSkill
- skill-authoringSkill
- testingSkill
- tokensSkill
- webglSkill

The file

Create a free account to mount

Files

SKILL.md

Components

Overview

A component’s public props are a contract. Prefer composition and project primitives over boolean soup, style knobs, and one-off APIs.

When to use

Building or modifying components, pages, interactive controls
Refactoring overgrown or prop-heavy APIs
Wiring states, icons, selects, or composition

When to skip

Validation mechanics only → forms
Async list/detail fetching only → data-fetching
Grid/spacing of the page → design-foundations
Radius/elevation language → design-surfaces
Generated-hook soup / empty wrappers without an API ask → anti-slop-code

MUST

Rule	Detail
Small contract	Public props are required data, events, and exclusive modes — not a grab-bag of style flags
Compose, don’t configure	Slots/`children`/subcomponents for optional regions; do not add `showHeader` / `showFooter` / `hasIcon`
Tokens own visuals	No `color` / `radius` / `shadow` / `padding` props that duplicate tokens
States in the contract	Loading, error, empty, disabled, invalid are designed, not leftover booleans that collapse the UI
Native-capable controls	Buttons/inputs forward useful native attributes; icon-only needs an accessible name
Control geometry	Define a project-token size tuple and a fixed, non-shrinking icon slot. Stable pending width is the default; an explicit measured-morph exception requires bounded layout, stable surrounding targets, accessible naming and rendered proof (`component-patterns.md`)
Reicon	Icons in nav, toolbars, empty states, icon buttons unless project lib or text-only waiver
Custom selects	Product filters use custom select/combobox; native `<select>` only with waiver
Responsive	Load `responsive` for layout UI; 320/768/1024/1440 + full-width primary CTA <768
Size	Keep a component file under 200 lines or split

Props / API

Do	Don’t
Discriminated unions for exclusive modes	`variant` plus conflicting booleans
`children` / named slots for structure	Parallel props for every inner node
Domain events (`onSelect(id)`)	Leaking internal setters
Extend the native element when it is that element	Wrap `<div onClick>` and re-implement keyboard
Widen later with a wrapper	Breaking existing public props silently

principle: Composition over prop bags
classification: recommendation
recommendation: optional UI regions are composition, not show* booleans
exceptions: [one-shot presentational stubs, generated design-system primitives]
verification: [count public props; render loading/empty/disabled]
last_verified: 2026-09

Workflow

Reuse — find the project primitive before adding a new component.
Contract — list data, events, exclusive modes, and states; delete style props.
Compose — select the task-shaped anatomy in references/component-patterns.md (editor, queue/inspector, chart, agent workspace); assign identity/content/context/state/action regions, then slots for optional chrome. Fetch data outside presentational components.
States — loading / error / empty / default; selects and icons as above.
Control geometry — choose density/size tuple and stable vs intentional morph width; construct text-only, leading-icon, trailing-icon, icon-only, and pending variants. Distinguish glyph, slot, surface, hit area and focus ring.
Verify — keyboard, 320–1440, Conventions check.

Boundaries

May decide: slot names, whether className is an escape hatch, local vs lifted UI state.
Must not: ship boolean/style soup, invent a kit when the project has one, or skip loading/error/empty on interactive/async surfaces.
Ownership: components owns control construction; polish owns rendered optical judgment; design-surfaces owns radius values.

Checklist

Public props are a small typed contract
Optional regions use composition, not show* flags
No token-duplicating style props
Loading / error / empty handled
Control geometry covers text-only, leading icon, trailing icon, icon-only, and pending; token gap/padding, fixed non-shrinking icon slot, stable width by default or documented measured-morph exception with rendered evidence
Reicon (or project lib) in the markup — or waiver
Filters/selects custom (or waived)
Responsive 320/768/1024/1440 + Conventions check

Depth

Patterns: references/component-patterns.md. State/org: references/architecture.md. Icons: references/reicon-icons.md. Ship gates: references/compliance-gates.md.

Download now (ZIP)

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

What did you use it for? e.g. Reviewing pull requests in a Rails app

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.

Check your setup, free