菜单
Styling for the build-capable SPA stacks (react-express, vue-fastapi): Tailwind CSS (+ shadcn/ui on React) themed per-run through CSS-variable design tokens. Invoke on these stacks to give each lab a distinctive, coherent, believable-product look that is different every run.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
This skill should be used when the user asks to query Logfire logs, inspect Logfire traces, fetch SQL trace data, get spans for a trace, inspect LLM spans, inspect tool calls, or check token usage from Logfire. Also use it to triage an ARENA spawn run — diagnose why a run failed, timed out, or took too long, get per-stage turns/cost/tokens, or compare a prod trace to a local one.
This skill should be used when the user asks to spawn or generate an ARENA lab from a spec, run a spec through the pipeline, run several specs in parallel, bring up / start up a generated lab's Docker container for inspection, or find and run a finished run's image.
Add a single supporting (non-vulnerable) feature to a working ARENA skeleton app — a catalog, detail page, profile, order history, cart, etc. Triggered when the prompt contains "add-supporting-feature", "ARENA supporting feature", or a Feature block whose vuln is "none". Builds a real, reachable, working page wired into the shared nav. No vulnerability, no solution writeup.
Add a single vulnerable feature to a working ARENA skeleton app. Triggered when the prompt contains "add-vuln-feature", "ARENA feature writer", or a Feature block. Implements the feature and writes a human-readable solution writeup. A usability judge then browser-drives the feature and an exploit verifier independently reproduces the vulnerability against the running lab.
Styling for the server-rendered / no-build stacks (php, vanilla-flask): a token-driven CSS sheet themed per-run by editing one `:root` variable block. Invoke on these stacks to give each lab a distinctive, coherent, believable look — different every run — without a build step.
Turn an ARENA plan into per-feature implementation contracts (feature_contracts.json) so feature authors can run in parallel without colliding. Triggered by "ARENA feature planner" / "plan-features". Writes feature_contracts.json only — no code or builds.
基于 SOC 职业分类
| name | design-tailwind-shadcn |
| description | Styling for the build-capable SPA stacks (react-express, vue-fastapi): Tailwind CSS (+ shadcn/ui on React) themed per-run through CSS-variable design tokens. Invoke on these stacks to give each lab a distinctive, coherent, believable-product look that is different every run. |
Applies to react-express and vue-fastapi — they have a real Node build, so
Tailwind (and, on React, the vendored shadcn/ui components) compile cleanly.
Goal: each generated lab should look like a real, polished product with a genuinely different look every run — not the same default blue, not the same layout, not generic AI slop.
Before writing any UI, pick one aesthetic direction and execute it with
intentionality. Bold maximalism and refined minimalism both win — the point is a
clear point-of-view, not intensity. Options (full token/font/texture recipes in
references/aesthetic-directions.md):
refined/luxury · brutally minimal · brutalist/raw · retro-futuristic · organic/natural · editorial/magazine · playful/toy · industrial/utilitarian · soft/pastel · art-deco/geometric · glassmorphism · claymorphism · dark academia · memphis/80s-pop · signal (deep-navy & gold)
Decide up front: light or dark, the dominant color + one sharp accent, the radius scale, and a font pairing (display + body). Then translate those decisions into the token block.
Never converge on the same choices across generations. Vary light/dark, fonts, and direction every run. The fastest way to make labs feel distinct is to change the direction, not just the hue.
index.css (React)
/ style.css (Vue) import Tailwind and define the token block.src/components/ui/ and a cn()
helper: button, card, input(+Label), badge, table, alert,
select, textarea, separator, skeleton, avatar, tabs, dialog.
Build UI from these primitives; add any others (checkbox, dropdown-menu,
tooltip, …) by hand in the same pattern — see
references/adding-shadcn-components.md.class-variance-authority, clsx, tailwind-merge,
lucide-react. The build runs npm install only — no network, so
npx shadcn add is unavailable; vendor new components by hand.Edit only the :root { … } token block in the frontend's CSS. Every
component reads these, so one edit re-skins the whole app. Tokens are H S% L%
triplets (consumed via hsl(var(--token))):
--font-sans: … /* a display/serif stack changes the feel most */
--radius: 0.6rem; /* 0 = sharp/brutalist, 1.5rem = soft/friendly */
--background --foreground --card --card-foreground
--primary --primary-foreground /* brand / CTA */
--secondary --accent --muted --muted-foreground /* React only */
--destructive --destructive-foreground
--border --input --ring
Vue's token set is smaller (no
--secondary/--accentin its Tailwind config). On Vue stick toprimary,background,foreground,card,muted,destructive,border,ring.
Also set the product BRAND constant in App.jsx / App.vue to an invented,
domain-appropriate name (not the spec's lab id).
Allowed creative edits, beyond the colors: a single web-font @import at the
top of the CSS file + an optional --font-display token; a .dark token block
for dark mode (React); and optional decorative tokens like --app-bg referenced
once on the app shell (see references/layout-recipes.md). Reach for atmosphere
(gradient mesh, grain, grid pattern, dramatic/offset shadows) instead of flat
fills.
Same data, different shape. Pick different hero/header, card-grid-vs-list,
stat-tile, form, and nav-shell treatments per run — copy-pasteable JSX in
references/layout-recipes.md. Do one orchestrated staggered page-load
reveal rather than scattered micro-interactions, plus a couple of tasteful hover
states.
Real photos make a lab read like a product. lucide-react covers icons; for
content-matched photos — product catalogs, article covers, profile/team
faces — invoke the arena-spawner:stock-images skill, which builds keyword-
matched, browser-loaded image URLs seeded by row id (so a coffee catalog shows
coffee, not random scenery). Plain picsum.photos/i.pravatar.cc seeds are for
subject-agnostic filler or avatars only; feed an avatar URL into the vendored
Avatar/AvatarImage with an AvatarFallback. Always set width/height (or an
aspect-[…] class) so layout doesn't shift, and a real alt — imagery layered
over the token-colored atmosphere, not decorative noise.
Decorative shapes must never block clicks. Squiggles, blobs, dots, zigzags,
confetti, gradient orbs — any purely-decorative absolutely-positioned element —
MUST carry both pointer-events-none and aria-hidden. An absolute shape with
a negative offset (e.g. -top-6) overflows its box and silently sits on top of
the nav or buttons beneath it, swallowing their clicks (a real, hard-to-spot bug).
Keep them behind content (-z-10 or a low z-) and non-interactive.
A nudge, not a cage — combine with a direction above:
--primary,
larger --radius, a display/serif headline.--primary, small --radius, clean sans.--primary is not the default blue (222 89% 45%).bg-primary, text-muted-foreground, border, rounded-lg); referencing a
token via style={{ background: 'var(--app-bg)' }} is fine, a literal hex is
not.style= colors.npx shadcn add — extend the vendored components by hand in the same
pattern (references/adding-shadcn-components.md).