Skills
.Work. You
Rest

theme-consistency

Community

Maintain visual consistency across prototype screens.

Design & Creative#theming#consistency#CSS#prototype#OKLCH#design-system
Authormarcusgoll
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Enforce consistent theming across prototype mockups by loading theme.yaml, validating CSS variable usage, preventing hardcoded values, and locking the theme after the first screen approval.

Core Features & Use Cases

  • Load and enforce theme.yaml values during mockup generation.
  • Prevent hardcoded colors, spacing, and typography values.
  • Validate new screens against established design patterns.
  • Lock the theme after first approval to ensure session-wide consistency.

Quick Start

  1. Automatically invoke this skill when /prototype create [screen] is called and theme.yaml exists.
  2. When not yet locked, load the theme and allow updates; once approved, lock the theme.
  3. For each new screen, generate HTML using theme variables and validate against rules.
  4. Iterate until all screens align with the established theme.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: theme-consistency
Download link: https://github.com/marcusgoll/Spec-Flow/archive/main.zip#theme-consistency

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.