Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →tryghost/Shade inputSurface recipe
Use the inputSurface() recipe for form-control chrome (border, background, radius, focus ring, invalid state) — don't roll your own.
Passed 24 of 24 test cases with the skill, and 11 of 24 without it.
and 13 more in the full report
13 fixed11 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 13 test cases the skill fixed. Same model, same prompt, with and without the skill.
For a search filter bar container that encloses a text field and tag chips, we want the outer border and focus outline to trigger whenever the nested text field gets focus. Which mode parameter should be passed to the surface helper?
| Checked | Without skill | With skill |
|---|---|---|
| Recommends inputSurface('within') for the search filter container. | Missed | Passed |
The instructions your model reads when the skill loads.
inputSurface recipeForm controls share one visual rule: border, background, radius, transition, focus ring, invalid state. That rule lives in inputSurface (apps/shade/src/components/ui/input-surface.ts) and is used by Input, Textarea, InputGroup, and the Select trigger. Don't duplicate the chrome — compose the recipe.
import {inputSurface, inputSurfaceClasses} from '@/components/ui/input-surface';
import {cn} from '@/lib/utils';
inputSurface('self') — directly on the focusable elementUse on <input>, <textarea>, or any element that itself receives focus.
<input
className={cn(
inputSurface('self'),
'flex h-9 w-full px-3 py-1 text-control placeholder:text-muted-foreground',
className
)}
{...props}
/>
Covers: base chrome + focus-visible: ring + aria-[invalid=true] styling + disabled: opacity.
inputSurface('within') — on a wrapper containing a focusable childUse when the styled element is the wrapper (e.g. InputGroup) and focus state should react to any focusable descendant via :has().
<div className={cn(
inputSurface('within'),
'flex h-9 items-center gap-2 px-3',
className
)}>
<Icon />
<input className="bg-transparent outline-hidden focus:outline-hidden" />
test cases passed, vs 11 / 24 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.