skills.rest
Sjdjdiejdrirhdkjej
SjdjdiejdrirhdkjejCOMMUNITY
Explore all skills by this author →
GitHub

theme-consistency

Apply design/prototype/theme.yaml values to prototype screens during creation.

Updated Jan 5, 2026
Search Tags:#prototype#design-system#design-tokens#CSS-variables#theme-consistency#theme-lock
One-click install
npx skills add https://github.com/Sjdjdiejdrirhdkjej/Claude-code-conductor --skill theme-consistency-sjdjdiejdrirhdkjej
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theme-consistency
Source: https://github.com/Sjdjdiejdrirhdkjej/Claude-code-conductor/tree/main/.claude/skills/theme-consistency
Command: npx skills add https://github.com/Sjdjdiejdrirhdkjej/Claude-code-conductor --skill theme-consistency-sjdjdiejdrirhdkjej

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enforces consistent visual theming across prototype screens by loading and applying values from design/prototype/theme.yaml, preventing drift between screens and sessions.

Core Features & Use Cases

  • Load and enforce theme.yaml values during mockup generation to maintain a unified design language across the project.
  • Prevent hardcoded colors, spacing, and typography by applying CSS variables and design tokens.
  • Validate new screens against established patterns and lock the theme after the first approval to preserve session-to-session consistency.
  • Integrate with the /prototype workflow to automatically apply theming during screen creation and updates.

Quick Start

Ensure design/prototype/theme.yaml exists, then trigger the theme-consistency checks during your prototype creation workflow. If the theme is locked, any changes are blocked and you should create a new prototype to evolve the theme.

Frequently Asked Questions about theme-consistency

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent hardcoded colors and spacing in prototype screens?▼

To prevent hardcoded colors and spacing in prototype screens, the skill enforces centralized theming by loading values from design/prototype/theme.yaml and applying them as CSS variables and design tokens during HTML mockup generation.

How does theme locking preserve design system consistency across sessions?▼

Theme locking preserves design system consistency by validating new screens against established patterns and blocking theme changes after the first approval, ensuring no visual drift occurs across sessions.

What is the best way to unify prototype visuals with design tokens?▼

The best way to unify prototype visuals with design tokens is to load theme.yaml values during the /prototype create workflow, which automatically applies the unified design language across all generated screens.

Do I need a theme.yaml file to enforce CSS variables during mockup generation?▼

Yes, you need a design/prototype/theme.yaml file to enforce CSS variables during mockup generation, as the skill loads and applies values from this file to maintain a unified visual theme across prototype screens.

Why are my theme changes blocked after initial approval?▼

Theme changes are blocked after initial approval because the skill locks the theme to preserve session-to-session consistency, preventing any drift; you must create a new prototype to evolve the theme.

Related Skills

Explore More Design & Creative Skills→
gouravsingh311gouravsingh311

tailwind-v4

Configure Tailwind v4 design tokens using CSS-first @theme directives.

Community
Advanced
DYAI2025DYAI2025

theme-consistency

Enforce theme.yaml values and CSS variables across prototype screens.

Community
Intermediate
Marcus-Mok-GHMarcus-Mok-GH

theme-consistency

Enforce theme values from theme.yaml in prototype screens.

Community
Advanced
EIS-ITSEIS-ITS

Frontend CSS

Apply design tokens and CSS methodologies to style components and optimize production builds.

Official
Intermediate