Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →tryghost/Shade dropdown surface contract
DropdownMenu, Select, and Popover share one visual recipe (bg-surface-elevated-2 + border-border/60 dark:border-border/30 + shadow-md). Change them together.
Passed 22 of 23 test cases with the skill, and 4 of 23 without it.
and 26 more in the full report
18 fixed4 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 18 test cases the skill fixed. Same model, same prompt, with and without the skill.
I am designing a table in Shade UI and need to style the row hover background. What interactive token should be applied to `<tr>` elements on hover?
| Checked | Without skill | With skill |
|---|---|---|
| Mentions --table-row-hover for table row hover states. | Missed | Passed |
| Does not require floating menu container shadow or border rules on table rows. | Passed | Passed |
The instructions your model reads when the skill loads.
DropdownMenu, Select, and Popover are the three Radix-backed floating menus that Filters and the rest of admin use. They share one visual recipe:
bg-surface-elevated-2
border border-border/60 dark:border-border/30
shadow-md
Treat them as one component for any surface decision. If you change the surface for one, change all three.
Floating menus open ON TOP of an already-elevated surface (sidebars, cards, top bars). They need to read as floating above their trigger. --surface-elevated-2 is reserved for exactly this — popovers, dropdown content, and the sidebar user menu.
In light mode the three surface tokens (background / surface-elevated / surface-elevated-2) flatten to near-white; the border + shadow-md carry elevation. In dark mode they're three distinct colours so layered surfaces stay legible without relying on borders alone.
| Concern | Class |
|---|---|
| Background | bg-surface-elevated-2 |
| Border | border border-border/60 dark:border-border/30 |
| Shadow | shadow-md baseline. DropdownMenuContent is the exception — it uses shadow-lg. DropdownMenuSubContent, SelectContent, and PopoverContent all use shadow-md. |
| Radius | rounded-md (component default) |
| Animation | Standard Radix data-[state=open]: enter/exit set |
The shadow split is intentional: the top-level DropdownMenuContent opens straight out of an unelevated trigger (a button on the page canvas) and needs the stronger drop. DropdownMenuSubContent already pops from inside a floating menu, so it uses the lighter shadow-md to avoid double-stacking elevation. Select and Popover also open from low-elevation triggers but their content sits closer to the trigger surface, so shadow-md is enough.
The dark:border-border/30 is a legitimate exception to the no-dark:-for-colour rule — it's an opacity modifier on an existing semantic token. See shade-no-dark-variants.
If a design change touches the floating-menu surface (background, border, shadow, elevation), edit all three files:
apps/shade/src/components/ui/dropdown-menu.tsx (DropdownMenuContent and DropdownMenuSubContent)apps/shade/src/components/ui/select.tsx (SelectContent)apps/shade/src/components/ui/popover.tsx (PopoverContent)test cases passed, vs 4 / 23 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.