Shortcut UI Skills

What it does

Provides a compact, opinionated design system for agents tasked with generating or refining UI code and design tokens. The skill codifies colors, semantic tokens, typography rules, spacing and border scales, accessibility requirements, and component interaction rules so agents can produce consistent Shortcut-style interfaces.

When to use it

Use when generating frontend components, producing CSS/Tailwind tokens, or when an agent must enforce a strict design language (light-mode, Inter font, 4px grid). Also useful during design-to-code flows where consistent spacing, focus states, and typography matter.

What's included

• Scripts: none bundled (has_scripts=false)
• References: includes metadata.json alongside the SKILL.md (has_references=false as reported)
• Instructions: detailed tokens and rules: required color tokens, typography sizes/weights, spacing scale, border radii, accessibility focus/hover/disabled behaviors, and guidance on animation and performance. The document lists recommended CSS values and component patterns.

Compatible agents

Best for agents that produce UI code or design assets (Cursor, Claude Code, Copilot/Codex-style code models, or any agent that can output Tailwind/CSS).