agentsclimarketplace

Component scaffold

Skill m-binimran/dev-pack/skills/component-scaffold

Guardrails, skills, loops, hooks & review agents for database + website builders on Claude Code (Next.js + Supabase).

Install
npx -y skills add m-binimran/dev-pack --skill component-scaffold

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Build a production React component on shadcn/ui + Tailwind — variants, compound pattern, accessible states, and a clean prop API. Use when creating a new UI component or refactoring a messy one.

SKILL.md

1.6 KB, as published. Nobody here has run it

component-scaffold

Build components that own their code (shadcn model), are accessible, and don't look like defaults.

Process

  1. Classify: presentational (pure, props-in) or container (data/effects)? Keep them separate.
  2. Start from primitives: shadcn/ui (Radix under the hood) for anything interactive — you get a11y for free. Customize in your own components/ui/* file; it's yours.
  3. Variants via cva: define variant/size with a brand variant wired to your theme tokens — don't ship the raw default look.
  4. Compound pattern for widgets with shared state (<Tabs><Tabs.List>…): parent owns state, children consume via context. No prop drilling.
  5. Design the states: hover, focus-visible, active, disabled, loading, empty, error — all intentional.
  6. Accessibility: real semantics, labelled controls, visible focus, keyboard operable. Icon-only buttons get an accessible name.

Output

  • The component file(s), typed props, variants, and the states handled.
  • A one-line note on which states were implemented and which are N/A.

Guardrails

  • Don't reinvent an accessible primitive Radix/shadcn already provides.
  • Don't exceed 800 lines (the file-size-guard hook blocks it) — split sub-components out.
  • No unmodified default styling passed off as finished (anti-template policy).

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.