Skill

Component Development

Build UI components in isolation following CDD best practices. Creates components with stories, variants, interaction tests, and documentation.

// ui-design;

Behaviour

What it does

Audits existing components before creating new ones
Follows design system tokens and component standards
Decides whether to extend existing or create new component
Builds components with TypeScript and proper prop types
Creates Storybook stories showing all variants and states
Tests backward compatibility when extending components
Documents decision rationale in component files

When to use

Good fits

When UI elements are needed during executing-plans

When manually building reusable components

Before integrating UI elements into pages

When extending existing components with new variants

Development harness

Element loop

Part of the design-to-ship pipeline: brainstorming → technical-documentation → conformance-check → reconciling-changes → planning → project-setup → executing-plans → shipping. Install the full set for structured feature work.

Used inside executing-plans as the inner red-green-refactor loop for each task.

Test-Driven Development End-to-End Testing Component Development Component Testing

View full harness

Install

Get this skill

Uses Agent Kit via npx; no global install required.

Quick install

npx @levi-putna/agent-kit@latest add levi-putna/skills --skill component-development

Global (Cursor)

npx @levi-putna/agent-kit@latest add levi-putna/skills --skill component-development --global --agent cursor

Global (Claude)

npx @levi-putna/agent-kit@latest add levi-putna/skills --skill component-development --global --agent claude

Project install

npx @levi-putna/agent-kit@latest add levi-putna/skills --skill component-development --project

Interactive install

npx @levi-putna/agent-kit@latest add levi-putna/skills

Uninstall

npx @levi-putna/agent-kit@latest remove component-development

Example

Example prompt