skills.rest
motormetrics
motormetricsOFFICIAL
Explore all skills by this author →
Website𝕏@motormetricsGitHub

typography-spacing-enforcer

Detect typography and spacing violations in UI component files.

21|2|Updated Nov 5, 2023
Search Tags:#typography#ui#consistency#design-system#spacing#component-review
One-click install
npx skills add https://github.com/motormetrics/motormetrics --skill typography-spacing-enforcer-motormetrics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typography-spacing-enforcer
Source: https://github.com/motormetrics/motormetrics/tree/main/apps/web/.claude/skills/typography-spacing-enforcer
Command: npx skills add https://github.com/motormetrics/motormetrics --skill typography-spacing-enforcer-motormetrics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures UI components comply with the project's Typography system and modern spacing conventions, reducing design drift and review time.

Core Features & Use Cases

  • Enforces usage of Typography components over raw HTML headings and tags.
  • Validates spacing practices such as gap utilities, margins, and size utilities to maintain a cohesive design system.
  • Provides actionable guidance during reviews and auto-fix suggestions to align components with project standards.

Quick Start

Run the typography-spacing-enforcer audit on the target UI component to enforce typography and spacing standards.

Frequently Asked Questions about typography-spacing-enforcer

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

FAQPage Schema
How do I enforce typography and spacing consistency in UI components?▼

To enforce typography and spacing consistency, identify violations in component files by checking raw HTML usage, typography imports, spacing utilities, and semantic colors. This ensures strict alignment with your design system.

What is the best way to stop design drift during UI code reviews?▼

The best way to stop design drift during code reviews is to run automated checks that validate spacing utilities and typography component usage. This reduces review time by providing actionable corrective guidance.

How do I check if a UI component uses raw HTML tags instead of design system typography?▼

To check for raw HTML tags, audit the component files for direct heading and tag usage. The system flags these violations and suggests replacing them with proper typography components to maintain consistency.

Can I validate gap utilities and margins when refactoring UI components?▼

Yes, you can validate gap utilities and margins during component refactoring. The audit checks spacing practices to ensure all margins and size utilities maintain a cohesive design system across pages.

Does the typography spacing enforcer provide auto-fix suggestions for UI violations?▼

Yes, the typography spacing enforcer provides auto-fix suggestions to align components with project standards. It generates actionable guidance during reviews to correct semantic colors and size utility issues.

Related Skills

Explore More Design & Creative Skills→
CANTAGESTUDIOCANTAGESTUDIO
3

variant-consistency-checker

Validate UI component usage against design system specifications.

Community
Intermediate
izzoaizzoa
22

ss-lint

Scan source files for common design system violations and suggest fixes.

Community
Basic
moughamirmoughamir

tailwindcss-advanced-design-systems

Define Tailwind CSS design tokens and semantic theme utilities with @theme and CSS variables.

Community
Advanced
The-Vibe-CompanyThe-Vibe-Company
2.4k

normalize

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

Official
Advanced