New component
Skill Syo-M/codex-frontend-skills/plugins/codex-frontend-skills/skills/new-component
Codex-native frontend skills, custom agents, profiles, and an evidence-backed evaluation harness for React, Next.js, Vite, and Astro.
npx -y skills add Syo-M/codex-frontend-skills --skill new-componentAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- 24 days oldThe repository was created 24 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
- 0 stars0 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
Scaffold a new UI component with the active styling approach, Storybook play coverage, tokens, and accessibility. Not for small edits to existing components. 日本語の依頼例:「新しいコンポーネント」「コンポーネント追加」「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. This skill is the orchestrator; do not load every adjacent rulebook by default. Consult react-patterns only when the component owns state/hooks or a non-trivial React API, the active styling skill for non-trivial visual work, design-system for shared/public primitives, and a11y for custom widgets or focus/keyboard behavior. In the minimal profile, follow the repository's existing styling approach consistently.
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 + the active profile's styling artifact (if any) + stories with play function all exist, all gates in step 7 pass, tokens used where the project defines them, and the keyboard path is covered. If asked for "just the component, quickly" — still deliver the story; drop only the optional extras and say so.