ingpoc/builder-design-system
builder-design-system/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add ingpoc/skills builder-design-systemInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 4, 2026, 9:25 AM144.9s6 files scanned
SKILL.md
- 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.
Autonomous Agent Builder — Design System Skill
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.
When to invoke
Use this skill when the user asks you to:
- Build a new page or surface in the agent-builder app
- Restyle an existing page to match the system
- Add or audit a primitive component
- Generate a new theme preset
- Validate that a screen conforms to the system
What's in this skill
| 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). |
Operating rules
- Never invent colors. Use
var(--*)tokens oroklch()with the system's hue/lightness scale. New accents must be one of the 9 hues inthemes.json. - Never invent statuses. Every state-bearing UI must use a status string from
status-language.mdand theStatusPill/StatusDotprimitives. - Always use the primitives in
components.mdfor 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 rightdata-*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 respectprefers-reduced-motionandclearProps: "all". - Page intros follow the pattern in
patterns.md— Eyebrow + display heading + 60ch lede paragraph + content. No exceptions on top-level pages. - Status pills are read-only. Don't make them buttons or links — they describe state, they don't change it.
- Density is a multiplier, not a category. Read
--densityand multiply paddings/heights inside primitives. Don't fork primitives per density. - Dark mode is data-driven. Set
data-theme="dark"on<html>— never hard-code dark hex values in components. - Information architecture beats paint. The reference system's main value is how it makes Builder objects legible: tasks, runs, approvals, traces, memories, docs, costs, and decisions. Do not stop at matching colors, cards, or typography if the page still hides the operational object in the wrong place.
- Theme configuration is a product surface. Preserve the reference
tweaks.jsxmodel: 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.
Standard workflow
When asked to build or modify a page in the codebase:
- Read the locked system. Open
tokens.css,components.md,patterns.md. Don't guess. - Identify the page archetype and owning object. Most pages are one of:
- List + detail (Board, Backlog, Inbox): scan many records; selected detail stays secondary.
- Agent chat + run trace (Agent): operator chat/voice is one mode; task/run evidence is a separate mode centered on one run.
- Dashboard (Metrics, Observability): health bands first, then trace/event/history drill-down.
- Reference (Knowledge, Memory): durable records with readable detail, not raw dumps.
- Wrap in the standard page intro (Eyebrow + heading + lede).
- Compose with primitives — never
<div>a button, never bare-color a status. - Wire status strings to the lookup in
status-language.md. - Audit before finishing — run the checklist at the bottom of
patterns.md.
Builder product IA rules
Apply these before page-level styling:
- Agent is two modes. Use
Agent chatfor operator-to-Builder-Agent text and realtime voice. UseRun tracefor task/run inspection: prompt, thinking, tool calls, tool args/results, gates, approvals, logs, diffs, cost, runtime, model, duration, and stop reason. - Voice is transport, not a route. Voice controls live in Agent chat and voice preferences live in Settings. Voice utterances may mirror into Run trace only when they affect run evidence.
- Board is the work horizon. Board cards and drawers summarize task ownership, current state, and run list. Detailed thinking/tool/gate inspection belongs in Agent Run trace. Add an "Open in Agent Run trace" path rather than duplicating the full run viewer in the Board drawer.
- Settings are operator preferences first. Prefer this order: Voice & Realtime, Agent surface, Board & layout, Runtime, Appearance/design tokens. Do not lead with token controls when the user is configuring how to operate Builder.
- Design configuration remains rich. If the app has both a design-system drawer and a Settings page, keep the drawer focused on live theme/preset/advanced preview controls and keep the Settings page focused on durable operator preferences. The Settings page may mirror appearance state, but it should not lose the full configurable theme editor.
- Compare and Observability stay evidence-first. Compare should use real AgentRun records and highlight baseline vs variant outcomes. Observability should show health bands, trace waterfall/spans, SDK events, and run history with dense readable drill-down.
- Knowledge and Memory are reference records. Use filter/list plus persistent editorial detail. Long-form content must render through
EditorialContent; never expose final prose as rawpretext.
Theme application
The configurable design system is modeled by the reference src/tweaks.jsx. It is a live operator control, not just internal CSS:
- Theme presets bundle
id,name,tagline,hue,density,radius,mode,fontDisplay, andfontUi. - Picking a preset updates all knobs at once and shows a compact preview tile.
- Advanced/custom mode may override
hue,accent chroma,density,radius,mode, and display face independently. - Persist preferences in one runtime-preference object. Use
nullfor "follow preset" overrides so reset is deterministic. - Apply theme state by setting CSS variables and root attributes/classes; do not branch component styles by theme id.
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.
Generating a new component
If you must add a new primitive (rare):
- Confirm an existing primitive doesn't already cover it.
- Use only
var(--*)tokens for color, spacing, radius, shadow. - Honor
--densityfor any vertical padding or height. - Honor
data-theme="dark"automatically by using semantic tokens (--fg,--bg,--surface,--line) — never raw hex. - Add it to
components.mdwith its API contract before merging.
Done criteria
A page or component is done when:
- All colors come from tokens
- All statuses come from
status-language.md(and memory types from the memory-type tones table) - All shells, buttons, pills, tabs, dots come from primitives
- All long-form markdown renders through
EditorialContent - All list rows on knowledge surfaces use
KnowledgeCard; all drawers useMemorySidebar/RelatedSidebar - The page renders correctly in all 6 themes (light + dark)
- The page has a proper intro block
- The page declares the correct motion hooks (see
patterns.md→ Motion choreography) and respectsprefers-reduced-motion - No raw hex codes in the diff (search the diff for
#[0-9a-f]{3,8}— should be empty) --densityis respected on any custom height/padding
Out of scope
- Backend / SDK changes
- Routing changes
- New nav entries (those are owned by
App.tsxand 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.
Related Skills
ingpoc/cloudflare-deploy
devops
VerifiedTrustedCommunity
Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.
7SKILL.mdUpdated Jun 4, 2026
ingpoc/cli-for-agents
tools
VerifiedTrustedCommunity
Design or review CLIs so both coding agents and humans can use them reliably: dual-audience output, non-interactive paths, layered help, machine-readable data, predictable flags, safe mutations, and actionable errors. Use when building a CLI, adding commands, writing --help, or when the user mentions agents, terminals, automation-friendly CLIs, JSON output, or headless usage.
7SKILL.mdUpdated Jun 4, 2026
ingpoc/cli-creator
tools
VerifiedTrustedCommunity
Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read/write commands, return stable JSON, manage auth, and pair with a companion skill.
7SKILL.mdUpdated Jun 4, 2026
ingpoc/claude-glm-agent
development
VerifiedTrustedCommunity
Use when configuring apps to use z.ai GLM 4.7 proxy instead of standard Anthropic API. Works with any frontend (Next.js, Vite) or backend (Python, Node.js) framework.
7SKILL.mdUpdated Jun 4, 2026