skills.rest
BrunoSantanaDeveloper
BrunoSantanaDeveloperCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-enforcement

Enforce design-system tokens and layout specs in new UI code.

Updated Jan 27, 2026
Search Tags:#ui#frontend#tokens#design-system#specs#css-variables
One-click install
npx skills add https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit --skill design-system-enforcement-brunosantanadeveloper
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-enforcement
Source: https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit/tree/main/skills/design-system-enforcement
Command: npx skills add https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit --skill design-system-enforcement-brunosantanadeveloper

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The design system is often bypassed in UI development, leading to inconsistent visuals and fragmentation across components. This skill ensures every UI change adheres to the design system from the moment of creation, preserving consistency and reducing rework.

Core Features & Use Cases

  • Enforces usage of design-system tokens, layout specs, and visual effects in new UI code.
  • Validates prerequisites (MASTER.md tokens, SHARED-LAYOUT.md, and page specs) before green-phase work.
  • Use Case: When implementing a new button or page, the agent ensures tokens and layout guidelines are applied, triggering warnings if any spec is missing.

Quick Start

Follow the prereqs and use the gating checklist to begin UI work with the Design System in effect.

Frequently Asked Questions about design-system-enforcement

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

FAQPage Schema
How do I enforce design system tokens when creating new UI components?▼

You can enforce design system tokens by validating MASTER.md and SHARED-LAYOUT.md prerequisites during the TDD GREEN phase, ensuring new UI components correctly apply CSS variables and layout specs to prevent visual fragmentation.

What is the best way to prevent design system bypassing in frontend development?▼

Preventing design system bypassing requires gating checks that trigger warnings if page specs or tokens are missing. This ensures every UI component adheres to predefined CSS variables and visual effects from the moment of creation, reducing rework.

Do I need MASTER.md tokens to enforce design system specs?▼

Yes, MASTER.md tokens are required prerequisites. The enforcement mechanism validates MASTER.md tokens, SHARED-LAYOUT.md, and PAGE-SPEC references before allowing green-phase UI work to proceed, ensuring strict adherence to design specifications.

How does design system enforcement work during the TDD GREEN phase?▼

During the TDD GREEN phase, design system enforcement applies gating checks to new UI code. It requires CSS variables and validates layout specifications, triggering warnings if any required design system specs are missing from the implementation.

Why does my UI code trigger warnings for missing SHARED-LAYOUT.md references?▼

Warnings for missing SHARED-LAYOUT.md references trigger because the skill validates prerequisite files before green-phase work. It enforces strict adherence to layout specs and design tokens, ensuring no UI component bypasses the established design system.

Related Skills

Explore More Design & Creative Skills→
BrunoSantanaDeveloperBrunoSantanaDeveloper

page-specifications

Generate PAGE-SPEC-*.md files specifying layout, sections, components, states, and responsive behavior.

Community
Advanced
MomoChenisMeMomoChenisMe
1

speclink-verify

Verify code implementations against spec artifacts using the Speclink CLI.

Community
Intermediate
ambroviaambrovia

design-critique

Evaluate UI design variants against a multi-dimensional rubric for design system token adherence.

Official
Advanced
tunacosguntunacosgun

emcn-design-review

Audit UI code against the emcn design system for conformance.

Community
Advanced