design-system-tokens
Design System Tokens
Design token management following the W3C Design Token Community Group (DTCG) specification. Tokens provide a single source of truth for design decisions — colors, spacing, typography, elevation — shared between design tools (Figma, Penpot) and code (CSS, Tailwind, iOS, Android). Major adopters include Figma (Variables API), Google (Material Design 3), Microsoft (Fluent UI), and Shopify (Polaris).
Quick Reference
| Category | Rule File | Impact | When to Use |
|---|---|---|---|
| W3C Token Format | tokens-w3c-format.md |
CRITICAL | Creating or reading .tokens.json files |
| Contrast Enforcement | tokens-contrast-enforcement.md |
CRITICAL | Validating WCAG contrast at token definition time |
| Three-Tier Hierarchy | tokens-three-tier.md |
HIGH | Organizing tokens into global/alias/component layers |
| OKLCH Color Space | tokens-oklch-color.md |
HIGH | Defining colors with perceptual uniformity |
| Spacing & Depth | tokens-spacing-depth.md |
HIGH | Defining elevation shadows and spacing scales as tokens |
| Style Dictionary | tokens-style-dictionary.md |
HIGH | Transforming tokens to CSS/Tailwind/iOS/Android |
| Theming & Dark Mode | tokens-theming-darkmode.md |
HIGH | Implementing theme switching and dark mode |
| Versioning | tokens-versioning.md |
HIGH | Evolving tokens without breaking consumers |
Total: 8 rules across 8 categories
More from yonatangross/skillforge-claude-plugin
zustand-patterns
Reference for Zustand 5.x state management including slices, middleware, Immer, useShallow, persistence, selectors, and devtools integration. Documents 7 core patterns with TypeScript examples and anti-patterns. Use when building React state management with Zustand instead of Redux.
45doctor
OrchestKit doctor for health diagnostics across manifest integrity, hook configuration, skill validation, agent frontmatter, MCP server connectivity, CC version compatibility, and permission rules. Reports issues with severity levels and auto-remediation suggestions. Validates component counts, detects orphaned entries, and checks CC version matrix compliance. Use when diagnosing plugin health, troubleshooting configuration issues, or running pre-release checks.
38domain-driven-design
Domain-Driven Design tactical patterns for complex business domains. Use when modeling entities, value objects, domain services, repositories, or establishing bounded contexts.
38react-server-components-framework
Use when building Next.js 16+ apps with React Server Components. Covers App Router, Cache Components (replacing experimental_ppr), streaming SSR, Server Actions, and React 19 patterns for server-first architecture.
36skill-evolution
Tracks skill usage patterns, edit frequency, and success rates to suggest improvements and optimizations. Manages skill versioning with safe rollback capability and confidence scoring for suggestions. Use when reviewing skill performance, applying auto-suggested changes, or rolling back problematic versions.
36architecture-decision-record
Use this skill when documenting significant architectural decisions. Provides ADR templates following the Nygard format with sections for context, decision, consequences, and alternatives. Use when writing ADRs, recording decisions, or evaluating options.
36