--- name: rdc:design description: "Usage `rdc:design ` — RDC-owned design work for Studio, Palette Library, and token-aware UI systems. Use for Rampant color work or design-system-first builds owned by the design cell. Not for general UI polish — use impeccable for that." --- > **⚠️ OUTPUT CONTRACT (READ FIRST):** `guides/output-contract.md` > Checklist-only output. No tool-call narration. No raw MCP/JSON/log dumps. > One checklist upfront, updated in place, shown again at end with a 1-line verdict. > If dispatching subagents or running as a subagent: read `{PROJECT_ROOT}/.rdc/guides/agent-bootstrap.md` first (fallback: `{PROJECT_ROOT}/.rdc/guides/agent-bootstrap.md`). > **Sandbox contract:** This skill honors `RDC_TEST=1` per `guides/agent-bootstrap.md` § RDC_TEST Sandbox Contract. Destructive external calls, Supabase writes, git pushes, package publishes, and deploys are skipped under `RDC_TEST=1`. # rdc:design — RDC Design Skill RDC-owned design execution for Studio and LIFEAI interfaces. This skill is the Studio-aware design authority for RDC token, palette, theme, component, and local-debug work. ## When to Use - Studio, Palette Library, brand-token, theme, component, or live-editor work - Any design task that must understand RDC's real token tables and Studio routes - UI critique, audit, polish, colorize, type, layout, or craft work in `{PROJECT_ROOT}` - Agent-side color-system exploration using Rampa CLI - Preparing token-aware implementation instructions for frontend/backend/data agents ## Arguments - `rdc:design` — show the command menu - `rdc:design edit ` — start a local source-edit session for a URL, app, brand, route, or file - `rdc:design studio ` — Studio-aware design task - `rdc:design tokens ` — token model, resolver, export, or governance task - `rdc:design palette ` — Palette Library or palette generation task - `rdc:design theme ` — theme generation/application task - `rdc:design colorize ` — Rampa-assisted color-system work - `rdc:design audit ` — design quality audit - `rdc:design critique ` — UX/design critique - `rdc:design polish ` — final visual and interaction pass - `rdc:design craft ` — shape and build a token-aware UI feature ## Required References Load only what applies, but do not skip the Studio model for Studio/token/palette/theme work. | Task type | Required reference | |---|---| | Studio, tokens, palettes, themes, editor | `skills/design/reference/studio-model.md` | | Color generation, ramps, contrast, neutrals | `skills/design/reference/rampa.md` | | Ownership, operating boundary, attribution files | `skills/design/reference/ownership.md` | Project docs to read for Studio work: - `docs/systems/studio/ARCHITECTURE.md` - `apps/studio/CLAUDE.md` - `.claude/context/design-system-global.md` - affected route/component/source files ## Procedure 1. **Classify the task.** - `edit` means start a local source-edit session. Do not show the generic command menu for `edit`. - `studio`, `tokens`, `palette`, and `theme` always load the Studio model. - `palette`, `theme`, and `colorize` also load the Rampa reference. - Any task involving colors, palettes, ramps, contrast, neutrals, light/dark color pairs, status colors, chart colors, or theme colors loads the Rampa reference. - `audit`, `critique`, `polish`, and `craft` load Studio model when the target is inside Studio or uses Studio tokens. 2. **Read the actual system context.** - For Studio: read `docs/systems/studio/ARCHITECTURE.md` and `apps/studio/CLAUDE.md`. - For token work: read `.claude/context/design-system-global.md`. - For app UI work: read the app-specific `CLAUDE.md` if present. 3. **Find the source of truth before proposing changes.** - Tokens: Studio APIs, resolver files, and Supabase token tables. - Palette Library: Studio palette APIs and theme/palette model. - Live editor: RDC Native Local Debug only — `/editor/local/*`, `/api/editor/local-debug`, `/studio/debug/*`, `/studio/claude/*`, and `scripts/studio-debug-poll.mjs`. - Components: `@regen/ui`, Studio component registry, and existing local components. 4. **For `edit`, start the local session directly.** - Intent syntax: ```powershell rdc:design edit ``` - Required variables: - `target` - `brandSlug` - `appSlug` - `repoRoot` - `cwd` - `connectorBaseUrl` - `studioOrigin` - `modeDefault` - Fill missing variables from the obvious target mapping before asking: - `test`, `studio_test`, `studio-test` -> `--brand test --app studio_test` - `prt`, `prt-portal`, `prtrust.fund`, `dev.prtrust.fund` -> `--brand prt --app prt` - If the target is a file path and brand/app are not obvious, ask one concise question for the missing brand/app. Do not search broadly or show the generic command menu. - Canonical start call: ```powershell curl.exe -s -X POST "http://127.0.0.1:52437/studio/debug/start" ` -H "Content-Type: application/json" ` -d "{\"brandSlug\":\"\",\"appSlug\":\"\",\"repoRoot\":\"{PROJECT_ROOT}\",\"cwd\":\"{PROJECT_ROOT}\",\"modeDefault\":\"direct_edit\",\"startedBy\":\"claude-cli\"}" ``` - Expected successful response shape: ```json { "ok": true, "sessionId": "studio-...", "token": "...", "devUrl": "http://localhost:3006", "relayBaseUrl": "http://127.0.0.1:52437/studio/debug/studio-...", "claudeBaseUrl": "http://127.0.0.1:52437/studio/claude/studio-...", "pollCommand": "node scripts/studio-debug-poll.mjs --session ... --token ... --relay ..." } ``` - Construct the Studio attach URL exactly: ```txt http://localhost:3011/editor/local/?attach=1&sessionId=&token= ``` - Never send the user to `/editor/local/` without `attach=1&sessionId=...&token=...`. - Canonical poll call: ```powershell curl.exe -s "http://127.0.0.1:52437/studio/claude//poll?token=&timeout=600000" ``` - Canonical reply call: ```powershell curl.exe -s -X POST "http://127.0.0.1:52437/studio/claude//reply" ` -H "Content-Type: application/json" ` -d "{\"token\":\"\",\"eventId\":\"\",\"status\":\"done\",\"message\":\"Edited \",\"filesChanged\":[\"\"]}" ``` - Allowed terminal statuses are `done`, `error`, `blocked`, and `needs_reference`. - Convenience helper, equivalent to the canonical start call plus attach URL construction: ```powershell node scripts/studio-debug-start.mjs --target [--brand ] [--app ] [--mode direct_edit|variant_edit|reference_replace|note] [--studio-origin http://localhost:3011] [--connector http://127.0.0.1:52437] [--repo-root {PROJECT_ROOT}] [--cwd {PROJECT_ROOT}] [--dev-url ] [--dev-command ] [--no-launch] ``` - Helper output contract: ```txt STUDIO_URL=http://localhost:3011/editor/local/?attach=1&sessionId=...&token=... POLL_COMMAND=node scripts/studio-debug-poll.mjs --session ... --token ... --relay ... SESSION_FILE=.studio-debug/.json ``` - If using the helper, run: ```powershell node scripts/studio-debug-start.mjs --target ``` - Return `STUDIO_URL` and `POLL_COMMAND` to the user. If operating as Claude CLI, open or instruct opening `STUDIO_URL`, then run `POLL_COMMAND`. - After an event is received, edit the source directly and reply with the helper or canonical reply call: ```powershell node scripts/studio-debug-poll.mjs --session --token --relay --reply done --file --message "Edited " ``` 5. **Use Rampa only as proposal tooling.** - Run Rampa CLI for color ramps, APCA/WCAG checks, tinted neutrals, status palettes, or data-viz palettes. - Treat output as draft design material. - Persist only after mapping into Studio token roles or Palette Library payloads. 6. **Apply RDC design rules.** - Use Studio tokens for production surfaces. - Do not hardcode color/font/spacing when a token exists. - Do not modify locked governance tokens. - Keep product UIs compact, operational, and scannable. - Avoid generic AI design patterns and card-heavy layouts. 7. **Plan edits before mutating files.** - State the files/routes/tables involved. - Use RDC work-item protocol for non-trivial implementation. - Keep unrelated installed skills and vendor artifacts untouched. 8. **Verify.** - Run scoped tests only. - For Studio: prefer route smoke checks, token API checks, and browser screenshots when UI changed. - For CLI prompt work: run `node {RDC_SKILLS_ROOT}/scripts/rdc-design-cli.mjs ` and inspect the generated report under `.rdc/reports/rdc-design-cli/`. ## Command Menu | Command | Purpose | |---|---| | `edit` | Start a local source-edit session for a URL, app, brand, route, or file | | `studio` | Studio-aware design/build task with token, route, and editor context | | `tokens` | Diagnose or design token usage, resolver flow, API/export, governance | | `palette` | Palette Library work, palette generation, external Palette Designer handoff | | `theme` | Theme creation/application/export against Studio's canonical model | | `colorize` | Rampa-assisted color relationships and contrast checks | | `audit` | Technical and visual audit | | `critique` | UX/design review | | `polish` | Final detail pass | | `craft` | Shape and build a token-aware interface | ## CLI Helper Use the local helper to see exactly how much instruction text the skill is generating before sending it through an agent: ```powershell node {RDC_SKILLS_ROOT}/scripts/rdc-design-cli.mjs studio "audit the Studio palette page" node {RDC_SKILLS_ROOT}/scripts/rdc-design-cli.mjs palette "generate a PRT palette workflow" node {RDC_SKILLS_ROOT}/scripts/rdc-design-cli.mjs --json theme "RDC earth-forward light theme" ``` The helper writes logs to: ```text {RDC_SKILLS_ROOT}/.rdc/reports/rdc-design-cli/ ``` Each run includes character count, word count, approximate token count, references loaded, and the final prompt text. ## Boundaries - Do not edit unrelated installed skills. - Do not rename this skill or create duplicate aliases for it. - Do not use external live-edit runtimes as Studio's live-edit execution path. - Do not persist Rampa output directly to production without Studio token mapping. - Do not fork or ship Palette Designer until its license is verified. - Do not use Studio's deprecated `/api/editor/render` route.