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

•

Design Tools

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

About

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.

Key Features

2 GitHub stars
Comprehensive design system audit checklists for tokens, components, and patterns
Automated design token architecture enforcement (primitive, semantic, and component levels)
Standardized component file structures including Storybook and unit tests
Real-time detection of magic numbers and hard-coded values in styles
Atomic design organization for components (Atoms, Molecules, Organisms, Templates)

Use Cases

Maintaining consistent UI patterns and automated documentation across large-scale development teams
Migrating a legacy CSS codebase into a structured, token-based design system
Scaling a shared component library using atomic design principles to ensure maximum reusability

About

Key Features

2 GitHub stars
Comprehensive design system audit checklists for tokens, components, and patterns
Automated design token architecture enforcement (primitive, semantic, and component levels)
Standardized component file structures including Storybook and unit tests
Real-time detection of magic numbers and hard-coded values in styles
Atomic design organization for components (Atoms, Molecules, Organisms, Templates)

Use Cases

Maintaining consistent UI patterns and automated documentation across large-scale development teams
Migrating a legacy CSS codebase into a structured, token-based design system
Scaling a shared component library using atomic design principles to ensure maximum reusability