New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Using UI Stack

by spencerpauly in spencerpauly/awesome-cursor-skills

Enforce a configuration-driven design system when generating UI.

CC0-1.0Auto-check passedFrontend & Design

Install Using UI Stack

skills CLI
$ npx skills add spencerpauly/awesome-cursor-skills --skill using-ui-stack -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install spencerpauly/awesome-cursor-skills using-ui-stack --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/spencerpauly/awesome-cursor-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/resources/using-ui-stack .claude/skills/using-ui-stack && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
using-ui-stack
GitHub stars
841
Token cost
~767 tokens
SKILL.md length
309 words
Files
1
Skills in repo
59
Repo updated
First seen
Licence
CC0-1.0

At a glance

Enforce a configuration-driven design system when generating UI.

  • Works in 5 steps: Default — base appearance → Hover — subtle color shift or shadow → Active/Pressed — slightly darker or… → …
  • Tasks that involve Theming and dark mode
  • SKILL.md covers Design System Principles, Workflow and References
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Using UI Stack is an agent skill from spencerpauly/awesome-cursor-skills. Enforce a configuration-driven design system when generating UI. Ensures consistent spacing, colors, typography, dark mode, interactions, and accessibility across all AI-generated components.

Its SKILL.md is about 770 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Theming and dark mode, Design systems and Typography. The repository describes itself as: A curated list of awesome skills for Cursor. The licence is CC0-1.0.

When your agent uses it

  • Tasks that involve Theming and dark mode
  • Tasks that involve Design systems
  • Tasks that involve Typography

Example prompts

  • “/using-ui-stack”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Default — base appearance
  2. Hover — subtle color shift or shadow
  3. Active/Pressed — slightly darker or scaled down
  4. Focus — visible ring (ring-2 ring-offset-2)
  5. Disabled — reduced opacity, cursor-not-allowed

What it can do on your machine

Read from SKILL.md and the folder at commit 99cd265. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • ui-stack.dev
    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Using UI Stack loads about 767 tokens when it runs. Until then it costs about 52 tokens; SKILL.md has 309 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~52
When it runs · the whole SKILL.md, loaded when a task matches
~767

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from spencerpauly/awesome-cursor-skills at commit 99cd265, republished under its CC0-1.0 licence (© spencerpauly). 309 words, ~767 tokens.

Download SKILL.mdSave it as .claude/skills/using-ui-stack/SKILL.md (or your agent's skills folder).
name
using-ui-stack
description
Enforce a configuration-driven design system when generating UI. Ensures consistent spacing, colors, typography, dark mode, interactions, and accessibility across all AI-generated components.
user-invocable
true

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 only
  • 8px — inline gaps, icon spacing
  • 16px — standard padding, card gaps
  • 24px — section padding
  • 32px — large section gaps
  • 48px / 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 — use slate-950 or 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-semibold or font-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, not black
  • Text: slate-900 → slate-100
  • Borders: slate-200 → slate-800
5-State Interactions

Every interactive element must have:

  1. Default — base appearance
  2. Hover — subtle color shift or shadow
  3. Active/Pressed — slightly darker or scaled down
  4. Focus — visible ring (ring-2 ring-offset-2)
  5. 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 (button not div, nav, main, etc.)
  • Keyboard navigable — all interactions reachable via Tab/Enter/Escape
  • Respect prefers-reduced-motion for animations
Animations
  • Duration: 150–300ms for micro-interactions
  • Easing: ease-out for entrances, ease-in for exits
  • Wrap motion in motion-safe: or check prefers-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

  1. Before generating UI, check if the project has a ui-stack config or design tokens
  2. If not, apply the defaults above
  3. For every component, verify spacing is on the 8px grid, colors follow 60-30-10, and all 5 interaction states exist
  4. Test dark mode by toggling the class/attribute and confirming all tokens map correctly

References

© spencerpauly, CC0-1.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in resources/using-ui-stack of spencerpauly/awesome-cursor-skills.

Open the folder on GitHubat commit 99cd265

Compare with similar skills

Using UI Stack next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Using UI Stack compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Using UI Stack this skillspencerpauly/awesome-cursor-skills841—~767Automated safety check: PassCC0-1.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Scalar Design Systemscalar/scalar16k—~2.7kAutomated safety check: PassMIT
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar5.7k1 repos~1.1kAutomated safety check: PassMIT
Color Auditrome-os/rome717—~2.7kAutomated safety check: PassMIT
Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill130—~3kAutomated safety check: PassMIT

Similar skills

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Scalar Design System

    scalar/scalar

    Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.

    16k GitHub stars~2.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • UI/UX Design System Advisor

    Galaxy-Dawn/claude-scholar

    Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.

    5.7k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

  • Color Audit

    rome-os/rome

    Audit a design system's color palette against measurable color-science disciplines — WCAG/APCA contrast of declared token pairs, perceptual (OKLCH) ramp uniformity, color-blindness safety of…

    717 GitHub stars~2.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Material Design 3 UI/UX Guide

    skydashnet/material-design-3-ui-skill

    Guides designing, reviewing or implementing interfaces that follow Google's Material Design 3 system: semantic tokens, component states, adaptive layout and accessibility.

    130 GitHub stars~3k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

  • Tailwind CSS Patterns

    ever-works/ever-works

    Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.

    158 GitHub starsUsed in 3 repos~1.6k tokens
    Frontend & DesignAuto-check: notes

More from spencerpauly/awesome-cursor-skills

All 59 skills in this repo

  • Generating Images

    spencerpauly/awesome-cursor-skills

    Generate or edit images using the OpenAI Image API (gpt-image-2).

    841 GitHub stars~3.7k tokensUpdated 2 mo ago
    Auto-check: notes

  • Babysitting PR

    spencerpauly/awesome-cursor-skills

    Monitor a pull request for CI failures, review comments, and merge conflicts — then fix them automatically.

    841 GitHub stars~930 tokensUpdated 2 mo ago
    Auto-check passed

  • Best Of N Solving

    spencerpauly/awesome-cursor-skills

    Solve a hard problem by trying multiple approaches in parallel using isolated git worktrees.

    841 GitHub stars~698 tokensUpdated 2 mo ago
    Auto-check passed

  • Grinding Until Pass

    spencerpauly/awesome-cursor-skills

    Keep iterating on code changes until the tests pass, the build succeeds, or linting is clean.

    841 GitHub stars~796 tokensUpdated 2 mo ago
    Auto-check passed

  • Parallel CI Triage

    spencerpauly/awesome-cursor-skills

    When GitHub Actions fails, fetch failing job logs and assign each failing job to a separate subagent that fixes its slice of the problem in parallel.

    841 GitHub stars~793 tokensUpdated 2 mo ago
    Auto-check passed

  • Parallel Exploring

    spencerpauly/awesome-cursor-skills

    Explore a large codebase in parallel by launching multiple explore subagents that each investigate a different area simultaneously.

    841 GitHub stars~787 tokensUpdated 2 mo ago
    Auto-check: notes

Categories

Questions about Using UI Stack

What does Using UI Stack do?

Enforce a configuration-driven design system when generating UI. Using UI Stack is an agent skill from spencerpauly/awesome-cursor-skills. Enforce a configuration-driven design system when generating UI.

When should I use Using UI Stack?

Using UI Stack fits situations like: tasks that involve Theming and dark mode; tasks that involve Design systems; tasks that involve Typography.

How do I install Using UI Stack in Claude Code?

Run `npx skills add spencerpauly/awesome-cursor-skills --skill using-ui-stack -a claude-code`. Or copy the skill folder (resources/using-ui-stack in spencerpauly/awesome-cursor-skills) into .claude/skills/using-ui-stack in your project. Claude Code loads it when a task matches its description.

How do I install Using UI Stack in Codex?

Run `npx skills add spencerpauly/awesome-cursor-skills --skill using-ui-stack -a codex`. Or copy the skill folder (resources/using-ui-stack in spencerpauly/awesome-cursor-skills) into .agents/skills/using-ui-stack in your project. Codex loads it when a task matches its description.

Can I use Using UI Stack in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add spencerpauly/awesome-cursor-skills --skill using-ui-stack -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/using-ui-stack, .gemini/skills/using-ui-stack, .github/skills/using-ui-stack and .opencode/skills/using-ui-stack in your project.

What does Using UI Stack need to run?

SKILL.md names no scripts, command-line tools or credentials: Using UI Stack is instructions for the agent only.

Does Using UI Stack access the network?

SKILL.md names 2 domains. As links in the text: ui-stack.dev and github.com. This is read from the text; nothing was executed.

Is Using UI Stack safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Using UI Stack use?

Using UI Stack is published under the CC0-1.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Using UI Stack use?

About 767 tokens (SKILL.md is roughly 3.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Using UI Stack?

Skills that share tags, products or a category with Using UI Stack: Impeccable (bestofjs/bestofjs, 3.1k stars), Scalar Design System (scalar/scalar, 16k stars), UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars) and Color Audit (rome-os/rome, 717 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Using UI Stack?

spencerpauly (a GitHub user) maintains it in spencerpauly/awesome-cursor-skills, which has 841 GitHub stars. The repository holds 59 skills in this directory. The repository was last updated on August 2, 2026.

Source: spencerpauly/awesome-cursor-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.