melvynx/use-style

Load and apply a named style before designing or implementing any UI.

Invocation

• Explicit: $use-style grid, /usestyle split-auth, /usestyle list, or "use the grid style"
• Implicit: user references /aiblueprint, /agents, /aibuilder, "grid theme", Vercel, Geist, a minimalist dark tool UI, Stripe / fintech / checkout / dashboard UI, Linear / issue tracker / app-shell sidebar UI, NYT / newspaper / editorial / broadsheet / magazine layouts, Anthropic / Claude / warm cream AI-lab pages, Gumroad / neo-brutalist / loud commerce / bold yellow-pink pages, Raycast / glossy dark / glow gradients / floating glass nav / premium product marketing, or Dusk / Attio / dark CRM dashboard floating on a twilight backdrop / blue data viz / colorful category pills

Parse the style name from $ARGUMENTS or the message. Treat split-auth, signin 2pages, signin-2pages, sign-in 2 pages, auth split, and two-column auth as split-auth. Treat list, styles, available styles, and missing style names with no implicit match as a request to list available styles and ask the user to choose before designing. Default to grid for Codelynx product landings. Default to vercel-simple when the user references Vercel, Geist, or minimalist dark developer tools. Default to linear when the user references Linear, an issue tracker, or a dense sidebar + list + detail app shell. Default to new-york-times when the user references a newspaper, broadsheet, magazine, or serif editorial layout. Default to anthropic when the user references Anthropic, Claude, or a warm cream + serif AI-lab aesthetic. Default to gumroad when the user references Gumroad, neo-brutalism, hard offset shadows, or a loud yellow/pink bordered look. Default to raycast when the user references Raycast, a glossy dark page with glow gradients, a floating glass nav, or premium dark product marketing. Default to dusk when the user references Attio, a dark CRM/data dashboard floating on a twilight/aurora backdrop, vivid-blue charts, or colorful category pills. Default to split-auth when the user asks for a polished login, sign-in, signup, OAuth, magic-code, or password-reset page with a two-panel visual layout.

If the parsed style is list, or if no style can be inferred, do not load a style file. Reply with the available styles table below, add one short line asking which style to use, and stop until the user chooses.

Workflow

1. Read styles/<name>.md from this skill directory.
2. Check for project overrides and prefer them over the portable spec:
   • .agents/styles/<name>.md
   • .agents/styles/<name>-theme.md
   • .agents/styles/<name>-theme-migration.md (migration playbooks only)
3. Treat the loaded style as hard constraints for layout, typography, color, borders, motion, and component choice.
4. Reuse existing primitives. In Codelynx repos, import GridTheme* components from grid-theme-primitives.tsx instead of reinventing patterns.

Available styles

| Style | File | Vibe | |-------|------|------| | grid | styles/grid.md | Blueprint landing. Square geometry, 1px borders, mono data, condensed display type. | | vercel-simple | styles/vercel-simple.md | Vercel dark mode. Black canvas, Geist + mono, 1px #333 borders, minimal accent. | | stripe | styles/stripe.md | Stripe fintech UI. Pale #f6f9fc canvas, white cards on soft shadows, blurple #635BFF accent, green CTA, rounded geometry. | | linear | styles/linear.md | Linear app shell. Near-black #08090a canvas, dense aligned sidebar + list + detail panes, indigo #5e6ad2 accent, Inter Display headings, quiet line-defined chrome. | | new-york-times | styles/new-york-times.md | Print-newspaper editorial. Paper-white, serif headlines (Cheltenham/Georgia), Franklin sans kickers, blackletter masthead, hairline rules, multi-column grid, red/blue accents only. | | anthropic | styles/anthropic.md | Warm AI-lab. Cream #f0efe9 paper, bold grotesque sans display + reading serif, clay-coral #cc785c accent, big soft-rounded dark panels, pill buttons. Light marketing + dark Claude app surfaces. | | gumroad | styles/gumroad.md | Loud neo-brutalist commerce. Yellow #ffc900 + pink #ff90e8, thick black borders, hard offset shadows 4px 4px 0 #000, flat fills, bold geometric sans, pill buttons. Light marketplace + dark dashboard surfaces. | | raycast | styles/raycast.md | Glossy dark product marketing. Near-black #0a0a0a + red #ff6363 glow, floating glass nav (backdrop-blur), oversized bold pricing, large-radius rounded-3xl cards, soft glow over hard shadows. | | dusk | styles/dusk.md | Refined dark data app (Attio-style). Rounded near-black window floating on a twilight gradient backdrop, vivid sky-blue #38bdf8 charts, #3b6eff primary, colorful category pills, Inter + mono numbers. | | split-auth | styles/split-auth.md | Two-column auth and OAuth pages. Left visual brand panel with optimized bitmap background, right clean form panel, monochrome social buttons, compact code inputs. |

Add new styles as styles/<name>.md and register them here.

Output rules

• Match the style vibe precisely. Do not blend with generic SaaS aesthetics.
• Honor the anti-patterns section in the style file.
• When a project spec lists concrete tokens or components, use those over prose approximations.
• For landing pages, scaffold the page shell from the style first, then fill sections.

Related skills

• frontend-design / frontend-skill: general UI craft. Defer to use-style when a named style is requested.
• impeccable: polish pass after the style is applied.