ashby-ui-skillslisted
Install: claude install-skill goharabbas321/zeoel-framework
# Ashby UI Skills
Opinionated constraints for building Ashby-style interfaces with AI agents.
## When to Apply
Reference these guidelines when:
- Building dark-mode interfaces
- Creating Ashby-inspired design systems
- Implementing UIs with Inter font and 4px grid
## Colors
- MUST use dark backgrounds (lightness < 20) for primary surfaces - detected lightness: 9
- MUST use `#0E1122` 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` | #0E1122 | rgb(14,17,34) | Page background |
| `surface-raised` | #FEFEFE | rgb(254,254,254) | Cards, modals, raised surfaces |
| `text-primary` | #D6D9DD | rgb(214,217,221) | Headings, body text |
| `text-secondary` | #34384D | rgb(52,56,77) | Secondary, muted text |
| `text-tertiary` | #797979 | rgb(121,121,121) | Additional text |
| `border-default` | #818288 | rgb(129,130,136) | Subtle borders, dividers |
## Typography
- MUST use `Inter` as primary font family
- SHOULD use single font family for consistency
- MUST use `28px` / `700` for primary headings
- MUST use `24px` / `semi_bold` for body text
- SHOULD reduce font weights (currently 4 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 Sty