Can I still create new components with this skill enabled?

Yes, but the skill requires the AI to first justify why existing components are insufficient and propose the new addition to the user for approval.

Does this skill work with Tailwind CSS?

Yes, it specifically looks for tailwind.config files and theme extensions to ensure it uses your project's defined spacing and color scales.

Where does the skill look for existing components?

It scans common directories like /components/ui/ and /components/, as well as barrel files, to identify reusable primitives like buttons, inputs, and cards.

What is the primary benefit of the Design System First skill?

It prevents UI fragmentation by forcing the AI to use existing project styles and components instead of generating redundant code or hardcoded values.

How does it handle CSS variables?

It searches for globals.css, variables.css, and other theme files to catalog CSS custom properties for colors, typography, and radii.

Design System First

Name: Design System First
Author: JasonY199

byJasonY199

0•

Herramientas de Diseño

Enforces a design-system-first workflow by discovering and utilizing existing tokens and components before generating new UI code.

Design System First is a specialized Claude Code skill designed to maintain visual consistency and reduce technical debt in frontend projects. It mandates an automated discovery phase where Claude scans your repository for existing CSS custom properties, Tailwind configurations, and reusable component libraries before writing any markup or styles. By prioritizing the reuse of established design tokens over hardcoded values, this skill ensures that all new UI elements seamlessly integrate with your project's unique design language and architectural patterns.

Características Principales

01Gap analysis to justify the creation of new tokens or components

02Discovery of existing UI primitives and shared composite components

03Pattern matching for consistent prop naming and component composition

040 GitHub stars

05Prevention of hardcoded hex codes, spacing, and arbitrary values

06Automated scanning of design tokens, CSS variables, and theme configurations

Casos de Uso

01Building new application pages that must strictly adhere to an existing design system

02Refactoring legacy UI components to use standardized theme tokens and primitives

03Extending component libraries with new variants while maintaining existing patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jasony199/jason-claude-plugins design-system-first

For use in Claude.ai and ChatGPT

Download Skill