skills.rest
ravnhq
ravnhqOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-frontend

Validate UI components against design system tokens and responsive guidelines.

16|15|Updated Jan 16, 2026
Search Tags:#typography#frontend#tokens#design-system#spacing#responsive-design#enforce
One-click install
npx skills add https://github.com/ravnhq/ai-toolkit --skill design-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-frontend
Source: https://github.com/ravnhq/ai-toolkit/tree/main/skills/design-frontend
Command: npx skills add https://github.com/ravnhq/ai-toolkit --skill design-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent UI implementations across teams lead to fragmented user experiences and higher maintenance costs. This Skill codifies a shared visual language using design tokens and frontend guidelines to ensure cohesive interfaces.

Core Features & Use Cases

  • Token-driven styling: colors, typography, spacing, and elevation are defined centrally and reused.
  • Responsive primitives: mobile-first patterns that scale gracefully across breakpoints.
  • Component alignment: layout, typography, and spacing rules ensure consistent composition in design and code reviews.

Quick Start

Use this Skill to validate a UI component against the design system and surface any token mismatches or responsive issues.

Frequently Asked Questions about design-frontend

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

FAQPage Schema
How do I enforce design system consistency across web UIs?▼

You can enforce design system consistency by applying centralized design tokens for colors, typography, spacing, and breakpoints, ensuring all frontend components adhere to shared visual rules.

How do I validate UI components against spacing and typography tokens?▼

Validating UI components involves checking layout decisions and typography against predefined design tokens to surface mismatches, ensuring compliant composition during design and code reviews.

What are design tokens and how do they drive frontend styling?▼

Design tokens are centrally defined variables for colors, typography, spacing, and elevation. They drive frontend styling by being reused across web UIs to prevent fragmented user experiences.

Can I use this to check responsive design across mobile-first breakpoints?▼

Yes, you can check responsive design across mobile-first breakpoints. The system applies responsive primitives that scale gracefully, validating layout decisions against defined breakpoint tokens.

Why does inconsistent UI implementation happen across frontend teams?▼

Inconsistent UI implementation happens when teams lack a codified visual language. Without enforced design tokens for spacing and typography, fragmented user experiences and higher maintenance costs occur.

What is the best way to manage spacing and typography rules in a design system?▼

The best way to manage spacing and typography rules is by codifying them as centralized design tokens, which are then enforced across web UIs to ensure cohesive interfaces and consistent composition.

Related Skills

Explore More Design & Creative Skills→
junchenghuojunchenghuo
3

ui-design-token-system

Generate UI design tokens for colors, spacing, typography, and border-radius.

Community
Basic
ProLeadApptProLeadAppt

ui-typography

Automate typographic rules for HTML, CSS, and UI code.

Community
Advanced
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate
automata-networkautomata-network

design-bible

Align React, Vue, and HTML UI development with token-driven design system rules.

Official
Advanced