maintain-design-md

What problem does it solve?

This Skill eliminates the risk of visual drift between a project's runtime CSS and its documented design system, which causes inconsistent user experiences and forces AI agents to make uninformed stylistic decisions when no explicit rule exists.

Core Features & Use Cases

• Stitch Spec Compliance: Enforces the Google Stitch open spec for DESIGN.md files, including canonical YAML frontmatter token groups (colors, typography, rounded, spacing, components) and eight ordered prose sections.
• Drift Prevention & Reconciliation: Provides clear triggers for when to update DESIGN.md when runtime CSS changes, plus a step-by-step drift audit workflow to catch mismatches between documented tokens and actual CSS custom properties.
• Lossless Extension Support: Safely accommodates project-specific off-spec extensions like imagery blocks for OG image generation, mode variants for light/dark themes, and iconography conventions without breaking spec-compliant consumer behavior.
• Use Case: Use this Skill when bootstrapping a DESIGN.md for a new Lossless project (splash page, Astro site, plugin landing), auditing an existing DESIGN.md for drift after a visual update, or adding a new component token to the design doc.

Quick Start

Use the maintain-design-md skill to create a Stitch-compliant DESIGN.md for the current project by extracting design tokens from its runtime CSS file and filling the canonical scaffold.