skills.rest
saranskumar
saranskumarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-enforcer

Audit design tokens, spacing, typography, colors, and component variants for consistency.

Updated Apr 19, 2026
Search Tags:#typography#consistency#components#tokens#color#design-system#ui-patterns
One-click install
npx skills add https://github.com/saranskumar/anti-slop --skill design-system-enforcer-saranskumar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-enforcer
Source: https://github.com/saranskumar/anti-slop/tree/main/skills/design-system-enforcer
Command: npx skills add https://github.com/saranskumar/anti-slop --skill design-system-enforcer-saranskumar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams maintain visual coherence by ensuring UI work adheres to a shared design system, preventing drift across tokens, spacing, typography, color usage, and component variants.

Core Features & Use Cases

  • Consistency enforcement: Audit tokens, spacing, typography, color usage, and component variants against the design system.
  • Guided reuse: Recommend existing primitives and variants before creating new ones.
  • Review workflow support: Provide actionable feedback for designers and developers during code reviews and design reviews.

Quick Start

Review the active project and generate a concise plan to align UI elements with the design system.

Frequently Asked Questions about design-system-enforcer

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

FAQPage Schema
How do I enforce design-system consistency across UI components in my codebase?▼

Design-system consistency is enforced by auditing tokens, spacing, typography, colors, and component variants across your codebase to prevent visual drift and ensure UI alignment.

What is design-system drift and how do I audit for it during UI development?▼

Design-system drift occurs when UI elements deviate from shared styles; you audit for it by checking alignment with existing primitives, tokens, and reusable patterns during UI development and review.

How do I decide whether to reuse an existing UI component or create a new variant?▼

You can guide create-or-reuse decisions by auditing component variants against your design system, which recommends existing primitives and patterns before allowing new ones to be created.

Can I check design token and color usage conformance during code reviews?▼

Yes, you can check design token and color usage conformance during code reviews by generating actionable feedback that aligns UI elements with existing design-system primitives and variants.

What is the best way to align typography and spacing tokens with a shared design system?▼

The best way to align typography and spacing tokens is to review the active project and generate a concise plan to map UI elements directly to existing design-system tokens and patterns.

Do I need predefined UI patterns and tokens before checking for design-system conformance?▼

Yes, you need existing design-system tokens, primitives, and reusable UI patterns established in your project to effectively audit conformance and guide alignment decisions.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
toly1994328toly1994328
12

flash-im-ui-style

Define unified Flutter UI styling with design tokens for Flash IM modules.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
kubermatickubermatic
1

normalize

Align UI features with design system tokens, typography, color, and spacing.

Official
Intermediate