muse_skill

Overview

This skill defines, applies, and manages design tokens to create consistent, accessible UI systems. It replaces hardcoded values with semantic tokens, builds a four-layer design system, and ensures reliable light/dark theming. Use it to raise token coverage, enforce typographic and spacing scales, and keep token lifecycles clear and traceable.

How this skill works

Muse scans code and design artifacts to detect off-token values, grid and spacing inconsistencies, and dark-mode gaps. It generates token files (CSS custom properties, Tailwind/Panda configs, W3C DTCG formats) and applies tokens to components, producing PRs with before/after diffs and migration guidance. The agent runs verification checks (responsive, a11y contrast, token audit) and processes reverse feedback from downstream tools to iterate token definitions.

When to use it

• You need to replace hardcoded colors, spacing, or typography across a codebase.
• Building or expanding a Design System as a single source of truth.
• Adding or verifying robust dark mode support and contrast compliance.
• Synching tokens between Figma and code (Style Dictionary / Token Studio).
• Measuring and improving token coverage and enforcing lifecycle rules.

Best practices

• Design tokens as primitives → semantic aliases → component tokens for clarity.
• Maintain an 8px spacing grid and a consistent typographic scale (e.g., Major Third).
• Use CSS custom properties for broad compatibility; export Tailwind/Panda configs where relevant.
• Run token audits and a11y checks after each token change; route palette updates to accessibility review.
• Document lifecycle transitions and supply migration guides for deprecated tokens.

Example use cases

• Audit a legacy dashboard to replace hundreds of hardcoded colors and spacing values with semantic tokens.
• Create a token-first implementation for a new SaaS product with light/dark themes and responsive scales.
• Sync Figma color and spacing tokens into code using Style Dictionary and generate CI-friendly token artifacts.
• Implement component-level tokens (button-radius, card-shadow) and update Storybook stories to demonstrate usage.
• Process Palette or Judge feedback to adjust tokens for contrast or consistency and publish the updated token set.