shortcut-ui-skillslisted

# Shortcut UI Skills Opinionated constraints for building Shortcut-style interfaces with AI agents. ## When to Apply Reference these guidelines when: - Building light-mode interfaces - Creating Shortcut-inspired design systems - Implementing UIs with Inter font and 4px grid ## Colors - SHOULD use light backgrounds for primary surfaces - MUST use `#FFFFFF` as page background (`surface-base`) - MUST use `#3831BF` for primary actions and focus states (`accent`) - SHOULD reduce color palette (currently 26 colors detected) - MUST maintain text contrast ratio of at least 4.5:1 for accessibility ### Semantic Tokens | Token | HEX | RGB | Usage | |-------|-----|-----|-------| | `surface-base` | #FFFFFF | rgb(255,255,255) | Page background | | `surface-raised` | #EBECF0 | rgb(235,236,240) | Cards, modals, raised surfaces | | `surface-overlay` | #D7EAF5 | rgb(215,234,245) | Overlays, tooltips, dropdowns | | `text-primary` | #949494 | rgb(148,148,148) | Headings, body text | | `text-2` | #545454 | rgb(84,84,84) | Additional text | | `text-secondary` | #A0A1A6 | rgb(160,161,166) | Secondary, muted text | | `border-default` | #E3E0D5 | rgb(227,224,213) | Subtle borders, dividers | | `warning` | #523F1D | rgb(82,63,29) | Warning states, cautions | | `accent` | #3831BF | rgb(56,49,191) | Primary actions, links, focus | ## Typography - MUST use `Inter` as primary font family - SHOULD use single font family for consistency - MUST use `50px` / `700` for primary headings - MUST use `21p