Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →tryghost/Shade tokens, not hex
Use Shade semantic tokens (bg-background, text-foreground, border-border-default, bg-surface-elevated) — never hex, hsl(), or bg-gray-200-style raw palette utilities for UI chrome.
Passed 24 of 24 test cases with the skill, and 8 of 24 without it.
and 24 more in the full report
16 fixed8 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 16 test cases the skill fixed. Same model, same prompt, with and without the skill.
A developer is creating a select dropdown trigger element and applied border-border-default. In Ghost's Shade design system, which border token class is required for form-control elements like dropdown triggers, textareas, and outline buttons?
| Checked | Without skill | With skill |
|---|---|---|
| The response specifies border-control-border for the select dropdown trigger. | Missed | Passed |
The instructions your model reads when the skill loads.
Drive every UI colour/border/surface through semantic tokens. They flip in dark mode automatically. Hardcoded hex, hsl(...), or raw palette utilities (bg-gray-200, text-zinc-500) break dark mode and theming.
| Concern | Semantic token (Tailwind) | CSS var |
|---|---|---|
| Page canvas | bg-background | --background |
| One step above page | bg-surface-elevated | --surface-elevated |
| Floating menu on top of elevated | bg-surface-elevated-2 | --surface-elevated-2 |
| Primary text | text-foreground / text-primary | --text-primary |
| Secondary / muted text | text-muted-foreground | --text-secondary |
| Default border (cards, banners, dividers — opaque) | border-border-default | --border-default |
Compositing border for floating surfaces (popover, dropdown, select — translucent in dark mode, usually with an opacity modifier like /60 or /30) | border-border | --border |
| Form-control border (inputs, selects, outline buttons) | border-control-border | --control-border |
| Hover (generic) | bg-interactive-hover | --interactive-hover |
| Outline button hover | bg-button-hover | --button-hover |
| Tabs / page menu hover/active | bg-tab-hover, bg-tab-active | --tab-hover, --tab-active |
| Table row hover | bg-table-row-hover | --table-row-hover |
| Destructive | bg-destructive, text-destructive | --destructive |
| Focus ring | ring-focus-ring, border-focus-ring | --focus-ring |
Full inventory: apps/shade/theme-variables.css — this is where the CSS custom property values live, including the .dark { ... } overrides. The companion file apps/shade/tailwind.theme.css is the Tailwind v4 @theme block that maps Tailwind utility names (bg-foreground, text-muted-foreground, etc.) to the variables defined in theme-variables.css, plus the raw --color-* scale. Edit theme-variables.css to change a token's value; edit tailwind.theme.css to wire a new utility name or add a raw colour.
--background → body, app shell, editor.--surface-elevated → sidebars, cards, top bars, sticky headers.--surface-elevated-2 → floating menus (DropdownMenu, Select, Popover) and the sidebar user menu.In light mode these all flatten to near-white; borders/shadows carry the elevation. In dark mode they're three distinct colours.
Hover, active, and selected states are their own tokens — don't reach for raw greys or apply /30 opacity modifiers ad-hoc.
| Token | Use for |
|---|---|
--interactive-hover | Generic hover: dropdown items, menu items, list rows, filter options |
test cases passed, vs 8 / 24 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.