skills.rest
sgcarstrends
sgcarstrendsOFFICIAL
Explore all skills by this author →
GitHub

typography-spacing-enforcer

Scan component files for typography violations and legacy spacing patterns.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents UI design inconsistencies by automatically enforcing the project's typography system and modern spacing conventions, saving developers time on manual reviews and refactoring.

Core Features & Use Cases

  • Automated Violation Detection: Scans component files for incorrect heading usage, raw HTML tags, and legacy spacing patterns (space-y, mt-*).
  • Auto-Fix Suggestions: Provides clear before/after code examples for identified violations, streamlining the correction process.
  • Design System Adherence: Ensures all UI elements align with the HeroUI semantic color system and project-specific typography components.
  • Use Case: After developing a new feature, activate this Skill to automatically check all new components for typography and spacing errors, instantly identifying issues like <h1> tags instead of Typography.H1 or space-y-4 instead of flex flex-col gap-4, and suggesting fixes.

Quick Start

Enforce typography and spacing standards on the new 'ProductCard' component in 'src/components/product-card.tsx'.

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 standards across my UI components?▼

Enforce typography and spacing standards by scanning component files for violations like raw HTML tags (`<h1>` instead of `Typography.H1`) and legacy spacing patterns (`space-y`, `mt-*`). This Skill detects these issues automatically and suggests fixes with before/after examples to align your UI with your design system.

Can I detect typography violations in Tailwind CSS components?▼

Yes. This Skill scans for legacy Tailwind spacing patterns and ensures components use modern conventions like `flex flex-col gap-4` instead of `space-y-4`. It verifies Typography imports from `@web/components/typography` and reports violations with file and line references.

What's the best way to prevent design drift in a growing component library?▼

Automate UI consistency checks during component creation, refactoring, code reviews, and PR checks. This Skill eliminates manual review overhead by continuously scanning for typography violations and spacing inconsistencies, catching design drift before it compounds.

How do I fix spacing and typography issues after detecting them?▼

The Skill provides auto-fix suggestions with clear before/after code examples for each violation. You can apply these suggestions to migrate components to modern conventions and ensure adherence to your typography system in a single pass.

Does this work with design systems beyond Tailwind CSS?▼

This Skill enforces project-specific typography components and semantic spacing conventions. While it detects Tailwind-specific patterns, it applies to any component structure that uses the `@web/components/typography` module and modern spacing approaches.

Related Skills

Explore More Software Engineering Skills→
motormetricsmotormetrics
21

typography-spacing-enforcer

Detect typography and spacing violations in UI component files.

Official
Advanced
LegalQuantsLegalQuants
46

collating-reviewer-feedback

Compile Word comments and tracked changes from DOCX drafts into a resolution checklist.

Official
Advanced
YuDefineYuDefine
45

normalize

Normalize frontend styling to align with design-system tokens and components.

Official
Advanced
facebookfacebook
247.1k

fix

Run yarn prettier and yarn linc to fix linting and formatting issues.

Official
Intermediate