New component
Skill Syo-M/fable-frontend-skills/plugin/skills/new-component
Measured, opinionated Claude Code rules for frontend work (React / Next.js / Vite / Astro) — skills, path rules, review agents, sign-off hooks, installer & plugin. Every claim backed by committed eval reports.
npx -y skills add Syo-M/fable-frontend-skills --skill new-componentAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 3 stars3 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
Scaffolds a new UI component the repo-standard way — component + styles + Storybook story with play function (+ unit test only for extracted pure logic), wired to design tokens and a11y checks. Use when creating a new component from scratch or implementing one from a Figma design. 日本語の依頼例:「新しいコンポーネント作って」「◯◯コンポーネント追加」「Figmaのこれ実装して」。
SKILL.md
2.5 KB, as published. Nobody here has run it
New component pipeline
Produce the full set in one pass — a component without its story is not done. Load react-patterns + the project's styling skill (the "Styles, design tokens, responsive" row in the CLAUDE.md index; if no such row exists — minimal profile — follow the Stack section's styling line: the project's existing approach, consistently) (+ design-system for shared components, a11y for custom widgets); this file is the order of operations.
Steps
- Locate & name — follow the repo's existing component directory convention (check siblings first — repo convention beats this file). One directory:
Component.tsx,Component.stories.tsx, plus the styling file the active styling skill prescribes (e.g.Component.module.cssunder CSS Modules; none under Tailwind). - Contract first — write the props type: required props minimal, variants as unions (not booleans that multiply), events named
onX. Noany; state stays out unless the component owns it. - Markup — semantic element first (
button, notdiv onClick). Custom widget? Full keyboard contract + roles/states pera11ybefore any styling. - Styles — per the active styling skill: consume design tokens (never raw values), variants via
data-*/aria-*attributes, responsive per that skill's rules. No inline styles. - Story — CSF3, one story per meaningful state (default, each variant, error/disabled, loading, empty). Interactive behavior gets a play function — that IS the component test. Include a keyboard-path assertion for interactive components.
- Unit tests — only for pure logic extracted out of the component (formatting, reducers). Do not duplicate what the play function covers.
- Verify — typecheck, lint, run the story tests. Check the story renders every state without console errors.
Definition of done
Component + module CSS + stories with play function all exist, all gates in step 7 pass, tokens used throughout, keyboard path covered. If asked for "just the component, quickly" — still deliver the story; drop only the optional extras and say so.