canicode 0.11.5 → 0.12.0

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.
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "canicode",
3
- "version": "0.11.5",
3
+ "version": "0.12.0",
4
4
  "description": "Lint Figma designs for AI code-gen and roundtrip the answers back into the file. CLI + MCP server.",
5
5
  "skills": [
6
6
  "./skills/canicode",
package/README.md CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  ## How it works
26
26
 
27
- AI can turn Figma designs into code — but the quality depends heavily on **how the design is structured**. CanICode runs a **roundtrip** over your Figma file: analyze the design, surface the gotchas it can't answer on its own, apply fixes back to Figma, re-analyze until the design is clean, then hand off to Figma's `figma-implement-design` skill for code generation. canicode does the design augmentation; code generation lives downstream (see [ADR-013](.claude/docs/ADR.md) for the scope boundary).
27
+ AI can turn Figma designs into code — but the quality depends heavily on **how the design is structured**. CanICode runs a **roundtrip** over your Figma file: analyze the design, surface the gotchas it can't answer on its own, apply fixes back to Figma, re-analyze until the design is clean, then hand off to Figma's `figma-implement-design` skill for code generation. canicode does the design augmentation; code generation lives downstream.
28
28
 
29
29
  ![Role diagram: gotchas (memo) vs roundtrip (canvas) vs code-gen](docs/images/roles.svg)
30
30
 
@@ -46,10 +46,11 @@ Rule scores aren't guesswork. The calibration pipeline converts real Figma desig
46
46
  2. **Surface gotchas** — the analyzer emits questions for design information it can't infer (missing states, unclear variants, responsive intent).
47
47
  3. **Apply fixes to Figma** — the `/canicode-roundtrip` skill writes answers back via `use_figma`. Each write shows up in the summary with one of three outcome markers:
48
48
  - ✅ **scene write succeeded** — the property was written directly to the scene node or instance override.
49
- - 📝 **annotated the scene node** — the skill left a structured annotation instead of writing the property. This is the [ADR-012](.claude/docs/ADR.md) default for instance-child layout writes, because propagating a property to the component definition (and therefore every instance of it) is almost never what the user wants. **A summary full of 📝 markers is correct behavior, not failure.**
49
+ - 📝 **annotated the scene node** — the skill left a structured annotation instead of writing the property. This is the default for instance-child layout writes, because propagating a property to the component definition (and therefore every instance of it) is almost never what the user wants. **A summary full of 📝 markers is correct behavior, not failure.**
50
50
  - 🌐 **definition write propagated** — the property was written to the component definition and every instance inherited it. Only happens when the user opted in up front with `allowDefinitionWrite`.
51
51
  4. **Re-analyze** — verify gotchas were captured (annotations / acks); repeat step 2 if new gotchas surface.
52
- 5. **Hand off** to `figma-implement-design` — canicode's scope ends here ([ADR-013](.claude/docs/ADR.md)). Figma's official code-generation skill takes the now-clean design and produces code.
52
+ 5. **Hand off** to `figma-implement-design` — canicode's scope ends at design augmentation. Figma's official code-generation skill takes the now-clean design and produces code.
53
+ 6. **Close out with a Code Connect mapping** — after `figma-implement-design` returns, the roundtrip asks whether the generated code is satisfactory. On `y`, canicode registers a [Code Connect](https://www.figma.com/code-connect-docs/) mapping pointing the Figma component at the just-generated code so future roundtrips on screens containing this component reuse the implementation instead of regenerating markup. **Skipped if Code Connect is not set up in your repo** — the roundtrip warns about this up front, before the gotcha survey, so you can decide whether to install prerequisites first or proceed without mapping.
53
54
 
54
55
  ---
55
56
 
@@ -63,8 +64,10 @@ Rule scores aren't guesswork. The calibration pipeline converts real Figma desig
63
64
 
64
65
  ```bash
65
66
  # 1. Save your Figma token AND install the /canicode-roundtrip skill
66
- # (never paste the token into chat env var or CLI prompt only)
67
- npx canicode init --token figd_xxxxxxxxxxxxx
67
+ # Interactive (TTY): npx canicode init prompts for the token
68
+ # Non-interactive: npx canicode init --token figd_xxxxxxxxxxxxx
69
+ # (never paste the token into chat — use env var, the prompt, or --token only)
70
+ npx canicode init
68
71
 
69
72
  # 2. Run the roundtrip on a Figma URL
70
73
  /canicode-roundtrip https://www.figma.com/design/ABC123/MyDesign?node-id=1-234
@@ -72,6 +75,8 @@ npx canicode init --token figd_xxxxxxxxxxxxx
72
75
 
73
76
  > **Prerequisite:** the roundtrip skill calls the Figma MCP server to read and write the design. Install it once with `claude mcp add -s project -t http figma https://mcp.figma.com/mcp` — see the **MCP Server** install section below.
74
77
 
78
+ > **Optional — Code Connect (for the closing Step 6 mapping):** install `@figma/code-connect` (`pnpm add -D @figma/code-connect` or npm/yarn equivalent) and create `figma.config.json` at your repo root per [Figma's setup guide](https://www.figma.com/code-connect-docs/). Then run `canicode doctor` to confirm both prerequisites are in place. If you skip this, the roundtrip still generates code but will not register a Code Connect mapping — it tells you up front so you can decide.
79
+
75
80
  **CanICode in Cursor (no Claude Code required):**
76
81
 
77
82
  1. Add **canicode** and **Figma** MCPs — [Cursor MCP](docs/CUSTOMIZATION.md#cursor-mcp-canicode) for `npx` → `canicode-mcp` (use **`.cursor/mcp.json`** or **`~/.cursor/mcp.json`** in Cursor, not repo-root `.mcp.json`; [why](docs/CUSTOMIZATION.md#which-mcp-file-affects-which-host)); Figma MCP is required for **`use_figma`** if you run **roundtrip** (design writes), not for analyze-only.
@@ -88,7 +93,7 @@ npx canicode analyze "https://www.figma.com/design/ABC123/MyDesign?node-id=1-234
88
93
  claude mcp add canicode -- npx --yes --package=canicode canicode-mcp
89
94
  ```
90
95
 
91
- Restart Claude Code or reload MCP (Cursor) so canicode tools (`analyze`, `gotcha-survey`, …) load — same cold-session requirement as the Figma MCP (#433).
96
+ Restart Claude Code or reload MCP (Cursor) so canicode tools (`analyze`, `gotcha-survey`, …) load — same cold-session requirement as the Figma MCP.
92
97
 
93
98
  **Smoke test (no Figma token needed):**
94
99
 
@@ -134,14 +139,14 @@ Each issue is classified: **Blocking** > **Risk** > **Missing Info** > **Suggest
134
139
 
135
140
  ## Installation — pick one
136
141
 
137
- Each row below is a **complete** install. Don't run more than one — they cover overlapping use cases. (#367)
142
+ Each row below is a **complete** install. Don't run more than one — they cover overlapping use cases.
138
143
 
139
144
  | If you use… | Install |
140
145
  |-------------|---------|
141
- | **Claude Code** (recommended for the roundtrip workflow) | `npx canicode init --token figd_xxxxxxxxxxxxx` — saves the token AND drops `/canicode`, `/canicode-gotchas`, `/canicode-roundtrip` skills into `./.claude/skills/`. The skills already know how to call canicode via `npx canicode …`, so no **canicode** MCP install is needed; the **Figma** MCP is still required for the `/canicode-roundtrip` apply step — see the prereq below. |
146
+ | **Claude Code** (recommended for the roundtrip workflow) | `npx canicode init` (interactive prompt for the token in a TTY) or `npx canicode init --token figd_xxxxxxxxxxxxx` (CI / non-TTY) — saves the token AND drops `/canicode`, `/canicode-gotchas`, `/canicode-roundtrip` skills into `./.claude/skills/`. The skills already know how to call canicode via `npx canicode …`, so no **canicode** MCP install is needed; the **Figma** MCP is still required for the `/canicode-roundtrip` apply step — see the prereq below. To rotate the token later without reinstalling skills: `npx canicode config set-token`. |
142
147
  | **Cursor / Claude Desktop / other MCP host** | Add canicode to the host’s MCP config — see [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md#cursor-mcp-canicode). Example (Cursor project file): `npx` + `canicode-mcp` via `--package=canicode`. |
143
148
  | **OpenClaw / other AgentSkills-compatible host** | Manual skill copy — see [Other agents (manual install)](docs/CUSTOMIZATION.md#other-agents-manual-install). Best-effort docs, not a support commitment. |
144
- | **Just the CLI** (CI, scripts) | Nothing. `npx canicode analyze "<figma-url>"` works directly. Run `canicode init --token …` once if you want the token persisted to `~/.canicode/config.json`. |
149
+ | **Just the CLI** (CI, scripts) | Nothing. `npx canicode analyze "<figma-url>"` works directly. Run `canicode init --token …` once if you want the token persisted to `~/.canicode/config.json`. To rotate the token later, use `canicode config set-token` (no skill reinstall). |
145
150
 
146
151
  > **Get your token:** Figma → Settings → Security → Personal access tokens → Generate new token. [Figma's PAT docs](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)
147
152
  > **Scope:** Read-only is sufficient for canicode.
@@ -153,7 +158,11 @@ Each row below is a **complete** install. Don't run more than one — they cover
153
158
  <summary><strong>Claude Code Skills</strong> — install details</summary>
154
159
 
155
160
  ```bash
156
- # Token: env or CLI prompt only do not paste into agent chat
161
+ # Interactive (TTY) prompts for the token, never paste it into agent chat
162
+ npx canicode init
163
+
164
+ # Non-interactive (CI / non-TTY) — token via env or --token only
165
+ FIGMA_TOKEN=figd_xxxxxxxxxxxxx npx canicode init
157
166
  npx canicode init --token figd_xxxxxxxxxxxxx
158
167
  ```
159
168
 
@@ -171,6 +180,14 @@ The skills shell out to `npx canicode …` for analyze / gotcha-survey, so insta
171
180
 
172
181
  Flags: `--global` installs into `~/.claude/skills/` instead. `--cursor-skills` also installs Cursor copies under `.cursor/skills/`. `--force` overwrites existing skill files without prompting. Run `canicode docs setup` for the full setup guide.
173
182
 
183
+ To manage saved configuration without reinstalling skills:
184
+
185
+ ```bash
186
+ canicode config set-token # rotate Figma token (interactive on TTY; --token for CI)
187
+ canicode config show # masked token + config + reports paths
188
+ canicode config path # absolute path to ~/.canicode/config.json
189
+ ```
190
+
174
191
  </details>
175
192
 
176
193
  <details>
@@ -180,15 +197,15 @@ Flags: `--global` installs into `~/.claude/skills/` instead. `--cursor-skills` a
180
197
  claude mcp add canicode -- npx --yes --package=canicode canicode-mcp
181
198
  ```
182
199
 
183
- Restart Claude Code or reload MCP (Cursor) so canicode MCP tools appear in a fresh session (#433).
200
+ Restart Claude Code or reload MCP (Cursor) so canicode MCP tools appear in a fresh session.
184
201
 
185
202
  Then ask: *"Analyze this Figma design: https://www.figma.com/design/..."*
186
203
 
187
- canicode's rule engine analyzes the design data — the AI assistant just orchestrates the calls. The MCP server reads `FIGMA_TOKEN` from `~/.canicode/config.json` (set via `canicode init --token …`) or from the host's environment, so passing `-e FIGMA_TOKEN=…` to `claude mcp add` is **not** required and the current parser rejects it anyway (#364).
204
+ canicode's rule engine analyzes the design data — the AI assistant just orchestrates the calls. The MCP server reads `FIGMA_TOKEN` from `~/.canicode/config.json` (set via `canicode init --token …`) or from the host's environment, so passing `-e FIGMA_TOKEN=…` to `claude mcp add` is **not** required and the current parser rejects it anyway.
188
205
 
189
206
  If you genuinely need a per-server token without using `canicode init`, export it on the calling shell instead: `export FIGMA_TOKEN=figd_xxxxxxxxxxxxx`.
190
207
 
191
- For Cursor / Claude Desktop config, see [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md) — especially [Cursor MCP (canicode)](docs/CUSTOMIZATION.md#cursor-mcp-canicode) and the **Manual test checklist (#407)** for verifying `gotcha-survey` end-to-end.
208
+ For Cursor / Claude Desktop config, see [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md) — especially [Cursor MCP (canicode)](docs/CUSTOMIZATION.md#cursor-mcp-canicode) and the **Manual test checklist** for verifying `gotcha-survey` end-to-end.
192
209
 
193
210
  </details>
194
211
 
@@ -199,9 +216,9 @@ For Cursor / Claude Desktop config, see [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZA
199
216
  npx canicode analyze "https://www.figma.com/design/ABC123/MyDesign?node-id=1-234"
200
217
  ```
201
218
 
202
- > Pass `--ready-min-grade <S|A+|A|B+|B|C+|C|D|F>` to override the codegen-readiness threshold (default: A; from #483).
219
+ > Pass `--ready-min-grade <S|A+|A|B+|B|C+|C|D|F>` to override the codegen-readiness threshold (default: A).
203
220
 
204
- Setup: `npx canicode init --token figd_xxxxxxxxxxxxx` saves the token and installs the Claude Code skills into `./.claude/skills/`.
221
+ Setup: `npx canicode init` (interactive prompt; TTY) or `npx canicode init --token figd_xxxxxxxxxxxxx` (CI / non-TTY) saves the token and installs the Claude Code skills into `./.claude/skills/`. Rotate later with `npx canicode config set-token`.
205
222
 
206
223
  **Figma API Rate Limits** — Rate limits depend on **where the file lives**, not just your plan.
207
224