What happens if a new UI element doesn't fit existing rules?

The skill will analyze the new requirement and propose a minimal addition to the system only if reuse is impossible, providing a clear reason for the change.

How does Design System Keeper prevent duplicate tokens?

The skill follows a strict workflow of reading existing memory and project files to identify current naming conventions before it proposes any new additions.

Does it support dark mode or multi-theme tokens?

Yes, it can track and enforce token naming for multiple themes as long as the patterns are defined in your project's memory or configuration.

Can I use this with React or Vue components?

Yes, it is framework-agnostic and focuses on component API patterns and naming conventions regardless of the underlying library.

Design System Keeper

Name: Design System Keeper
Author: minchanpark

byminchanpark

0•

デザインツール

Maintains UI consistency by enforcing existing design tokens and component rules throughout the development process.

Design System Keeper is a specialized Claude Code skill designed to preserve the integrity of your project's visual language. It acts as a guardian for your design system by prioritizing the reuse of existing tokens, CSS variables, and component patterns before allowing new ones to be created. By checking memory and local files first, it prevents the fragmentation of styles and ensures that every new UI requirement aligns perfectly with established typography, color, and spacing conventions.

主な機能

01Prioritizes reuse of existing UI assets over creating new ones

02Enforces design token naming conventions for colors, spacing, and typography

03Validates component API patterns and prop naming consistency

040 GitHub stars

05Provides clear migration notes when existing code requires updates

06Maintains a persistent record of project-specific Do/Don't rules

ユースケース

01Auditing codebases for inconsistent styling and proposing standardized refactors

02Onboarding developers by providing automated guidance on design system constraints

03Ensuring new UI features match existing design tokens and component structures

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add minchanpark/agent-team-simulator design-system-keeper

For use in Claude.ai and ChatGPT

主な機能

01Prioritizes reuse of existing UI assets over creating new ones

02Enforces design token naming conventions for colors, spacing, and typography

03Validates component API patterns and prop naming consistency

040 GitHub stars

05Provides clear migration notes when existing code requires updates

06Maintains a persistent record of project-specific Do/Don't rules

ユースケース

01Auditing codebases for inconsistent styling and proposing standardized refactors

02Onboarding developers by providing automated guidance on design system constraints

03Ensuring new UI features match existing design tokens and component structures

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add minchanpark/agent-team-simulator design-system-keeper

For use in Claude.ai and ChatGPT