メニュー
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 職業分類に基づく
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.
| 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.