# Component Scaffold

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-m-binimran-dev-pack-component-scaffold`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [m-binimran](https://agentstack.voostack.com/s/m-binimran)
- **Installs:** 0
- **Category:** [Databases](https://agentstack.voostack.com/c/databases)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [m-binimran](https://github.com/m-binimran)
- **Source:** https://github.com/m-binimran/dev-pack/tree/main/skills/component-scaffold

## Install

```sh
agentstack add skill-m-binimran-dev-pack-component-scaffold
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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 (`…`): 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).

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [m-binimran](https://github.com/m-binimran)
- **Source:** [m-binimran/dev-pack](https://github.com/m-binimran/dev-pack)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-m-binimran-dev-pack-component-scaffold
- Seller: https://agentstack.voostack.com/s/m-binimran
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.