agentsclimarketplace
Sign in

New component

Skill Syo-M/fable-frontend-skills/.claude/skills/new-component

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のこれ実装して」。From its SKILL.md

Install
npx -y skills add Syo-M/fable-frontend-skills --skill new-component

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

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

SKILL.md

2.5 KB, 472 tokens by cl100k_base, 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

  1. 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.css under CSS Modules; none under Tailwind).
  2. Contract first — write the props type: required props minimal, variants as unions (not booleans that multiply), events named onX. No any; state stays out unless the component owns it.
  3. Markup — semantic element first (button, not div onClick). Custom widget? Full keyboard contract + roles/states per a11y before any styling.
  4. 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.
  5. 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.
  6. Unit tests — only for pure logic extracted out of the component (formatting, reducers). Do not duplicate what the play function covers.
  7. 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.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most ui components skills give in 472 tokens

Counted across 293 of the 305 authors here whose files we hold, read 2026-09-06

  • Start with a --design-system search before designingin 17 of 293, across 15 files
  • Ensure 4.5:1 minimum text contrastin 16 of 293, across 15 files
  • Verify the pre-delivery checklist before delivering UI codein 16 of 293, across 14 files
  • Use SVG icons instead of emojisin 15 of 293, across 14 files
  • Keep touch targets at least 44 pointsin 14 of 293, across 12 files
  • Check page override files before master rulesin 13 of 293, across 11 files
  • Supplement with domain searches as neededin 13 of 293, across 11 files
  • Add cursor-pointer to all clickable elementsin 12 of 293
  • Use CSS variables for themingin 11 of 293, across 7 files
  • Use semantic color tokens, not raw hexin 11 of 293, across 8 files
  • Meet WCAG AA color contrastin 11 of 293, across 7 files
  • Default stack to html-tailwind when unspecifiedin 10 of 293

Said here and by no other author read

  • Produce component, styles, and story in one pass
  • Check sibling components for the directory convention first
  • Write the props type before markup
  • Express variants as unions, not booleans
  • Use semantic elements first
  • Add full keyboard contract and roles before styling

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. 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.