Skill

Component Library

Set up component library showcase infrastructure with Storybook 8 or custom gallery. Creates foundation for component-driven development.

// ui-design;

Behaviour

What it does

Installs and configures Storybook 8 or in-app gallery
Creates category structure for component organisation
Sets up documentation and interaction testing infrastructure
Configures visual regression testing if needed
Establishes component development workflow
Integrates with existing build and test tooling

When to use

Good fits

Once per project before first UI component

During project-setup on greenfield work

When you need isolated component development

Before component-development workflow starts

Development harness

Component infrastructure

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.

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-library

Global (Cursor)

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

Global (Claude)

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

Project install

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

Interactive install

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

Uninstall

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

Example

Example prompt