菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | design-token-css |
| description | 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. |
Applies to php and vanilla-flask — no build step, so styling is one shared
CSS sheet driven by CSS variables.
Goal: each lab should look like a real product with a genuinely different look every run — not the same default blue, not generic AI slop.
Pick one aesthetic direction and execute it with intentionality. Refined
minimalism and bold maximalism both win — what matters is a clear
point-of-view. Options (full hex 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 brand color + one sharp accent, the radius scale, and a font pairing (display + body). Then encode those decisions in the token block. Never converge on the same choices run to run.
public/app.css, linked from the single shared layout
render_page() in src/auth.php. Every page uses it.static_assets/style.css, linked from index.html.Both ship a canonical sheet whose component rules (nav, .card, .btn,
input, table, .alert) consume an AGENT THEME TOKENS :root block.
Edit only the :root { … } token block. The component rules stay fixed.
Tokens are hex/value based (not HSL):
--font-sans /* a serif/display stack changes the feel most */
--radius /* small = crisp, large = soft (0px..22px) */
--bg --surface --text --muted --border
--brand --brand-hover /* primary / nav / CTA */
--on-brand --on-brand-muted /* text ON the brand-colored nav */
Set the product brand name: the $brand arg to render_page() (php) or the
.brand text in index.html (vanilla) — invent a domain-fitting 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 (+ optional --font-display token used by a global heading
rule); a few extra tokens added to :root (e.g. --accent, --shadow,
--app-bg) referenced from global rules; and atmosphere (gradient-mesh
--app-bg, grain overlay) instead of a flat background — all in
references/aesthetic-directions.md and references/component-snippets.md.
Same data, different shape. references/component-snippets.md is a copy-paste
library of token-only building blocks — hero/header treatments, stat tiles, card
variations, list rows (vs tables), badges/pills, empty states, split auth
screens, and a one-shot staggered page-load reveal. Mix a different selection
each run so two labs with the same data don't look the same.
These stacks can't npm install an icon pack, but real photos make a lab feel
like a product — use both:
<svg> glyphs (a 20–24px viewBox,
fill="none" stroke="currentColor") directly into the markup; currentColor
tints them with the surrounding token color automatically. Use them in nav
items, buttons, and stat tiles.arena-spawner:stock-images skill.
For imagery that should depict its subject (product catalogs, article covers,
profile/team faces, venue shots), that skill builds keyword-matched, browser-
loaded image URLs seeded by row id — so a coffee catalog actually shows coffee.
(Plain picsum.photos/i.pravatar.cc seeds are fine only for subject-agnostic
filler or avatars.) Always give every <img> a real alt and fixed
width/height (or aspect-ratio) so layout doesn't jump while it loads.var(--brand), var(--accent)) so it re-skins with
the theme. Layer these behind/around the photos rather than replacing them.Pick imagery that fits the domain (a product grid shows products, profiles show faces) — not decorative noise.
A nudge, not a cage — combine with a direction above:
--brand is not the default blue (#1e40af).<style>
blocks; no inline hex. Inline style="…" is acceptable only when every
value references a token (var(--brand), var(--border)), never a literal
color. New reusable classes go in the shared sheet, never per page.render_page() — every page renders through it.pointer-events: none (and aria-hidden). An absolute
shape with a negative offset overflows its box and silently covers the nav or
buttons beneath it, swallowing their clicks — a real, hard-to-spot bug. Keep
decorations behind content (low/negative z-index) and non-interactive.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 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.
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.