using-ui-stack
Enforce a configuration-driven design system when generating UI. Ensures consistent spacing, colors, typography, dark mode, interactions, and accessibility across all AI-generated components.
- Installs
- 542
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill using-ui-stack- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads using-ui-stack automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Using UI Stack
Apply a structured design system to every UI component you generate. This prevents inconsistent padding, mismatched colors, and forgotten hover states.
Design System Principles
Follow these rules for every component you build:
Spacing — 8px Grid
Use multiples of 8 for all spacing (padding, margin, gap):
4px— tight internal padding only8px— inline gaps, icon spacing16px— standard padding, card gaps24px— section padding32px— large section gaps48px / 64px— page-level spacing
Color — 60-30-10 Rule
- 60% neutral/background
- 30% primary brand color
- 10% accent for CTAs and highlights
- Semantic colors: success (green), warning (amber), error (red), info (blue)
- Never use pure black (
#000) for dark mode — useslate-950or similar
Typography — 1.25 Ratio Scale
text-xs: 12px / 16px
text-sm: 14px / 20px
text-base: 16px / 24px
text-lg: 18px / 28px
text-xl: 20px / 28px
text-2xl: 24px / 32px
text-3xl: 30px / 36px
text-4xl: 36px / 40px
- Headings:
font-semiboldorfont-bold - Body:
font-normal, line-height 1.5–1.75 - Mono: use for code, IDs, numeric data
Dark Mode
- Provide complete light/dark mappings for every color token
- Background:
white→slate-950, notblack - Text:
slate-900→slate-100 - Borders:
slate-200→slate-800
5-State Interactions
Every interactive element must have:
- Default — base appearance
- Hover — subtle color shift or shadow
- Active/Pressed — slightly darker or scaled down
- Focus — visible ring (
ring-2 ring-offset-2) - Disabled — reduced opacity,
cursor-not-allowed
Accessibility
- Contrast ratio ≥ 4.5:1 for text, ≥ 3:1 for large text
- Touch targets ≥ 44×44px
- Semantic HTML (
buttonnotdiv,nav,main, etc.) - Keyboard navigable — all interactions reachable via Tab/Enter/Escape
- Respect
prefers-reduced-motionfor animations
Animations
- Duration: 150–300ms for micro-interactions
- Easing:
ease-outfor entrances,ease-infor exits - Wrap motion in
motion-safe:or checkprefers-reduced-motion
Overlay Z-Index Scale
dropdown: z-10
sticky: z-20
overlay: z-30
modal: z-40
toast: z-50
tooltip: z-60
Workflow
- Before generating UI, check if the project has a
ui-stackconfig or design tokens - If not, apply the defaults above
- For every component, verify spacing is on the 8px grid, colors follow 60-30-10, and all 5 interaction states exist
- Test dark mode by toggling the class/attribute and confirming all tokens map correctly
References
- ui-stack.dev — interactive configurator and full docs
- GitHub: rashoodkhan/ui-stack — source repo
FAQ
What does the using-ui-stack skill do?
Enforce a configuration-driven design system when generating UI. Ensures consistent spacing, colors, typography, dark mode, interactions, and accessibility across all AI-generated components.
How do I install using-ui-stack?
Run npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill using-ui-stack in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/using-ui-stack/ (personal) or .claude/skills/using-ui-stack/ (project).
Which AI agents can use using-ui-stack?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is using-ui-stack safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains using-ui-stack?
It is published by spencerpauly in spencerpauly/awesome-cursor-skills. It has 542 recorded installs.
More from spencerpauly/awesome-cursor-skills
visual-qa-testing
spencerpauly/awesome-cursor-skills
Visually QA a web application by launching it in Cursor's built-in browser, taking screenshots, checking console errors, and auditing network requests. Use after making UI changes to verify they look correct.
auditing-security
spencerpauly/awesome-cursor-skills
Perform a systematic security audit of a codebase, checking for OWASP Top 10 vulnerabilities, secrets exposure, and insecure patterns.
responsive-testing
spencerpauly/awesome-cursor-skills
Open the app in Cursor's browser at multiple viewport sizes, screenshot each, and report any layout breakage.
suggesting-cursor-rules
spencerpauly/awesome-cursor-skills
When the user repeats the same correction or convention multiple times, suggest a Cursor rule to encode it permanently.
systematic-debugging
spencerpauly/awesome-cursor-skills
Structured debugging methodology — reproduce, isolate, hypothesize, verify. Covers git bisect, binary search, logging, and minimal reproduction.
grinding-until-pass
spencerpauly/awesome-cursor-skills
Keep iterating on code changes until the tests pass, the build succeeds, or linting is clean. Runs in a tight loop of fix → run → check → repeat. Use when you want the agent to autonomously grind through test failures or build errors.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.