architecture-review

What problem does it solve?

A poorly structured design token architecture or inconsistent design patterns can lead to technical debt, scalability issues, and a fragile design system. This Skill provides a comprehensive architectural evaluation, identifying structural flaws and recommending improvements for a robust and scalable system.

Core Features & Use Cases

• 3-Layer Hierarchy Audit: Reviews the Primitive→Semantic→Component token structure for compliance, integrity, and proper separation of concerns.
• Naming Convention & Pattern Analysis: Evaluates consistency and extensibility of token naming, variant patterns (e.g., primary, ghost), and size systems (sm, md, lg).
• State Management Completeness: Checks if all required interactive states (e.g., base, hover, focus, disabled) are covered by tokens and implemented consistently.
• Tailwind Integration & Props API: Assesses the effectiveness of Tailwind @theme directives and the consistency of component Props API design across the system.
• Use Case: Conduct a full architectural review to identify why new developers struggle to use your design system, uncovering inconsistencies in prop naming, missing state tokens, or direct primitive usage in components.

Quick Start

Use the architecture-review skill to evaluate the token hierarchy and design patterns across the entire design system.