skills.rest
holger1411
holger1411COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design

Audit UI components against design system typography and spacing rules.

70|14|Updated Dec 18, 2025
Search Tags:#typography#accessibility#lighthouse#ui-design#design-system#spacing
One-click install
npx skills add https://github.com/holger1411/astrodeck --skill ui-design-holger1411
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/holger1411/astrodeck/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/holger1411/astrodeck --skill ui-design-holger1411

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent visuals and typography across UI elements waste time and undermine user trust; this skill codifies the design system checks to keep interfaces cohesive.

Core Features & Use Cases

  • Design consistency across components, sections, and pages
  • Typography & spacing guidelines aligned with the system
  • Review workflows including Lighthouse performance checks and accessibility checks
  • Use Case: When a UI inconsistency or typography misalignment is detected, run the checks and apply the system rules to restore harmony.

Quick Start

Audit your UI against the design system and align typography, spacing, and visual rules.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I check UI typography and spacing against a design system?▼

To check UI typography and spacing against a design system, apply an audit checklist enforcing non-negotiable system rules. This process restores visual harmony across components and layouts by correcting misalignments.

What causes inconsistent visuals and typography across web UI components?▼

Inconsistent visuals and typography occur when UI elements bypass design system rules. Codifying checks for typography, spacing, and color enforces consistency and prevents these misalignments from undermining user trust.

How do I run Lighthouse performance and accessibility checks on a web layout?▼

Run Lighthouse performance and accessibility checks through the UI review workflow to validate responsiveness. This enforces KPI-based quality controls and ensures web layouts meet accessibility standards.

Can I use design system rules to fix responsive UI inconsistencies?▼

Yes, you can use design system rules to fix responsive UI inconsistencies. The workflow includes responsive checks and applies spacing and typography guidelines to correct visual misalignments across different screen sizes.

What is the best way to maintain design consistency across multiple web pages?▼

The best way to maintain design consistency is applying a scalable design system with non-negotiable rules. Codified checks evaluate typography, spacing, and color across pages to ensure cohesive UI visuals.

Do I need a predefined design system to audit UI visual consistency?▼

Yes, a predefined design system is needed to audit UI visual consistency effectively. The audit relies on established typography, spacing, and color rules to detect misalignments and enforce visual harmony.

Related Skills

Explore More Design & Creative Skills→
DevXojeDevXoje

ui-design-system

Generate color, typography, spacing, and breakpoint tokens from brand inputs.

Community
Basic
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
gonzalezpazmonicagonzalezpazmonica
47

visual-quality

Analyze UI screenshots against Figma exports for visual quality.

Community
Advanced
JoniSirvioJoniSirvio

critique

Produces UX critique reports covering layout, typography, color, accessibility, and interaction patterns.

Community
Advanced