Skip to content
Back to skills

Use Style

ASecurity

Apply named visual style guides to landing pages, app shells, and UI. Use for $use-style, /useskill, list styles, or styles like ios-app, grid, vercel, black-grid, stripe, linear, raycast, gumroad, dusk, or luma.

  • 3 stars
  • 0 votes
  • 0 copies
  • 4 views
  • Added September 5, 2026
developmentshell

Security analysis

A100/100

Pro scans all 20 files and shows the line behind each finding

Scanned September 22, 2026

npx -y skills add twikus/claude-configuration --skill use-style --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Use Style?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Use Style
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/twikus-use-style/badge)](https://www.skillsdirectory.com/skills/twikus-use-style)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: use-style
description: Apply named visual style guides to landing pages, app shells, and UI. Use for $use-style, /useskill, list styles, or styles like ios-app, grid, vercel, black-grid, stripe, linear, raycast, gumroad, dusk, or luma.
disable-model-invocation: true
user-invocable: true
---

Load a named style before designing or implementing UI. Parse the name from `$ARGUMENTS` or the message. Aliases: `ios`/`iphone`/`nowstack-mobile`/`ink & spark` → `ios-app`; `use-vercel`/`geist` → `vercel`; `old vercel`/`black grid` → `black-grid`; `testsprite`/`test sprite` → `testspirite`; `lu.ma`/`luma.com` → `luma`; `super simple`/`SUPER_SIMPLE` → `super-simple`.

Defaults: NowStack / Expo / NativeWind → `ios-app`. Codelynx product landings → `grid`. Vercel / Geist infrastructure marketing → `vercel`. Austere monochrome tools → `black-grid`. Linear / issue tracker shell → `linear`. Newspaper / magazine → `new-york-times`. Anthropic / Claude cream lab → `anthropic`. Neo-brutalist yellow/pink → `gumroad`. Glossy dark glow marketing → `raycast`. Attio twilight CRM → `dusk`. TestSprite paper dashboard → `testspirite`. Luma / events / RSVP → `luma`.

If the name is `list` or nothing matches, list the styles in `styles/` and stop until the user chooses.

1. Read `styles/<name>.md` from this skill directory.
2. Prefer project overrides: `.agents/styles/<name>.md`, `<name>-theme.md`, `<name>-theme-migration.md`.
3. Treat the loaded style as hard constraints. Reuse existing primitives (Codelynx: `GridTheme*` from `grid-theme-primitives.tsx`).

Match the vibe exactly. Honor the style file's anti-patterns. Scaffold the shell first on landing pages. `impeccable` is the polish pass after the style is applied.

Files in this skill

  • SKILL.md8.3 KB
  • agents/openai.yaml327 B
  • assets/codex-icon.svg691 B
  • examples/anthropic.html23.6 KB
  • examples/dusk.html22.4 KB
  • examples/gumroad.html22.6 KB
  • examples/linear.html23.1 KB
  • examples/luma.html11.7 KB
  • examples/new-york-times.html24.7 KB
  • examples/raycast.html23.6 KB
  • examples/stripe.html22.4 KB
  • examples/testspirite.html20.5 KB
  • examples/vercel.html21.8 KB
  • styles/anthropic.md9.6 KB
  • styles/black-grid.md10.3 KB
  • styles/dusk.md10.5 KB
  • styles/grid.md10.8 KB
  • styles/gumroad.md9.9 KB
  • styles/ios-app.md12.3 KB
  • styles/linear.md13.5 KB

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…