@lifeaitools/rdc-skills 0.24.38 → 0.24.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/settings.json +15 -15
- package/.claude-plugin/marketplace.json +21 -21
- package/.claude-plugin/plugin.json +1371 -1371
- package/.github/workflows/publish.yml +34 -34
- package/.github/workflows/self-test.yml +58 -58
- package/CHANGELOG.md +310 -310
- package/LICENSE +21 -21
- package/MANIFEST.md +221 -221
- package/README.md +377 -377
- package/README.sandbox.md +3 -3
- package/assets/watcher/viewer.html +164 -164
- package/bin/rdc-skills-mcp.mjs +316 -316
- package/commands/build.md +183 -183
- package/commands/collab.md +180 -180
- package/commands/deploy.md +152 -152
- package/commands/design.md +31 -31
- package/commands/edit.md +28 -28
- package/commands/fixit.md +124 -124
- package/commands/handoff.md +173 -173
- package/commands/help.md +95 -95
- package/commands/overnight.md +220 -220
- package/commands/plan.md +158 -158
- package/commands/preplan.md +131 -131
- package/commands/prototype.md +145 -145
- package/commands/release.md +49 -49
- package/commands/report.md +99 -99
- package/commands/review.md +120 -120
- package/commands/self-test.md +113 -113
- package/commands/status.md +86 -86
- package/commands/watch.md +98 -98
- package/commands/workitems.md +137 -137
- package/git-sha.json +1 -1
- package/guides/agent-bootstrap.md +295 -295
- package/guides/agents/backend.md +104 -104
- package/guides/agents/content.md +94 -94
- package/guides/agents/cs2.md +56 -56
- package/guides/agents/data.md +87 -87
- package/guides/agents/design.md +77 -77
- package/guides/agents/frontend.md +92 -92
- package/guides/agents/infrastructure.md +81 -81
- package/guides/agents/setup.md +281 -281
- package/guides/agents/verify.md +151 -151
- package/guides/agents/viz.md +106 -106
- package/guides/backend.md +146 -146
- package/guides/content.md +147 -147
- package/guides/cs2.md +190 -190
- package/guides/data.md +123 -123
- package/guides/design.md +116 -116
- package/guides/engineering-behavior.md +43 -43
- package/guides/escalation-protocol.md +125 -125
- package/guides/frontend.md +151 -151
- package/guides/history-md-spec.md +297 -297
- package/guides/infrastructure.md +179 -179
- package/guides/lessons-learned-spec.md +153 -153
- package/guides/output-contract.md +108 -108
- package/guides/publish-md-spec.md +289 -289
- package/guides/rdc-skills-startup.md +30 -30
- package/guides/verify.md +11 -11
- package/hooks/check-cwd.js +31 -31
- package/hooks/check-rdc-environment.js +164 -164
- package/hooks/check-services.js +6 -6
- package/hooks/check-stale-work-items.js +19 -19
- package/hooks/foreground-process-gate.js +128 -128
- package/hooks/gate-watchdog-selfcheck.js +257 -257
- package/hooks/hook-logger.js +25 -25
- package/hooks/lib/run-evidence-gate.mjs +241 -241
- package/hooks/no-stop-open-epics.js +127 -127
- package/hooks/post-tool-batch-gate.js +203 -203
- package/hooks/post-work-check.js +21 -21
- package/hooks/postcompact-log.js +13 -13
- package/hooks/precompact-log.js +13 -13
- package/hooks/rate-limit-retry.js +46 -46
- package/hooks/rdc-invocation-marker.js +157 -157
- package/hooks/rdc-output-contract-gate.js +94 -94
- package/hooks/require-work-item-on-commit.js +294 -294
- package/hooks/restart-brief.js +19 -19
- package/hooks/run-hidden-hook.ps1 +47 -47
- package/hooks/task-completed-gate.js +274 -274
- package/hooks/work-item-exit-gate.js +944 -944
- package/lib/catalog.mjs +236 -236
- package/lib/cloud-rewrite.mjs +155 -155
- package/package.json +56 -56
- package/rules/work-items-rpc.md +520 -520
- package/scaffold/templates/HISTORY.md.template +39 -39
- package/scaffold/templates/PUBLISH.md.template +21 -21
- package/scaffold/templates/brochure-studio-default.html +70 -70
- package/scripts/acceptance.mjs +502 -502
- package/scripts/fixtures/guides/bad-guide.md +15 -15
- package/scripts/fixtures/guides-clean/good-guide.md +16 -16
- package/scripts/install-rdc-skills.js +1289 -1289
- package/scripts/install.ps1 +202 -202
- package/scripts/install.sh +132 -132
- package/scripts/lib/assertions.mjs +287 -287
- package/scripts/lib/manifest-schema.mjs +754 -754
- package/scripts/lib/runner.mjs +465 -465
- package/scripts/lib/sandbox.mjs +435 -435
- package/scripts/prepack.mjs +32 -32
- package/scripts/rdc-brochure.mjs +464 -464
- package/scripts/rdc-design-cli.mjs +134 -134
- package/scripts/rebuild-mcp.mjs +107 -107
- package/scripts/self-test.mjs +1460 -1460
- package/scripts/stamp-git-sha.mjs +29 -29
- package/scripts/test-guide-validator.mjs +196 -196
- package/scripts/test-rdc-hooks.mjs +145 -145
- package/scripts/uninstall.ps1 +77 -77
- package/scripts/uninstall.sh +69 -69
- package/scripts/update.ps1 +43 -43
- package/scripts/update.sh +43 -43
- package/scripts/validate-place-histories.js +461 -461
- package/scripts/validate-publish-manifests.js +424 -424
- package/scripts/watch-init.mjs +100 -100
- package/skills/brochure/SKILL.md +107 -107
- package/skills/build/SKILL.md +563 -563
- package/skills/channel-formatter/SKILL.md +533 -533
- package/skills/co-develop/SKILL.md +196 -196
- package/skills/collab/SKILL.md +239 -239
- package/skills/convert/SKILL.md +140 -140
- package/skills/deploy/SKILL.md +541 -541
- package/skills/design/SKILL.md +211 -211
- package/skills/design/reference/ownership.md +16 -16
- package/skills/design/reference/rampa.md +92 -92
- package/skills/design/reference/studio-model.md +153 -153
- package/skills/edit/SKILL.md +98 -98
- package/skills/fixit/SKILL.md +165 -165
- package/skills/fs-mcp/SKILL.md +148 -148
- package/skills/handoff/SKILL.md +236 -200
- package/skills/help/SKILL.md +143 -143
- package/skills/housekeeping/SKILL.md +189 -189
- package/skills/lifeai-brochure-author/SKILL.md +340 -340
- package/skills/overnight/SKILL.md +251 -251
- package/skills/plan/SKILL.md +345 -345
- package/skills/preplan/SKILL.md +90 -90
- package/skills/prototype/SKILL.md +150 -150
- package/skills/rdc-brochurify/SKILL.md +245 -245
- package/skills/rdc-extract-verifier-rules/SKILL.md +191 -191
- package/skills/release/SKILL.md +140 -140
- package/skills/report/SKILL.md +100 -100
- package/skills/review/SKILL.md +152 -152
- package/skills/rpms-filemap/SKILL.cloud.md +111 -111
- package/skills/rpms-filemap/SKILL.md +111 -111
- package/skills/self-test/SKILL.md +132 -132
- package/skills/status/SKILL.md +99 -99
- package/skills/terminal-config/SKILL.md +62 -62
- package/skills/tests/MATRIX.md +54 -54
- package/skills/tests/README.md +47 -47
- package/skills/tests/rdc-brochure.test.json +34 -34
- package/skills/tests/rdc-build.test.json +36 -36
- package/skills/tests/rdc-channel-formatter.test.json +45 -45
- package/skills/tests/rdc-co-develop.test.json +29 -29
- package/skills/tests/rdc-collab.test.json +29 -29
- package/skills/tests/rdc-convert.test.json +35 -35
- package/skills/tests/rdc-deploy.test.json +30 -30
- package/skills/tests/rdc-design.test.json +27 -27
- package/skills/tests/rdc-edit.test.json +29 -29
- package/skills/tests/rdc-fixit.test.json +36 -36
- package/skills/tests/rdc-fs-mcp.test.json +36 -36
- package/skills/tests/rdc-handoff.test.json +28 -28
- package/skills/tests/rdc-help.test.json +29 -29
- package/skills/tests/rdc-housekeeping.test.json +31 -31
- package/skills/tests/rdc-lifeai-brochure-author.test.json +35 -35
- package/skills/tests/rdc-overnight.test.json +37 -37
- package/skills/tests/rdc-plan.test.json +27 -27
- package/skills/tests/rdc-preplan.test.json +31 -31
- package/skills/tests/rdc-prototype.test.json +28 -28
- package/skills/tests/rdc-rdc-brochurify.test.json +23 -23
- package/skills/tests/rdc-rdc-extract-verifier-rules.test.json +34 -34
- package/skills/tests/rdc-release.test.json +29 -29
- package/skills/tests/rdc-report.test.json +28 -28
- package/skills/tests/rdc-review.test.json +29 -29
- package/skills/tests/rdc-rpms-filemap.test.json +28 -28
- package/skills/tests/rdc-self-test.test.json +24 -24
- package/skills/tests/rdc-status.test.json +29 -29
- package/skills/tests/rdc-terminal-config.test.json +29 -29
- package/skills/tests/rdc-watch.test.json +24 -24
- package/skills/tests/rdc-workitems.test.json +27 -27
- package/skills/watch/SKILL.md +97 -97
- package/skills/workitems/SKILL.md +151 -151
- package/tests/acceptance.test.mjs +59 -59
- package/tests/channel-formatter.contract.test.mjs +251 -251
- package/tests/curl-surface.test.mjs +289 -289
- package/tests/harness-gates.test.mjs +325 -325
- package/tests/help-surface.test.mjs +61 -61
- package/tests/install-rdc-skills.test.mjs +49 -49
- package/tests/manifest-contract-fields.test.mjs +78 -78
- package/tests/mcp.test.mjs +271 -271
- package/tests/require-work-item-on-commit.test.mjs +162 -162
- package/tests/run-evidence-gate.test.mjs +82 -82
- package/tests/skill-test-matrix.test.mjs +66 -66
- package/tests/validate-skills.js +27 -27
- package/tests/work-item-exit-gate-l2.test.mjs +368 -368
- package/tests/work-item-exit-gate-l3.test.mjs +197 -197
package/skills/design/SKILL.md
CHANGED
|
@@ -1,211 +1,211 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: rdc:design
|
|
3
|
-
description: "Usage `rdc:design <topic>` — 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."
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
> **⚠️ OUTPUT CONTRACT (READ FIRST):** `guides/output-contract.md`
|
|
7
|
-
> Checklist-only output. No tool-call narration. No raw MCP/JSON/log dumps.
|
|
8
|
-
> One checklist upfront, updated in place, shown again at end with a 1-line verdict.
|
|
9
|
-
|
|
10
|
-
> 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`).
|
|
11
|
-
|
|
12
|
-
> **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`.
|
|
13
|
-
|
|
14
|
-
# rdc:design — RDC Design Skill
|
|
15
|
-
|
|
16
|
-
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.
|
|
17
|
-
|
|
18
|
-
## When to Use
|
|
19
|
-
|
|
20
|
-
- Studio, Palette Library, brand-token, theme, component, or live-editor work
|
|
21
|
-
- Any design task that must understand RDC's real token tables and Studio routes
|
|
22
|
-
- UI critique, audit, polish, colorize, type, layout, or craft work in `{PROJECT_ROOT}`
|
|
23
|
-
- Agent-side color-system exploration using Rampa CLI
|
|
24
|
-
- Preparing token-aware implementation instructions for frontend/backend/data agents
|
|
25
|
-
|
|
26
|
-
## Arguments
|
|
27
|
-
|
|
28
|
-
- `rdc:design` — show the command menu
|
|
29
|
-
- `rdc:design edit <target>` — start a local source-edit session for a URL, app, brand, route, or file
|
|
30
|
-
- `rdc:design studio <target>` — Studio-aware design task
|
|
31
|
-
- `rdc:design tokens <brand-or-route>` — token model, resolver, export, or governance task
|
|
32
|
-
- `rdc:design palette <brief>` — Palette Library or palette generation task
|
|
33
|
-
- `rdc:design theme <brief>` — theme generation/application task
|
|
34
|
-
- `rdc:design colorize <target>` — Rampa-assisted color-system work
|
|
35
|
-
- `rdc:design audit <target>` — design quality audit
|
|
36
|
-
- `rdc:design critique <target>` — UX/design critique
|
|
37
|
-
- `rdc:design polish <target>` — final visual and interaction pass
|
|
38
|
-
- `rdc:design craft <feature>` — shape and build a token-aware UI feature
|
|
39
|
-
|
|
40
|
-
## Required References
|
|
41
|
-
|
|
42
|
-
Load only what applies, but do not skip the Studio model for Studio/token/palette/theme work.
|
|
43
|
-
|
|
44
|
-
| Task type | Required reference |
|
|
45
|
-
|---|---|
|
|
46
|
-
| Studio, tokens, palettes, themes, editor | `skills/design/reference/studio-model.md` |
|
|
47
|
-
| Color generation, ramps, contrast, neutrals | `skills/design/reference/rampa.md` |
|
|
48
|
-
| Ownership, operating boundary, attribution files | `skills/design/reference/ownership.md` |
|
|
49
|
-
|
|
50
|
-
Project docs to read for Studio work:
|
|
51
|
-
|
|
52
|
-
- `docs/systems/studio/ARCHITECTURE.md`
|
|
53
|
-
- `apps/studio/CLAUDE.md`
|
|
54
|
-
- `.claude/context/design-system-global.md`
|
|
55
|
-
- affected route/component/source files
|
|
56
|
-
|
|
57
|
-
## Procedure
|
|
58
|
-
|
|
59
|
-
1. **Classify the task.**
|
|
60
|
-
- `edit` means start a local source-edit session. Do not show the generic command menu for `edit`.
|
|
61
|
-
- `studio`, `tokens`, `palette`, and `theme` always load the Studio model.
|
|
62
|
-
- `palette`, `theme`, and `colorize` also load the Rampa reference.
|
|
63
|
-
- Any task involving colors, palettes, ramps, contrast, neutrals, light/dark color pairs, status colors, chart colors, or theme colors loads the Rampa reference.
|
|
64
|
-
- `audit`, `critique`, `polish`, and `craft` load Studio model when the target is inside Studio or uses Studio tokens.
|
|
65
|
-
|
|
66
|
-
2. **Read the actual system context.**
|
|
67
|
-
- For Studio: read `docs/systems/studio/ARCHITECTURE.md` and `apps/studio/CLAUDE.md`.
|
|
68
|
-
- For token work: read `.claude/context/design-system-global.md`.
|
|
69
|
-
- For app UI work: read the app-specific `CLAUDE.md` if present.
|
|
70
|
-
|
|
71
|
-
3. **Find the source of truth before proposing changes.**
|
|
72
|
-
- Tokens: Studio APIs, resolver files, and Supabase token tables.
|
|
73
|
-
- Palette Library: Studio palette APIs and theme/palette model.
|
|
74
|
-
- Live editor: RDC Native Local Debug only — `/editor/local/*`, `/api/editor/local-debug`, `/studio/debug/*`, `/studio/claude/*`, and `scripts/studio-debug-poll.mjs`.
|
|
75
|
-
- Components: `@regen/ui`, Studio component registry, and existing local components.
|
|
76
|
-
|
|
77
|
-
4. **For `edit`, start the local session directly.**
|
|
78
|
-
- Intent syntax:
|
|
79
|
-
```powershell
|
|
80
|
-
rdc:design edit <url|domain|brand|app|file>
|
|
81
|
-
```
|
|
82
|
-
- Required variables:
|
|
83
|
-
- `target`
|
|
84
|
-
- `brandSlug`
|
|
85
|
-
- `appSlug`
|
|
86
|
-
- `repoRoot`
|
|
87
|
-
- `cwd`
|
|
88
|
-
- `connectorBaseUrl`
|
|
89
|
-
- `studioOrigin`
|
|
90
|
-
- `modeDefault`
|
|
91
|
-
- Fill missing variables from the obvious target mapping before asking:
|
|
92
|
-
- `test`, `studio_test`, `studio-test` -> `--brand test --app studio_test`
|
|
93
|
-
- `prt`, `prt-portal`, `prtrust.fund`, `dev.prtrust.fund` -> `--brand prt --app prt`
|
|
94
|
-
- 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.
|
|
95
|
-
- Canonical start call:
|
|
96
|
-
```powershell
|
|
97
|
-
curl.exe -s -X POST "http://127.0.0.1:52437/studio/debug/start" `
|
|
98
|
-
-H "Content-Type: application/json" `
|
|
99
|
-
-d "{\"brandSlug\":\"<brandSlug>\",\"appSlug\":\"<appSlug>\",\"repoRoot\":\"{PROJECT_ROOT}\",\"cwd\":\"{PROJECT_ROOT}\",\"modeDefault\":\"direct_edit\",\"startedBy\":\"claude-cli\"}"
|
|
100
|
-
```
|
|
101
|
-
- Expected successful response shape:
|
|
102
|
-
```json
|
|
103
|
-
{
|
|
104
|
-
"ok": true,
|
|
105
|
-
"sessionId": "studio-...",
|
|
106
|
-
"token": "...",
|
|
107
|
-
"devUrl": "http://localhost:3006",
|
|
108
|
-
"relayBaseUrl": "http://127.0.0.1:52437/studio/debug/studio-...",
|
|
109
|
-
"claudeBaseUrl": "http://127.0.0.1:52437/studio/claude/studio-...",
|
|
110
|
-
"pollCommand": "node scripts/studio-debug-poll.mjs --session ... --token ... --relay ..."
|
|
111
|
-
}
|
|
112
|
-
```
|
|
113
|
-
- Construct the Studio attach URL exactly:
|
|
114
|
-
```txt
|
|
115
|
-
http://localhost:3011/editor/local/<brandSlug>?attach=1&sessionId=<sessionId>&token=<token>
|
|
116
|
-
```
|
|
117
|
-
- Never send the user to `/editor/local/<brandSlug>` without `attach=1&sessionId=...&token=...`.
|
|
118
|
-
- Canonical poll call:
|
|
119
|
-
```powershell
|
|
120
|
-
curl.exe -s "http://127.0.0.1:52437/studio/claude/<sessionId>/poll?token=<token>&timeout=600000"
|
|
121
|
-
```
|
|
122
|
-
- Canonical reply call:
|
|
123
|
-
```powershell
|
|
124
|
-
curl.exe -s -X POST "http://127.0.0.1:52437/studio/claude/<sessionId>/reply" `
|
|
125
|
-
-H "Content-Type: application/json" `
|
|
126
|
-
-d "{\"token\":\"<token>\",\"eventId\":\"<eventId>\",\"status\":\"done\",\"message\":\"Edited <path>\",\"filesChanged\":[\"<path>\"]}"
|
|
127
|
-
```
|
|
128
|
-
- Allowed terminal statuses are `done`, `error`, `blocked`, and `needs_reference`.
|
|
129
|
-
- Convenience helper, equivalent to the canonical start call plus attach URL construction:
|
|
130
|
-
```powershell
|
|
131
|
-
node scripts/studio-debug-start.mjs --target <url|domain|brand|app|file> [--brand <slug>] [--app <slug>] [--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 <url>] [--dev-command <command>] [--no-launch]
|
|
132
|
-
```
|
|
133
|
-
- Helper output contract:
|
|
134
|
-
```txt
|
|
135
|
-
STUDIO_URL=http://localhost:3011/editor/local/<brandSlug>?attach=1&sessionId=...&token=...
|
|
136
|
-
POLL_COMMAND=node scripts/studio-debug-poll.mjs --session ... --token ... --relay ...
|
|
137
|
-
SESSION_FILE=.studio-debug/<sessionId>.json
|
|
138
|
-
```
|
|
139
|
-
- If using the helper, run:
|
|
140
|
-
```powershell
|
|
141
|
-
node scripts/studio-debug-start.mjs --target <target>
|
|
142
|
-
```
|
|
143
|
-
- Return `STUDIO_URL` and `POLL_COMMAND` to the user. If operating as Claude CLI, open or instruct opening `STUDIO_URL`, then run `POLL_COMMAND`.
|
|
144
|
-
- After an event is received, edit the source directly and reply with the helper or canonical reply call:
|
|
145
|
-
```powershell
|
|
146
|
-
node scripts/studio-debug-poll.mjs --session <sessionId> --token <token> --relay <claudeBaseUrl> --reply <eventId> done --file <path> --message "Edited <path>"
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
5. **Use Rampa only as proposal tooling.**
|
|
150
|
-
- Run Rampa CLI for color ramps, APCA/WCAG checks, tinted neutrals, status palettes, or data-viz palettes.
|
|
151
|
-
- Treat output as draft design material.
|
|
152
|
-
- Persist only after mapping into Studio token roles or Palette Library payloads.
|
|
153
|
-
|
|
154
|
-
6. **Apply RDC design rules.**
|
|
155
|
-
- Use Studio tokens for production surfaces.
|
|
156
|
-
- Do not hardcode color/font/spacing when a token exists.
|
|
157
|
-
- Do not modify locked governance tokens.
|
|
158
|
-
- Keep product UIs compact, operational, and scannable.
|
|
159
|
-
- Avoid generic AI design patterns and card-heavy layouts.
|
|
160
|
-
|
|
161
|
-
7. **Plan edits before mutating files.**
|
|
162
|
-
- State the files/routes/tables involved.
|
|
163
|
-
- Use RDC work-item protocol for non-trivial implementation.
|
|
164
|
-
- Keep unrelated installed skills and vendor artifacts untouched.
|
|
165
|
-
|
|
166
|
-
8. **Verify.**
|
|
167
|
-
- Run scoped tests only.
|
|
168
|
-
- For Studio: prefer route smoke checks, token API checks, and browser screenshots when UI changed.
|
|
169
|
-
- For CLI prompt work: run `node {RDC_SKILLS_ROOT}/scripts/rdc-design-cli.mjs <command> <brief>` and inspect the generated report under `.rdc/reports/rdc-design-cli/`.
|
|
170
|
-
|
|
171
|
-
## Command Menu
|
|
172
|
-
|
|
173
|
-
| Command | Purpose |
|
|
174
|
-
|---|---|
|
|
175
|
-
| `edit` | Start a local source-edit session for a URL, app, brand, route, or file |
|
|
176
|
-
| `studio` | Studio-aware design/build task with token, route, and editor context |
|
|
177
|
-
| `tokens` | Diagnose or design token usage, resolver flow, API/export, governance |
|
|
178
|
-
| `palette` | Palette Library work, palette generation, external Palette Designer handoff |
|
|
179
|
-
| `theme` | Theme creation/application/export against Studio's canonical model |
|
|
180
|
-
| `colorize` | Rampa-assisted color relationships and contrast checks |
|
|
181
|
-
| `audit` | Technical and visual audit |
|
|
182
|
-
| `critique` | UX/design review |
|
|
183
|
-
| `polish` | Final detail pass |
|
|
184
|
-
| `craft` | Shape and build a token-aware interface |
|
|
185
|
-
|
|
186
|
-
## CLI Helper
|
|
187
|
-
|
|
188
|
-
Use the local helper to see exactly how much instruction text the skill is generating before sending it through an agent:
|
|
189
|
-
|
|
190
|
-
```powershell
|
|
191
|
-
node {RDC_SKILLS_ROOT}/scripts/rdc-design-cli.mjs studio "audit the Studio palette page"
|
|
192
|
-
node {RDC_SKILLS_ROOT}/scripts/rdc-design-cli.mjs palette "generate a PRT palette workflow"
|
|
193
|
-
node {RDC_SKILLS_ROOT}/scripts/rdc-design-cli.mjs --json theme "RDC earth-forward light theme"
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
The helper writes logs to:
|
|
197
|
-
|
|
198
|
-
```text
|
|
199
|
-
{RDC_SKILLS_ROOT}/.rdc/reports/rdc-design-cli/
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
Each run includes character count, word count, approximate token count, references loaded, and the final prompt text.
|
|
203
|
-
|
|
204
|
-
## Boundaries
|
|
205
|
-
|
|
206
|
-
- Do not edit unrelated installed skills.
|
|
207
|
-
- Do not rename this skill or create duplicate aliases for it.
|
|
208
|
-
- Do not use external live-edit runtimes as Studio's live-edit execution path.
|
|
209
|
-
- Do not persist Rampa output directly to production without Studio token mapping.
|
|
210
|
-
- Do not fork or ship Palette Designer until its license is verified.
|
|
211
|
-
- Do not use Studio's deprecated `/api/editor/render` route.
|
|
1
|
+
---
|
|
2
|
+
name: rdc:design
|
|
3
|
+
description: "Usage `rdc:design <topic>` — 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."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
> **⚠️ OUTPUT CONTRACT (READ FIRST):** `guides/output-contract.md`
|
|
7
|
+
> Checklist-only output. No tool-call narration. No raw MCP/JSON/log dumps.
|
|
8
|
+
> One checklist upfront, updated in place, shown again at end with a 1-line verdict.
|
|
9
|
+
|
|
10
|
+
> 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`).
|
|
11
|
+
|
|
12
|
+
> **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`.
|
|
13
|
+
|
|
14
|
+
# rdc:design — RDC Design Skill
|
|
15
|
+
|
|
16
|
+
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.
|
|
17
|
+
|
|
18
|
+
## When to Use
|
|
19
|
+
|
|
20
|
+
- Studio, Palette Library, brand-token, theme, component, or live-editor work
|
|
21
|
+
- Any design task that must understand RDC's real token tables and Studio routes
|
|
22
|
+
- UI critique, audit, polish, colorize, type, layout, or craft work in `{PROJECT_ROOT}`
|
|
23
|
+
- Agent-side color-system exploration using Rampa CLI
|
|
24
|
+
- Preparing token-aware implementation instructions for frontend/backend/data agents
|
|
25
|
+
|
|
26
|
+
## Arguments
|
|
27
|
+
|
|
28
|
+
- `rdc:design` — show the command menu
|
|
29
|
+
- `rdc:design edit <target>` — start a local source-edit session for a URL, app, brand, route, or file
|
|
30
|
+
- `rdc:design studio <target>` — Studio-aware design task
|
|
31
|
+
- `rdc:design tokens <brand-or-route>` — token model, resolver, export, or governance task
|
|
32
|
+
- `rdc:design palette <brief>` — Palette Library or palette generation task
|
|
33
|
+
- `rdc:design theme <brief>` — theme generation/application task
|
|
34
|
+
- `rdc:design colorize <target>` — Rampa-assisted color-system work
|
|
35
|
+
- `rdc:design audit <target>` — design quality audit
|
|
36
|
+
- `rdc:design critique <target>` — UX/design critique
|
|
37
|
+
- `rdc:design polish <target>` — final visual and interaction pass
|
|
38
|
+
- `rdc:design craft <feature>` — shape and build a token-aware UI feature
|
|
39
|
+
|
|
40
|
+
## Required References
|
|
41
|
+
|
|
42
|
+
Load only what applies, but do not skip the Studio model for Studio/token/palette/theme work.
|
|
43
|
+
|
|
44
|
+
| Task type | Required reference |
|
|
45
|
+
|---|---|
|
|
46
|
+
| Studio, tokens, palettes, themes, editor | `skills/design/reference/studio-model.md` |
|
|
47
|
+
| Color generation, ramps, contrast, neutrals | `skills/design/reference/rampa.md` |
|
|
48
|
+
| Ownership, operating boundary, attribution files | `skills/design/reference/ownership.md` |
|
|
49
|
+
|
|
50
|
+
Project docs to read for Studio work:
|
|
51
|
+
|
|
52
|
+
- `docs/systems/studio/ARCHITECTURE.md`
|
|
53
|
+
- `apps/studio/CLAUDE.md`
|
|
54
|
+
- `.claude/context/design-system-global.md`
|
|
55
|
+
- affected route/component/source files
|
|
56
|
+
|
|
57
|
+
## Procedure
|
|
58
|
+
|
|
59
|
+
1. **Classify the task.**
|
|
60
|
+
- `edit` means start a local source-edit session. Do not show the generic command menu for `edit`.
|
|
61
|
+
- `studio`, `tokens`, `palette`, and `theme` always load the Studio model.
|
|
62
|
+
- `palette`, `theme`, and `colorize` also load the Rampa reference.
|
|
63
|
+
- Any task involving colors, palettes, ramps, contrast, neutrals, light/dark color pairs, status colors, chart colors, or theme colors loads the Rampa reference.
|
|
64
|
+
- `audit`, `critique`, `polish`, and `craft` load Studio model when the target is inside Studio or uses Studio tokens.
|
|
65
|
+
|
|
66
|
+
2. **Read the actual system context.**
|
|
67
|
+
- For Studio: read `docs/systems/studio/ARCHITECTURE.md` and `apps/studio/CLAUDE.md`.
|
|
68
|
+
- For token work: read `.claude/context/design-system-global.md`.
|
|
69
|
+
- For app UI work: read the app-specific `CLAUDE.md` if present.
|
|
70
|
+
|
|
71
|
+
3. **Find the source of truth before proposing changes.**
|
|
72
|
+
- Tokens: Studio APIs, resolver files, and Supabase token tables.
|
|
73
|
+
- Palette Library: Studio palette APIs and theme/palette model.
|
|
74
|
+
- Live editor: RDC Native Local Debug only — `/editor/local/*`, `/api/editor/local-debug`, `/studio/debug/*`, `/studio/claude/*`, and `scripts/studio-debug-poll.mjs`.
|
|
75
|
+
- Components: `@regen/ui`, Studio component registry, and existing local components.
|
|
76
|
+
|
|
77
|
+
4. **For `edit`, start the local session directly.**
|
|
78
|
+
- Intent syntax:
|
|
79
|
+
```powershell
|
|
80
|
+
rdc:design edit <url|domain|brand|app|file>
|
|
81
|
+
```
|
|
82
|
+
- Required variables:
|
|
83
|
+
- `target`
|
|
84
|
+
- `brandSlug`
|
|
85
|
+
- `appSlug`
|
|
86
|
+
- `repoRoot`
|
|
87
|
+
- `cwd`
|
|
88
|
+
- `connectorBaseUrl`
|
|
89
|
+
- `studioOrigin`
|
|
90
|
+
- `modeDefault`
|
|
91
|
+
- Fill missing variables from the obvious target mapping before asking:
|
|
92
|
+
- `test`, `studio_test`, `studio-test` -> `--brand test --app studio_test`
|
|
93
|
+
- `prt`, `prt-portal`, `prtrust.fund`, `dev.prtrust.fund` -> `--brand prt --app prt`
|
|
94
|
+
- 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.
|
|
95
|
+
- Canonical start call:
|
|
96
|
+
```powershell
|
|
97
|
+
curl.exe -s -X POST "http://127.0.0.1:52437/studio/debug/start" `
|
|
98
|
+
-H "Content-Type: application/json" `
|
|
99
|
+
-d "{\"brandSlug\":\"<brandSlug>\",\"appSlug\":\"<appSlug>\",\"repoRoot\":\"{PROJECT_ROOT}\",\"cwd\":\"{PROJECT_ROOT}\",\"modeDefault\":\"direct_edit\",\"startedBy\":\"claude-cli\"}"
|
|
100
|
+
```
|
|
101
|
+
- Expected successful response shape:
|
|
102
|
+
```json
|
|
103
|
+
{
|
|
104
|
+
"ok": true,
|
|
105
|
+
"sessionId": "studio-...",
|
|
106
|
+
"token": "...",
|
|
107
|
+
"devUrl": "http://localhost:3006",
|
|
108
|
+
"relayBaseUrl": "http://127.0.0.1:52437/studio/debug/studio-...",
|
|
109
|
+
"claudeBaseUrl": "http://127.0.0.1:52437/studio/claude/studio-...",
|
|
110
|
+
"pollCommand": "node scripts/studio-debug-poll.mjs --session ... --token ... --relay ..."
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
- Construct the Studio attach URL exactly:
|
|
114
|
+
```txt
|
|
115
|
+
http://localhost:3011/editor/local/<brandSlug>?attach=1&sessionId=<sessionId>&token=<token>
|
|
116
|
+
```
|
|
117
|
+
- Never send the user to `/editor/local/<brandSlug>` without `attach=1&sessionId=...&token=...`.
|
|
118
|
+
- Canonical poll call:
|
|
119
|
+
```powershell
|
|
120
|
+
curl.exe -s "http://127.0.0.1:52437/studio/claude/<sessionId>/poll?token=<token>&timeout=600000"
|
|
121
|
+
```
|
|
122
|
+
- Canonical reply call:
|
|
123
|
+
```powershell
|
|
124
|
+
curl.exe -s -X POST "http://127.0.0.1:52437/studio/claude/<sessionId>/reply" `
|
|
125
|
+
-H "Content-Type: application/json" `
|
|
126
|
+
-d "{\"token\":\"<token>\",\"eventId\":\"<eventId>\",\"status\":\"done\",\"message\":\"Edited <path>\",\"filesChanged\":[\"<path>\"]}"
|
|
127
|
+
```
|
|
128
|
+
- Allowed terminal statuses are `done`, `error`, `blocked`, and `needs_reference`.
|
|
129
|
+
- Convenience helper, equivalent to the canonical start call plus attach URL construction:
|
|
130
|
+
```powershell
|
|
131
|
+
node scripts/studio-debug-start.mjs --target <url|domain|brand|app|file> [--brand <slug>] [--app <slug>] [--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 <url>] [--dev-command <command>] [--no-launch]
|
|
132
|
+
```
|
|
133
|
+
- Helper output contract:
|
|
134
|
+
```txt
|
|
135
|
+
STUDIO_URL=http://localhost:3011/editor/local/<brandSlug>?attach=1&sessionId=...&token=...
|
|
136
|
+
POLL_COMMAND=node scripts/studio-debug-poll.mjs --session ... --token ... --relay ...
|
|
137
|
+
SESSION_FILE=.studio-debug/<sessionId>.json
|
|
138
|
+
```
|
|
139
|
+
- If using the helper, run:
|
|
140
|
+
```powershell
|
|
141
|
+
node scripts/studio-debug-start.mjs --target <target>
|
|
142
|
+
```
|
|
143
|
+
- Return `STUDIO_URL` and `POLL_COMMAND` to the user. If operating as Claude CLI, open or instruct opening `STUDIO_URL`, then run `POLL_COMMAND`.
|
|
144
|
+
- After an event is received, edit the source directly and reply with the helper or canonical reply call:
|
|
145
|
+
```powershell
|
|
146
|
+
node scripts/studio-debug-poll.mjs --session <sessionId> --token <token> --relay <claudeBaseUrl> --reply <eventId> done --file <path> --message "Edited <path>"
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
5. **Use Rampa only as proposal tooling.**
|
|
150
|
+
- Run Rampa CLI for color ramps, APCA/WCAG checks, tinted neutrals, status palettes, or data-viz palettes.
|
|
151
|
+
- Treat output as draft design material.
|
|
152
|
+
- Persist only after mapping into Studio token roles or Palette Library payloads.
|
|
153
|
+
|
|
154
|
+
6. **Apply RDC design rules.**
|
|
155
|
+
- Use Studio tokens for production surfaces.
|
|
156
|
+
- Do not hardcode color/font/spacing when a token exists.
|
|
157
|
+
- Do not modify locked governance tokens.
|
|
158
|
+
- Keep product UIs compact, operational, and scannable.
|
|
159
|
+
- Avoid generic AI design patterns and card-heavy layouts.
|
|
160
|
+
|
|
161
|
+
7. **Plan edits before mutating files.**
|
|
162
|
+
- State the files/routes/tables involved.
|
|
163
|
+
- Use RDC work-item protocol for non-trivial implementation.
|
|
164
|
+
- Keep unrelated installed skills and vendor artifacts untouched.
|
|
165
|
+
|
|
166
|
+
8. **Verify.**
|
|
167
|
+
- Run scoped tests only.
|
|
168
|
+
- For Studio: prefer route smoke checks, token API checks, and browser screenshots when UI changed.
|
|
169
|
+
- For CLI prompt work: run `node {RDC_SKILLS_ROOT}/scripts/rdc-design-cli.mjs <command> <brief>` and inspect the generated report under `.rdc/reports/rdc-design-cli/`.
|
|
170
|
+
|
|
171
|
+
## Command Menu
|
|
172
|
+
|
|
173
|
+
| Command | Purpose |
|
|
174
|
+
|---|---|
|
|
175
|
+
| `edit` | Start a local source-edit session for a URL, app, brand, route, or file |
|
|
176
|
+
| `studio` | Studio-aware design/build task with token, route, and editor context |
|
|
177
|
+
| `tokens` | Diagnose or design token usage, resolver flow, API/export, governance |
|
|
178
|
+
| `palette` | Palette Library work, palette generation, external Palette Designer handoff |
|
|
179
|
+
| `theme` | Theme creation/application/export against Studio's canonical model |
|
|
180
|
+
| `colorize` | Rampa-assisted color relationships and contrast checks |
|
|
181
|
+
| `audit` | Technical and visual audit |
|
|
182
|
+
| `critique` | UX/design review |
|
|
183
|
+
| `polish` | Final detail pass |
|
|
184
|
+
| `craft` | Shape and build a token-aware interface |
|
|
185
|
+
|
|
186
|
+
## CLI Helper
|
|
187
|
+
|
|
188
|
+
Use the local helper to see exactly how much instruction text the skill is generating before sending it through an agent:
|
|
189
|
+
|
|
190
|
+
```powershell
|
|
191
|
+
node {RDC_SKILLS_ROOT}/scripts/rdc-design-cli.mjs studio "audit the Studio palette page"
|
|
192
|
+
node {RDC_SKILLS_ROOT}/scripts/rdc-design-cli.mjs palette "generate a PRT palette workflow"
|
|
193
|
+
node {RDC_SKILLS_ROOT}/scripts/rdc-design-cli.mjs --json theme "RDC earth-forward light theme"
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
The helper writes logs to:
|
|
197
|
+
|
|
198
|
+
```text
|
|
199
|
+
{RDC_SKILLS_ROOT}/.rdc/reports/rdc-design-cli/
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
Each run includes character count, word count, approximate token count, references loaded, and the final prompt text.
|
|
203
|
+
|
|
204
|
+
## Boundaries
|
|
205
|
+
|
|
206
|
+
- Do not edit unrelated installed skills.
|
|
207
|
+
- Do not rename this skill or create duplicate aliases for it.
|
|
208
|
+
- Do not use external live-edit runtimes as Studio's live-edit execution path.
|
|
209
|
+
- Do not persist Rampa output directly to production without Studio token mapping.
|
|
210
|
+
- Do not fork or ship Palette Designer until its license is verified.
|
|
211
|
+
- Do not use Studio's deprecated `/api/editor/render` route.
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
# RDC Design Ownership
|
|
2
|
-
|
|
3
|
-
RDC Design is the RDC-owned design skill for Studio and LIFEAI interface work.
|
|
4
|
-
|
|
5
|
-
## Operating Boundary
|
|
6
|
-
|
|
7
|
-
- Use this skill for Studio, tokens, palettes, themes, local-debug editing, and RDC product UI.
|
|
8
|
-
- Keep unrelated installed skills and vendor artifacts untouched.
|
|
9
|
-
- Keep third-party attribution in dedicated license or notice files on disk, not in operational skill prompts.
|
|
10
|
-
- Use Studio docs, Studio APIs, and token tables as the source of truth.
|
|
11
|
-
|
|
12
|
-
## Attribution Files
|
|
13
|
-
|
|
14
|
-
When a feature uses third-party code or derives from third-party implementation details, preserve attribution in repository license, notice, or readme files that ship with that artifact.
|
|
15
|
-
|
|
16
|
-
Operational skills should describe RDC-owned workflows directly so agents do not route Studio work through unrelated tools.
|
|
1
|
+
# RDC Design Ownership
|
|
2
|
+
|
|
3
|
+
RDC Design is the RDC-owned design skill for Studio and LIFEAI interface work.
|
|
4
|
+
|
|
5
|
+
## Operating Boundary
|
|
6
|
+
|
|
7
|
+
- Use this skill for Studio, tokens, palettes, themes, local-debug editing, and RDC product UI.
|
|
8
|
+
- Keep unrelated installed skills and vendor artifacts untouched.
|
|
9
|
+
- Keep third-party attribution in dedicated license or notice files on disk, not in operational skill prompts.
|
|
10
|
+
- Use Studio docs, Studio APIs, and token tables as the source of truth.
|
|
11
|
+
|
|
12
|
+
## Attribution Files
|
|
13
|
+
|
|
14
|
+
When a feature uses third-party code or derives from third-party implementation details, preserve attribution in repository license, notice, or readme files that ship with that artifact.
|
|
15
|
+
|
|
16
|
+
Operational skills should describe RDC-owned workflows directly so agents do not route Studio work through unrelated tools.
|
|
@@ -1,92 +1,92 @@
|
|
|
1
|
-
# Rampa CLI Reference for RDC Design
|
|
2
|
-
|
|
3
|
-
Rampa is CLI support for agent-side color-system design. It is not the Studio palette UI and does not replace Studio's Palette Library or token tables.
|
|
4
|
-
|
|
5
|
-
## Preflight
|
|
6
|
-
|
|
7
|
-
Prefer `npx` so agents do not depend on a global install:
|
|
8
|
-
|
|
9
|
-
```powershell
|
|
10
|
-
npx @basiclines/rampa --help
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
If installed globally:
|
|
14
|
-
|
|
15
|
-
```powershell
|
|
16
|
-
rampa --help
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Usage Rules
|
|
20
|
-
|
|
21
|
-
- Use Rampa to generate proposals, not to write production tokens directly.
|
|
22
|
-
- Map every accepted output into Studio token roles or Palette Library payloads.
|
|
23
|
-
- Check contrast before recommending text/background pairs.
|
|
24
|
-
- Avoid pure `#000` and `#fff` as final RDC design tokens.
|
|
25
|
-
- Preserve locked/governance tokens.
|
|
26
|
-
|
|
27
|
-
## Recipes
|
|
28
|
-
|
|
29
|
-
### Theme Foundation
|
|
30
|
-
|
|
31
|
-
```powershell
|
|
32
|
-
npx @basiclines/rampa -C "#548235" -L 95:10 --size=10 -O css --name=primary
|
|
33
|
-
npx @basiclines/rampa -C "#548235" --add=complementary -L 95:10 --size=10 -O css --name=secondary
|
|
34
|
-
npx @basiclines/rampa -C "#548235" -L 98:5 -S 5:10 --size=10 -O css --name=neutral
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
Map into Studio roles:
|
|
38
|
-
|
|
39
|
-
- `primary` -> primary palette seed / `--color-primary`
|
|
40
|
-
- `secondary` -> secondary palette seed / `--color-secondary`
|
|
41
|
-
- `neutral` -> surface, text, border, muted roles after contrast review
|
|
42
|
-
|
|
43
|
-
### Tinted Neutrals
|
|
44
|
-
|
|
45
|
-
```powershell
|
|
46
|
-
npx @basiclines/rampa -C "#548235" -L 98:5 -S 5:10 --size=10 -O json --name=neutral
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
Use for background, surface, elevated, border, muted text, and disabled states. Keep chroma low near lightness extremes.
|
|
50
|
-
|
|
51
|
-
### Status Colors
|
|
52
|
-
|
|
53
|
-
```powershell
|
|
54
|
-
npx @basiclines/rampa -C "#548235" --add=square -L 95:15 --size=10 -O css --name=status
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
Map hues deliberately:
|
|
58
|
-
|
|
59
|
-
- green/teal -> success
|
|
60
|
-
- yellow/orange -> warning
|
|
61
|
-
- red/pink -> danger
|
|
62
|
-
- blue/cyan -> info
|
|
63
|
-
|
|
64
|
-
### Data Visualization
|
|
65
|
-
|
|
66
|
-
```powershell
|
|
67
|
-
npx @basiclines/rampa -C "#548235" --add=triadic --size=2 -L 50:50 -S 70:70 -O css --name=chart
|
|
68
|
-
npx @basiclines/rampa -C "#548235" --add=square --size=2 -L 50:50 -S 70:70 -O css --name=chart
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
Use fixed lightness for equal visual weight. Avoid turning chart palettes into ramps unless the data is ordinal.
|
|
72
|
-
|
|
73
|
-
### Contrast Lint
|
|
74
|
-
|
|
75
|
-
```powershell
|
|
76
|
-
npx @basiclines/rampa lint --fg "#123123" --bg "#f7faf3"
|
|
77
|
-
npx @basiclines/rampa lint --fg "#123123" --bg "#f7faf3" --mode wcag --output json
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
Record contrast failures in the design output. Do not bury them as "subjective" design concerns.
|
|
81
|
-
|
|
82
|
-
## Studio Mapping Checklist
|
|
83
|
-
|
|
84
|
-
Before persistence:
|
|
85
|
-
|
|
86
|
-
- identify brand/entity
|
|
87
|
-
- identify palette seed roles
|
|
88
|
-
- map generated ramps to Studio token names
|
|
89
|
-
- validate light and dark values
|
|
90
|
-
- check text/background contrast pairs
|
|
91
|
-
- save through Studio Palette Library or token apply service
|
|
92
|
-
- verify `/api/v2/tokens/[slug]/css` changes as expected
|
|
1
|
+
# Rampa CLI Reference for RDC Design
|
|
2
|
+
|
|
3
|
+
Rampa is CLI support for agent-side color-system design. It is not the Studio palette UI and does not replace Studio's Palette Library or token tables.
|
|
4
|
+
|
|
5
|
+
## Preflight
|
|
6
|
+
|
|
7
|
+
Prefer `npx` so agents do not depend on a global install:
|
|
8
|
+
|
|
9
|
+
```powershell
|
|
10
|
+
npx @basiclines/rampa --help
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
If installed globally:
|
|
14
|
+
|
|
15
|
+
```powershell
|
|
16
|
+
rampa --help
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage Rules
|
|
20
|
+
|
|
21
|
+
- Use Rampa to generate proposals, not to write production tokens directly.
|
|
22
|
+
- Map every accepted output into Studio token roles or Palette Library payloads.
|
|
23
|
+
- Check contrast before recommending text/background pairs.
|
|
24
|
+
- Avoid pure `#000` and `#fff` as final RDC design tokens.
|
|
25
|
+
- Preserve locked/governance tokens.
|
|
26
|
+
|
|
27
|
+
## Recipes
|
|
28
|
+
|
|
29
|
+
### Theme Foundation
|
|
30
|
+
|
|
31
|
+
```powershell
|
|
32
|
+
npx @basiclines/rampa -C "#548235" -L 95:10 --size=10 -O css --name=primary
|
|
33
|
+
npx @basiclines/rampa -C "#548235" --add=complementary -L 95:10 --size=10 -O css --name=secondary
|
|
34
|
+
npx @basiclines/rampa -C "#548235" -L 98:5 -S 5:10 --size=10 -O css --name=neutral
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Map into Studio roles:
|
|
38
|
+
|
|
39
|
+
- `primary` -> primary palette seed / `--color-primary`
|
|
40
|
+
- `secondary` -> secondary palette seed / `--color-secondary`
|
|
41
|
+
- `neutral` -> surface, text, border, muted roles after contrast review
|
|
42
|
+
|
|
43
|
+
### Tinted Neutrals
|
|
44
|
+
|
|
45
|
+
```powershell
|
|
46
|
+
npx @basiclines/rampa -C "#548235" -L 98:5 -S 5:10 --size=10 -O json --name=neutral
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Use for background, surface, elevated, border, muted text, and disabled states. Keep chroma low near lightness extremes.
|
|
50
|
+
|
|
51
|
+
### Status Colors
|
|
52
|
+
|
|
53
|
+
```powershell
|
|
54
|
+
npx @basiclines/rampa -C "#548235" --add=square -L 95:15 --size=10 -O css --name=status
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Map hues deliberately:
|
|
58
|
+
|
|
59
|
+
- green/teal -> success
|
|
60
|
+
- yellow/orange -> warning
|
|
61
|
+
- red/pink -> danger
|
|
62
|
+
- blue/cyan -> info
|
|
63
|
+
|
|
64
|
+
### Data Visualization
|
|
65
|
+
|
|
66
|
+
```powershell
|
|
67
|
+
npx @basiclines/rampa -C "#548235" --add=triadic --size=2 -L 50:50 -S 70:70 -O css --name=chart
|
|
68
|
+
npx @basiclines/rampa -C "#548235" --add=square --size=2 -L 50:50 -S 70:70 -O css --name=chart
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Use fixed lightness for equal visual weight. Avoid turning chart palettes into ramps unless the data is ordinal.
|
|
72
|
+
|
|
73
|
+
### Contrast Lint
|
|
74
|
+
|
|
75
|
+
```powershell
|
|
76
|
+
npx @basiclines/rampa lint --fg "#123123" --bg "#f7faf3"
|
|
77
|
+
npx @basiclines/rampa lint --fg "#123123" --bg "#f7faf3" --mode wcag --output json
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Record contrast failures in the design output. Do not bury them as "subjective" design concerns.
|
|
81
|
+
|
|
82
|
+
## Studio Mapping Checklist
|
|
83
|
+
|
|
84
|
+
Before persistence:
|
|
85
|
+
|
|
86
|
+
- identify brand/entity
|
|
87
|
+
- identify palette seed roles
|
|
88
|
+
- map generated ramps to Studio token names
|
|
89
|
+
- validate light and dark values
|
|
90
|
+
- check text/background contrast pairs
|
|
91
|
+
- save through Studio Palette Library or token apply service
|
|
92
|
+
- verify `/api/v2/tokens/[slug]/css` changes as expected
|