spec-kitty-design

Automate Spec Kitty design system adherence, CSS token validation, and Storybook component authoring.

1|1|Updated May 1, 2026
One-click install
npx skills add https://github.com/stijn-dejongh/spec-kitty-design --skill spec-kitty-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: spec-kitty-design
Source: https://github.com/stijn-dejongh/spec-kitty-design/tree/main/skills/spec-kitty-design
Command: npx skills add https://github.com/stijn-dejongh/spec-kitty-design --skill spec-kitty-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires storybook, npm, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation, review, and maintenance of Spec Kitty-branded interfaces, addressing challenges in UI component work, CSS token usage, brand copy writing, and Storybook story authoring.

Core Features & Use Cases

  • Branded Interface Creation: Generate and maintain UI components and designs in line with Spec Kitty's brand identity.
  • CSS Token Validation: Ensure CSS custom properties are used correctly across the design system.
  • Copywriting Guidelines: Apply brand voice and style rules to UI copy and documentation.
  • Storybook Integration: Author interactive components and stories within Storybook that are consistent with the Spec Kitty design system.

Quick Start

Use the spec-kitty-design skill to create a new UI component with the correct tokens and brand voice.

Frequently Asked Questions about spec-kitty-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I maintain brand voice and design system adherence when authoring UI components?

To maintain brand voice and design system adherence during UI component authoring, you apply predefined rulesets for visual identity and copy validation. This automates consistent brand token usage and styling guidelines across your interface development workflow.

How does CSS token validation work for design system components?

CSS token validation works by checking your UI components against predefined design system rulesets to ensure custom properties are applied correctly. This mechanism automatically flags incorrect token usage, keeping your visual identity consistent across the application interface.

Do I need Storybook and npm to build branded UI components with this approach?

Yes, you need Storybook and npm installed in your development environment to execute this branded interface authoring workflow. These dependencies are required to run the scripts, manage design system assets, and render interactive component stories.

What is the best way to automate copywriting guidelines for a UI design system?

The best way to automate copywriting guidelines for a UI design system is by applying predefined brand voice rulesets to your interface text. This ensures all UI copy and documentation consistently matches the intended tone and style without manual review overhead.

Can I use this design system workflow to generate Storybook stories for new UI components?

Yes, you can use this workflow to generate and author Storybook stories for new UI components. It integrates directly with Storybook to ensure that the interactive component stories remain consistent with the overall design system and brand identity rules.