skills.rest
themewagon
themewagonOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-design

Audit UI components against design-system rules and apply spacing and typography fixes.

1|Updated Apr 20, 2026
Search Tags:#typography#lighthouse#responsive#ui-design#design-system#spacing
One-click install
npx skills add https://github.com/themewagon/astrodeck --skill ui-design-themewagon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/themewagon/astrodeck/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/themewagon/astrodeck --skill ui-design-themewagon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams maintain visual consistency and performance in UI design by guiding actions to ensure spacing, typography, and overall design cohesion, particularly when Lighthouse Performance drops below the 90 threshold.

Core Features & Use Cases

  • Maintain consistent spacing (py-20 px-6) and typography across sections
  • Enforce design-system rules for border radii, shadows, and colors
  • Improve Lighthouse performance by ensuring visual consistency and responsive layouts
  • Use canonical sources to align with system guidelines

Quick Start

Audit the current UI components against the design system and apply spacing and typography fixes to restore visual consistency.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I enforce visual consistency in UI design across components and pages?▼

Maintain consistent spacing and typography alignment across a project by applying design-system globals. This regulates spacing, color tokens, and responsive layouts to ensure visual consistency across all components and pages.

How do I fix typography and spacing alignment when Lighthouse performance drops below 90?▼

When Lighthouse performance drops below 90, audit UI components against design-system globals and apply spacing and typography fixes. Restoring visual consistency and responsive layouts directly improves the Lighthouse performance score.

What is the best way to maintain design-system rules for border radii, shadows, and colors?▼

Use canonical sources to align with system guidelines for border radii, shadows, and colors. Enforcing these design-system globals ensures typography, spacing, effects, and imagery remain cohesive across the entire project.

Does UI consistency require validating spacing and color tokens against responsive layouts?▼

Yes, UI consistency requires validating spacing and color tokens against responsive layouts. This process ensures typography alignment and design cohesion perform optimally across components, pages, and various screen sizes.

When do I need to audit UI components for typography alignment and design token consistency?▼

You need to audit UI components for typography alignment and design token consistency when visual inconsistency appears or Lighthouse performance drops. This restores spacing cohesion and validates results against Lighthouse targets.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
aaron-he-zhuaaron-he-zhu
142

on-page-seo-auditor

Audit on-page SEO elements and identify optimization opportunities on webpages.

Community
Intermediate
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
jcdiv47jcdiv47

normalize

Audit frontend features and produce a design-system normalization plan.

Community
Advanced