theme-consistency

Theme consistency is maintained by loading a theme.yaml file that defines design tokens like colors, spacing, and typography. The Skill enforces these variables across all prototype screens, preventing hardcoded values and ensuring visual alignment from the first screen through all subsequent mockups.

Yes. CSS variables from theme.yaml replace hardcoded colors and spacing values. The Skill validates that every screen uses these variables and density classes, blocking hardcoded styling to lock in consistency once the first screen is approved.

Once you approve the first screen, the theme is locked session-wide. All subsequent screens must conform to the established design tokens, variables, and density classes. This prevents theme drift and ensures every new mockup aligns with the original design system.

The Skill automatically validates each generated HTML mockup against theme.yaml rules during /prototype create. It rejects hardcoded color and spacing values, requiring designers to use CSS variables and predefined density classes instead.

Yes. The Skill supports OKLCH and other color models defined in theme.yaml. It enforces whatever color space and token structure your design system specifies, validating all new screens against those established values.

Yes. Before the first screen is approved, you can update theme.yaml and the Skill will apply changes to new screens. Once approved, the theme locks to prevent inconsistency across the remaining mockups in that session.