Skill

Component Testing

Add comprehensive testing to components: interaction tests, visual regression, accessibility audits, and unit tests.

// ui-design;

Behaviour

What it does

Adds Storybook interaction tests for user behaviour
Configures visual regression testing for appearance
Runs accessibility audits and WCAG compliance checks
Creates unit tests for component logic
Tests backward compatibility for extended components
Verifies component works in isolation
Sets up CI integration for component tests

When to use

Good fits

After component-development creates or extends a component

Before integrating components into the application

When verifying backward compatibility

As part of the component development workflow

Development harness

Element verification

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

Global (Cursor)

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

Global (Claude)

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

Project install

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

Interactive install

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

Uninstall

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

Example

Example prompt