skills.rest
00PrabalK00
00PrabalK00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-enforcer

Validate frontend changes against design-system rules for spacing, typography, and tokens.

1|Updated Mar 16, 2026
Search Tags:#typography#frontend#tokens#design-system#spacing#ui-review#component-usage
One-click install
npx skills add https://github.com/00PrabalK00/claude-skills --skill design-system-enforcer-00prabalk00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-enforcer
Source: https://github.com/00PrabalK00/claude-skills/tree/main/skills/design-system-enforcer
Command: npx skills add https://github.com/00PrabalK00/claude-skills --skill design-system-enforcer-00prabalk00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI changes for alignment with spacing, typography, tokens, and component usage defined by the design system. This helps prevent regressions and maintain visual consistency across products.

Core Features & Use Cases

  • Validate spacing, typography, tokens, and component usage against design-system rules.
  • Detect deviations in layout or component composition across PRs.
  • Use in CI or pre-commit checks to enforce consistency and surface remediation steps.

Quick Start

Run the enforcer on your PR to compare the changes against the project’s design-system rules and surface actionable fixes.

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 compliance in a pull request?▼

Design-system compliance in web projects is enforced by reviewing PR diffs against repository-defined design rules. This process validates spacing, typography, tokens, and component usage to prevent visual regressions and maintain consistency.

Can I check frontend changes for typography and spacing deviations before merging?▼

Yes, you can check frontend changes for typography and spacing deviations by integrating the enforcer into CI or pre-commit checks. It detects layout and component composition deviations and provides actionable fixes before merge.

Does the design-system enforcer work with existing project tokens and tests?▼

Yes, the design-system enforcer validates changes against repository-defined design rules and available tests. It leverages your existing project tokens and design guidelines to detect deviations in component usage and layout.

What is the best way to automate UI review for design system consistency?▼

The best way to automate UI review for design system consistency is applying an enforcer to web project changes. It automatically compares frontend modifications against defined spacing, typography, token, and component usage rules.

Why do design tokens and component usage deviate in frontend PRs?▼

Design tokens and component usage deviate in frontend PRs when changes bypass established design guidelines. Running an enforcer detects these mismatches early by validating diffs against repository-defined rules and surfacing remediation steps.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
mikeparcewskimikeparcewski
8

visual-review

Assess visual design against a design system using a scoring rubric.

Community
Intermediate
kissrosecicd-hubkissrosecicd-hub
31

secrets-scanner

Detect leaked credentials and secrets across codebases and version histories.

Community
Advanced
insightwavesmithinsightwavesmith

code-analyzer

Analyze code changes to identify those meeting evidence-shape-check criteria.

Community
Intermediate