skills.rest
spencerpauly
spencerpaulyCOMMUNITY
Explore all skills by this author →
Website𝕏@spencerpaulyGitHub

using-ui-stack

Apply configuration-driven design rules to generated UI components.

672|104|Updated Apr 10, 2026
Search Tags:#ui#accessibility#design system#components#dark mode#spacing
One-click install
npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill using-ui-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: using-ui-stack
Source: https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/using-ui-stack
Command: npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill using-ui-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents inconsistent UI output by forcing generated components to follow the same spacing, color, typography, interaction, and accessibility rules every time.

Core Features & Use Cases

  • Spacing and Layout Consistency: Keeps padding, margins, gaps, and section rhythm aligned to an 8px grid.
  • Color and Dark Mode Discipline: Applies a predictable 60-30-10 palette approach with complete light and dark token mappings.
  • Interaction and Accessibility Coverage: Ensures hover, active, focus, and disabled states exist while maintaining contrast and keyboard usability.
  • Use Case: Use it when generating buttons, cards, forms, dashboards, or entire page sections that need a polished, accessible, and system-aligned visual style.

Quick Start

Ask me to build or revise a UI component so it follows the UI stack rules for spacing, colors, dark mode, interactions, and accessibility.

Frequently Asked Questions about using-ui-stack

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

FAQPage Schema
How do I generate UI components with consistent spacing and dark mode support?▼

To enforce consistent UI generation, this system applies an 8px grid for spacing and maps light mode tokens to dark mode equivalents. It outputs components with predictable padding, margins, and color balance.

What is the 60-30-10 color balance rule for design systems?▼

The 60-30-10 color balance rule for design systems dictates a predictable palette distribution: 60% dominant color, 30% secondary, and 10% accent. This approach ensures visual harmony and consistent color discipline across generated components.

How do I ensure generated web interfaces include accessibility and interaction states?▼

To ensure web interfaces include accessibility and interaction states, the system mandates five interaction states (hover, active, focus, disabled, and default) while maintaining contrast and keyboard usability. It outputs components that meet accessibility constraints automatically.

Can I use this configuration-driven design system for entire app dashboards?▼

Yes, you can use this configuration-driven design system for entire app dashboards. It applies consistent spacing, color, typography, and z-index conventions to product, web, and app experiences, ensuring polished and system-aligned page sections.

Why does my generated UI lack consistent motion and z-index conventions?▼

Generated UI lacks consistent motion and z-index conventions when not following a configuration-driven design system. This system enforces specific motion guidance and z-index conventions alongside 8px spacing to prevent inconsistent visual output.

Related Skills

Explore More Design & Creative Skills→
webn77webn77

ascii-mockup-wireframe

Generate structured ASCII wireframes and mockups from page descriptions.

Community
Basic
truongnattruongnat

ui-stack-pro

Validate UI components against 8px grid, color, typography, dark mode, and 5-state rules.

Community
Advanced
daffy0208daffy0208
34

Visual Designer

Create color palettes and typography systems using the 60-30-10 rule.

Community
Intermediate
jeremyspoffordjeremyspofford

design-guide

Enforce consistent UI design with an 8px grid and Tailwind CSS configuration.

Community
Basic