菜单
Apply the Autonomous Agent Builder design system to the autonomous-agent-builder codebase. Use when building or restyling Builder dashboard pages, adding or auditing primitive components, generating theme presets, wiring status language, motion hooks, or validating a screen against the locked Builder design system.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Create premium Accenture-branded PowerPoint presentations following Tufte data visualization principles and Dieter Rams design philosophy. Use when creating slides, presentations, or decks for Accenture corporate settings that require (1) Accenture brand identity (purple A100FF chevron logo clean layouts) (2) Minimal data-focused design (Tufte less but better) (3) Executive-ready aesthetics for boardroom presentations client pitches or internal reports
Route proposed additions to the global Codex control plane by deciding whether a request belongs in `~/.codex/AGENTS.md`, a global workflow or reference doc under `~/.codex/docs`, `~/.codex/bin/workflow.py`, or an enforceable non-prose surface. Use when asked to "add this to global AGENTS", "promote this workflow to global", "add a new global trigger", or decide whether something should be a trigger, workflow, reference, hook, lint rule, or runtime guard.
Add, remove, serve, test, and operate a server-backed in-page agent feedback capability for HTML artifacts, static pages, or local app builds. Use when the user wants Browser-style annotation inside the artifact/app itself, marker-local chat, comment-triggered agent work, queued marker processing, deterministic install/remove scripts, preflight/closeout checks, browser acceptance evidence, or progressive-disclosure access to marker context.
Audits any agent harness codebase against 13 meta-principles of quality, scores each 0 to 10 with code citations, generates a self-contained HTML report for operators, and writes an agent-readable AGENTS.md improvement directive with file-level architecture recommendations to reach 9.5 or better. Use when the user wants to audit or rate an agent harness, evaluate harness quality, score an agent framework, get a roadmap for improving a harness, run agentharness-audit, audit this harness, rate Hermes, audit Codex, or audit a Claude Code harness. Not for individual skill audits or general code review.
Use when controlling ChatGPT Atlas through Codex Computer Use, especially browser tasks where context efficiency matters: fewer screenshots, fewer UI snapshots, fewer clicks, and cleaner browser state.
Audit project against golden principles, produce scorecard. Use for /audit, "check project quality". NOT for system setup health (/harness-audit) or eval scoring (/eval-score).
| name | builder-design-system |
| description | Apply the Autonomous Agent Builder design system to the autonomous-agent-builder codebase. Use when building or restyling Builder dashboard pages, adding or auditing primitive components, generating theme presets, wiring status language, motion hooks, or validating a screen against the locked Builder design system. |
You are applying the Autonomous Agent Builder design system v0.5 to the autonomous-agent-builder codebase. This skill bundles the locked tokens, themes, primitive APIs, page patterns, and status language into a deterministic playbook.
Use this skill when the user asks you to:
| File | Use |
|---|---|
tokens.css | Single source of truth for color, type, spacing, radii, shadows, status colors. Drop into frontend/src/index.css or import alongside it. |
themes.json | Six locked theme presets — calm, operator, sage, ember, midnight, paper. Each declares hue, density, radius, mode. |
components.md | Primitive component API contracts — core (StatusPill, Surface, Eyebrow, Tabs, Button, StatusDot, Code, Kbd, Meter, Stat, Input, BrandMark) + editorial (EditorialContent, KnowledgeCard, KnowledgeEditorialSummary, MemorySidebar, RelatedSidebar, TagCloud, EmptyState, SectionLabel). |
patterns.md | Page-level patterns — page intro, three-column chrome, condense-on-scroll, configurable design-system drawer, Settings page hierarchy, command palette, status pill rules, Motion choreography (GSAP) with named recipes and data-* hooks. |
status-language.md | Status taxonomy + tone mapping, plus the memory-type tones (decision / pattern / correction). |
var(--*) tokens or oklch() with the system's hue/lightness scale. New accents must be one of the 9 hues in themes.json.status-language.md and the StatusPill / StatusDot primitives.components.md for buttons, surfaces, tabs, dots, pills, eyebrows, code, kbd, editorial blocks, knowledge cards, tag clouds, drawers, empty states, section labels. Never hand-roll equivalents.
3a. Motion is part of the contract. When building a List+Detail, Stream, or Dashboard page, attach the right data-* hooks (data-board-section, data-agent-stage, data-kpi, data-cost-bar, data-stagger) so the page picks up the system's choreography automatically. Every new tween must respect prefers-reduced-motion and clearProps: "all".patterns.md — Eyebrow + display heading + 60ch lede paragraph + content. No exceptions on top-level pages.--density and multiply paddings/heights inside primitives. Don't fork primitives per density.data-theme="dark" on <html> — never hard-code dark hex values in components.tweaks.jsx model: preset cards with mini previews, advanced controls for hue/chroma/density/radius/mode/display face, live CSS-variable updates, and a reset path back to presets. Do not replace it with a static theme picker.When asked to build or modify a page in the codebase:
tokens.css, components.md, patterns.md. Don't guess.<div> a button, never bare-color a status.status-language.md.patterns.md.Apply these before page-level styling:
Agent chat for operator-to-Builder-Agent text and realtime voice. Use Run trace for task/run inspection: prompt, thinking, tool calls, tool args/results, gates, approvals, logs, diffs, cost, runtime, model, duration, and stop reason.EditorialContent; never expose final prose as raw pre text.The configurable design system is modeled by the reference src/tweaks.jsx. It is a live operator control, not just internal CSS:
id, name, tagline, hue, density, radius, mode, fontDisplay, and fontUi.hue, accent chroma, density, radius, mode, and display face independently.null for "follow preset" overrides so reset is deterministic.At minimum the active theme writes:
:root {
--accent-hue: <hue>;
--accent-chroma: <chroma>;
--density: <density>;
--radius-base: <radius>px;
}
:root[data-theme="dark"] { /* dark token overrides */ }
All primitives derive every visual from these knobs + the static token base. To add a new theme: append to themes.json with a unique id, name, tagline, hue, density, radius, mode, and font metadata. Avoid adding per-page theme conditionals.
If you must add a new primitive (rare):
var(--*) tokens for color, spacing, radius, shadow.--density for any vertical padding or height.data-theme="dark" automatically by using semantic tokens (--fg, --bg, --surface, --line) — never raw hex.components.md with its API contract before merging.A page or component is done when:
status-language.md (and memory types from the memory-type tones table)EditorialContentKnowledgeCard; all drawers use MemorySidebar / RelatedSidebarpatterns.md → Motion choreography) and respects prefers-reduced-motion#[0-9a-f]{3,8} — should be empty)--density is respected on any custom height/paddingApp.tsx and require a product decision)If a user asks for one of the above, complete the design work and clearly call out the non-design changes for them to handle separately.