anthropic-ui-skillslisted

# Anthropic UI Skills Opinionated constraints for building Anthropic-style interfaces with AI agents. ## When to Apply Reference these guidelines when: - Building light-mode interfaces - Creating Anthropic-inspired design systems - Implementing UIs with Inter font and 4px grid ## Colors - SHOULD use light backgrounds for primary surfaces - MUST use `#ECE9E0` as page background (`surface-base`) - SHOULD limit color palette to 8 distinct colors - MUST maintain text contrast ratio of at least 4.5:1 for accessibility ### Semantic Tokens | Token | HEX | RGB | Usage | |-------|-----|-----|-------| | `surface-base` | #ECE9E0 | rgb(236,233,224) | Page background | | `surface-raised` | #DBD1C0 | rgb(219,209,192) | Cards, modals, raised surfaces | | `surface-overlay` | #0F0F10 | rgb(15,15,16) | Overlays, tooltips, dropdowns | | `text-primary` | #625F59 | rgb(98,95,89) | Headings, body text | | `text-secondary` | #9F9F9C | rgb(159,159,156) | Secondary, muted text | | `text-tertiary` | #454036 | rgb(69,64,54) | Additional text | ## Typography - MUST use `Inter` as primary font family - SHOULD use single font family for consistency - MUST use `68px` / `700` for primary headings - MUST use `33px` / `semi_bold` for body text - SHOULD reduce font weights (currently 5 detected) - MUST use `text-balance` for headings and `text-pretty` for body text - SHOULD use `tabular-nums` for numeric data - NEVER modify letter-spacing unless explicitly requested ### Text Styles | Style | Font |