What happens when I use inconsistent naming conventions?

The skill triggers a warning if it detects naming patterns for components or tokens that deviate from your project's established standards.

Can it help with UI documentation?

Absolutely. It enforces a standard file structure that includes Storybook stories and usage documentation for every component created.

Does this skill support Atomic Design principles?

Yes, it encourages organizing your component library into atoms, molecules, organisms, and templates to ensure a scalable and hierarchical structure.

How does the Design System skill detect magic numbers?

The skill automatically scans your codebase for hard-coded values such as hex codes or pixel measurements and suggests replacing them with established design tokens.

Design System Architect

Name: Design System Architect
Author: jpoutrin

byjpoutrin

•

디자인 도구

Standardizes UI development by enforcing design tokens, atomic component structures, and consistent styling patterns across frontend projects.

The Design System skill empowers developers to build scalable, maintainable frontends by automating the implementation of robust design systems. It proactively identifies opportunities to replace hard-coded values with semantic design tokens, organizes UI components using atomic design principles, and ensures every component includes necessary types, tests, and documentation. By enforcing a 'build once, use everywhere' philosophy, it minimizes technical debt and maintains visual consistency across complex web applications.

주요 기능

012 GitHub stars

02Comprehensive design system audit checklists for tokens, components, and patterns

03Automated design token architecture enforcement (primitive, semantic, and component levels)

04Standardized component file structures including Storybook and unit tests

05Real-time detection of magic numbers and hard-coded values in styles

06Atomic design organization for components (Atoms, Molecules, Organisms, Templates)

사용 사례

01Maintaining consistent UI patterns and automated documentation across large-scale development teams

02Migrating a legacy CSS codebase into a structured, token-based design system

03Scaling a shared component library using atomic design principles to ensure maximum reusability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jpoutrin/product-forge design-system

For use in Claude.ai and ChatGPT

Download Skill