agentsclimarketplace

Component scaffold

Skill zakelfassi/skills-driven-development/examples/webapp-starter/skills/component-scaffold

Agents that learn by doing — and remember how they did it. A methodology for AI agents to create, evolve, and share reusable skills.

Install
npx -y skills add zakelfassi/skills-driven-development --skill component-scaffold

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

  • 17 stars17 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

Create a new React component with co-located test, story, and styles. Use when creating new UI components, when asked to scaffold/generate a component, or when building new pages.

SKILL.md

1.9 KB, as published. Nobody here has run it

Component Scaffold

Create a new React component following project conventions.

Inputs

  • Component name (PascalCase, e.g., UserCard)
  • Component type: page | feature | ui
  • Props (optional: list of prop names + types)

Steps

  1. Determine the directory

    • page → src/pages/{ComponentName}/
    • feature → src/features/{feature-area}/components/{ComponentName}/
    • ui → src/components/ui/{ComponentName}/

  2. Create the component file

    {dir}/{ComponentName}.tsx
    • Functional component with TypeScript props interface
    • Export as named export (not default)

  3. Create the test file

    {dir}/{ComponentName}.test.tsx
    • Import from Vitest + Testing Library
    • At minimum: renders without crashing + snapshot

  4. Create the story file

    {dir}/{ComponentName}.stories.tsx
    • Default story + one variant per significant prop

  5. Create the barrel export

    {dir}/index.ts
    • Re-export the component

Conventions

  • All components are functional (no class components)
  • Props interfaces are named {ComponentName}Props
  • Co-locate everything: component, test, story, styles in one directory
  • Use Tailwind for styling (no CSS modules — see archived skill css-module-setup)

Edge Cases

  • Component already exists: Do not overwrite. Ask the user if they want to update or rename.
  • Nested feature components: Use the feature area as a parent directory (e.g., features/auth/components/LoginForm/)

Keep looking

Skills are one crate of 328,083. 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.