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.
Install
$ agentstack add skill-m-binimran-dev-pack-component-scaffold ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-m-binimran-dev-pack-component-scaffold) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
component-scaffold
Build components that own their code (shadcn model), are accessible, and don't look like defaults.
Process
- Classify: presentational (pure, props-in) or container (data/effects)? Keep them separate.
- 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.
- Variants via
cva: definevariant/sizewith abrandvariant wired to your theme tokens — don't
ship the raw default look.
- Compound pattern for widgets with shared state (
…): parent owns state, children
consume via context. No prop drilling.
- Design the states: hover, focus-visible, active, disabled, loading, empty, error — all intentional.
- 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-guardhook 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
- Source: m-binimran/dev-pack
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.