skills.rest
bamboounderwear
bamboounderwearCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Align typography, spacing, color variables, and responsive layout rules in Astro/Tailwind frontend changes.

Updated Apr 8, 2026
Search Tags:#typography#ui design#dark mode#responsive layout#tailwind spacing#lighthouse performance
One-click install
npx skills add https://github.com/bamboounderwear/astrodeck --skill ui-design-bamboounderwear
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/bamboounderwear/astrodeck/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/bamboounderwear/astrodeck --skill ui-design-bamboounderwear

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves inconsistent UI presentation by enforcing a shared system for spacing, typography, color usage, and responsive behavior while protecting performance targets.

Core Features & Use Cases

  • Visual consistency enforcement: Applies standardized section padding, border radius, typography hierarchy, and approved color-variable usage to prevent subtle design drift.
  • Responsive UI validation: Ensures mobile-first layouts avoid overflow, missing navigation patterns, and touch-target regressions across key breakpoints.
  • Performance-aware UI tuning: Guides changes when Lighthouse performance drops below the required threshold by focusing UI patterns that reduce layout shift and heavy rendering.

Quick Start

Use the ui-design skill to review your modified component or section for spacing, typography hierarchy, dark-mode-safe colors, and responsive correctness against the design consistency checklist.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I maintain consistent UI typography and spacing in Astro and Tailwind?▼

To maintain consistent UI typography and spacing, apply standardized section padding, typography hierarchy, and CSS-variable colors. This enforces a shared design system across Astro and Tailwind contexts, preventing subtle visual drift in components and sections.

What's the best way to fix responsive layout overflow on mobile-first breakpoints?▼

Fixing responsive layout overflow requires mobile-first validation across key breakpoints. Ensure touch targets do not regress and navigation patterns remain intact, checking that layout rules prevent horizontal overflow on smaller screens.

Why does my Lighthouse performance score drop when modifying UI elements?▼

Lighthouse performance drops when UI modifications introduce layout shift or heavy rendering. Tune performance by selecting UI patterns that reduce visual shifts and optimize rendering speed to meet required Lighthouse KPI targets.

Can I use standard hex colors instead of CSS variables for dark mode UI design?▼

You cannot use standard hex colors for dark mode UI design if they bypass the system. You must use approved CSS-variable color usage to ensure dark mode safety and maintain consistent visual presentation across themes.

Does this UI design approach enforce specific border radius and shadow patterns?▼

Yes, the UI design approach enforces specific radius and shadow patterns, including a strict rounded-xl enforcement for components. This standardizes visual elements and prevents inconsistent border radius applications across pages.

Related Skills

Explore More Design & Creative Skills→
safzanpiranisafzanpirani
1

shadcn-layouts

Generate and debug CSS layouts for shadcn/Tailwind applications.

Community
Intermediate
alamenaialamenai
243

check

Validate new map components for required outputs and wiring.

Community
Intermediate
ramunasnognysramunasnognys
1

mobile-ux-improver

Enforce mobile-first UX best practices for web application components.

Community
Intermediate
wasintohwasintoh
90

design-excellence

Polish AI-built UI with color, typography, spacing, and motion guidelines.

Community
Basic