Conversation
Add feature comparison table to CLAUDE.md and MCP docs tool: - Component masters: CLI only (componentDefinitions) - Annotations: MCP only (data-annotations, REST API is private beta) - Component metadata: CLI only - Usage guidance: CLI for component analysis, MCP for quick checks Closes #20 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
📝 WalkthroughWalkthroughDocumentation was updated across multiple README/skill/docs files to add a new "CLI vs MCP Feature Comparison" and guidance on when to use each path. Changes clarify that CLI (with Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@CLAUDE.md`:
- Around line 67-83: The "Annotations (dev mode)" row in the CLAUDE.md feature
table uses "Private beta" while src/mcp/server.ts uses "private beta"; update
the CLAUDE.md entry to use "private beta" (lowercase) so the wording is
consistent across the codebase—locate the table row containing "Annotations (dev
mode)" and replace "Private beta" with "private beta".
In `@src/mcp/server.ts`:
- Around line 284-295: Update the capitalization in the MCP vs CLI table: change
the lowercase phrase "private beta" in the table row for "Annotations (dev
mode)" to "Private beta" so it matches the capitalization used in CLAUDE.md;
locate the string in src/mcp/server.ts inside the CLI vs MCP table text and
replace only that token to preserve surrounding formatting and punctuation.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 840640e9-dbc7-47fc-9051-462273c4613b
📒 Files selected for processing (2)
CLAUDE.mdsrc/mcp/server.ts
Comment on lines
+284
to
+295
| \`\`\` | ||
|
|
||
| ## CLI vs MCP | ||
|
|
||
| | Feature | CLI (FIGMA_TOKEN) | MCP (Figma MCP) | | ||
| |---------|:-:|:-:| | ||
| | Component master trees | ✅ | ❌ | | ||
| | Component metadata | ✅ | ❌ | | ||
| | Annotations (dev mode) | ❌ private beta | ✅ data-annotations | | ||
| | FIGMA_TOKEN required | ✅ | ❌ | | ||
|
|
||
| Use CLI for accurate component analysis. Use MCP for quick checks and annotation-aware workflows.`, |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
CLI vs MCP comparison added to setup documentation.
The inline comparison table provides focused, context-relevant guidance for MCP users. The subset of rows (4 vs 7 in CLAUDE.md) appropriately highlights component-related differences critical for choosing between CLI and MCP workflows.
Minor: Inconsistent capitalization with CLAUDE.md.
Line 292 uses lowercase "private beta" while CLAUDE.md line 75 uses "Private beta" (capitalized). Consider standardizing the capitalization across both files for consistency.
✍️ Suggested capitalization fix
-| Annotations (dev mode) | ❌ private beta | ✅ data-annotations |
+| Annotations (dev mode) | ❌ Private beta | ✅ data-annotations |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| \`\`\` | |
| ## CLI vs MCP | |
| | Feature | CLI (FIGMA_TOKEN) | MCP (Figma MCP) | | |
| |---------|:-:|:-:| | |
| | Component master trees | ✅ | ❌ | | |
| | Component metadata | ✅ | ❌ | | |
| | Annotations (dev mode) | ❌ private beta | ✅ data-annotations | | |
| | FIGMA_TOKEN required | ✅ | ❌ | | |
| Use CLI for accurate component analysis. Use MCP for quick checks and annotation-aware workflows.`, | |
| `` | |
| ## CLI vs MCP | |
| | Feature | CLI (FIGMA_TOKEN) | MCP (Figma MCP) | | |
| |---------|:-:|:-:| | |
| | Component master trees | ✅ | ❌ | | |
| | Component metadata | ✅ | ❌ | | |
| | Annotations (dev mode) | ❌ Private beta | ✅ data-annotations | | |
| | FIGMA_TOKEN required | ✅ | ❌ | | |
| Use CLI for accurate component analysis. Use MCP for quick checks and annotation-aware workflows.`, |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/mcp/server.ts` around lines 284 - 295, Update the capitalization in the
MCP vs CLI table: change the lowercase phrase "private beta" in the table row
for "Annotations (dev mode)" to "Private beta" so it matches the capitalization
used in CLAUDE.md; locate the string in src/mcp/server.ts inside the CLI vs MCP
table text and replace only that token to preserve surrounding formatting and
punctuation.
- Align Annotations row wording to lowercase private beta in CLAUDE.md - Add CLI vs MCP feature table to README (issue #20 scope) - Add CLI vs skill comparison table to canicode SKILL.md
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.claude/skills/canicode/SKILL.md:
- Line 46: The guidance wording in SKILL.md ("reliable component-master
analysis") is inconsistent with README.md and CLAUDE.md ("accurate component
analysis"); update the sentence that currently reads 'Use **CLI + token** when
the user needs reliable component-master analysis. Use **this skill** for fast
checks and workflows that rely on dev annotations.' to use the same phrase
"accurate component analysis" (or explicitly document the deliberate distinction
if intentional) so the docs are consistent; verify and, if intentional, add a
short note explaining the difference.
- Around line 37-44: Add a new "Screenshots" row to the feature comparison table
in SKILL.md so it matches README/CLAUDE.md; insert a table row reading "|
Screenshots | ✅ via API | ✅ `get_screenshot` |" into the existing markdown table
(keep the pipe-aligned format and the header separator row intact) and ensure
the `get_screenshot` cell uses backticks like other code items.
In `@CLAUDE.md`:
- Line 80: Replace or clarify the internal term "Stage 4 style override" in the
phrase "Accurate component analysis (Stage 4 style override, missing-component)"
by either removing "Stage 4" and changing it to "Accurate component analysis
(style overrides, missing-component)" or adding a brief parenthetical
explanation after "Stage 4" that explains its meaning; update the string
containing "Stage 4 style override" accordingly so external readers see the
simplified "style overrides" wording or an inline clarification.
In `@README.md`:
- Line 87: Split the single guidance sentence under the "When to use which:"
header into a short bulleted list for readability; replace the long inline
sentence with three bullets referencing the existing options: "CLI with
FIGMA_TOKEN" for accurate component analysis (style overrides, missing-component
rules), "MCP" for quick structure/style checks or annotation-aware flows, and
"CLI with saved fixtures (`save-fixture`)" for offline/CI use so each use case
is easy to scan.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 3279c224-274e-4e7c-87b7-2653ff708087
📒 Files selected for processing (3)
.claude/skills/canicode/SKILL.mdCLAUDE.mdREADME.md
Comment on lines
+37
to
+44
| | Feature | CLI (REST API) | This skill (Figma MCP) | | ||
| |---------|:-:|:-:| | ||
| | Node structure | ✅ Full tree | ✅ XML metadata | | ||
| | Style values | ✅ Raw Figma JSON | ✅ React+Tailwind from design context | | ||
| | Component metadata (name, desc) | ✅ | ❌ | | ||
| | Component master trees | ✅ `componentDefinitions` | ❌ | | ||
| | Annotations (dev mode) | ❌ private beta | ✅ `data-annotations` in code | | ||
| | FIGMA_TOKEN | Required for live API | Not required when Figma MCP is connected | |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify the Screenshots row presence across all comparison tables
echo "=== README.md Screenshots row ==="
rg -n "Screenshots" README.md
echo -e "\n=== SKILL.md Screenshots row ==="
rg -n "Screenshots" .claude/skills/canicode/SKILL.md
echo -e "\n=== CLAUDE.md Screenshots row ==="
rg -n "Screenshots" CLAUDE.mdRepository: let-sunny/canicode
Length of output: 268
Add the missing Screenshots row to the feature comparison table.
The feature comparison table in SKILL.md is missing the Screenshots row that appears in README.md and CLAUDE.md. Since the skill includes get_screenshot functionality, add the row for consistency:
| Screenshots | ✅ via API | ✅ `get_screenshot` |🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.claude/skills/canicode/SKILL.md around lines 37 - 44, Add a new
"Screenshots" row to the feature comparison table in SKILL.md so it matches
README/CLAUDE.md; insert a table row reading "| Screenshots | ✅ via API | ✅
`get_screenshot` |" into the existing markdown table (keep the pipe-aligned
format and the header separator row intact) and ensure the `get_screenshot` cell
uses backticks like other code items.
.claude/skills/canicode/SKILL.md
Outdated
| | Annotations (dev mode) | ❌ private beta | ✅ `data-annotations` in code | | ||
| | FIGMA_TOKEN | Required for live API | Not required when Figma MCP is connected | | ||
|
|
||
| Use **CLI + token** when the user needs reliable component-master analysis. Use **this skill** for fast checks and workflows that rely on dev annotations. |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider aligning the guidance wording with README.md for consistency.
The usage guidance here says "reliable component-master analysis" while README.md (line 87) and CLAUDE.md (line 80) say "accurate component analysis". The terms are similar but not identical.
For consistency across documentation surfaces, consider using the same wording. If the subtle difference is intentional to fit the skill context better, that's fine—just verify it's a deliberate choice.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.claude/skills/canicode/SKILL.md at line 46, The guidance wording in
SKILL.md ("reliable component-master analysis") is inconsistent with README.md
and CLAUDE.md ("accurate component analysis"); update the sentence that
currently reads 'Use **CLI + token** when the user needs reliable
component-master analysis. Use **this skill** for fast checks and workflows that
rely on dev annotations.' to use the same phrase "accurate component analysis"
(or explicitly document the deliberate distinction if intentional) so the docs
are consistent; verify and, if intentional, add a short note explaining the
difference.
CLAUDE.md
Outdated
| | FIGMA_TOKEN required | ✅ | ❌ | | ||
|
|
||
| **When to use which:** | ||
| - Accurate component analysis (Stage 4 style override, missing-component) → **CLI with FIGMA_TOKEN** |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Clarify or remove internal terminology "Stage 4".
The guidance mentions "Stage 4 style override" which appears to be internal terminology that may not be clear to external users or contributors. This term doesn't appear elsewhere in the document.
Consider either:
- Removing "Stage 4" and simplifying to: "Accurate component analysis (style overrides, missing-component)"
- Adding a brief parenthetical explanation if "Stage 4" has specific meaning users should understand
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@CLAUDE.md` at line 80, Replace or clarify the internal term "Stage 4 style
override" in the phrase "Accurate component analysis (Stage 4 style override,
missing-component)" by either removing "Stage 4" and changing it to "Accurate
component analysis (style overrides, missing-component)" or adding a brief
parenthetical explanation after "Stage 4" that explains its meaning; update the
string containing "Stage 4 style override" accordingly so external readers see
the simplified "style overrides" wording or an inline clarification.
README.md
Outdated
| | Screenshots | ✅ via API | ✅ `get_screenshot` | | ||
| | FIGMA_TOKEN required | ✅ | ❌ | | ||
|
|
||
| **When to use which:** accurate component analysis (e.g. style overrides, missing-component rules) → **CLI with FIGMA_TOKEN**. Quick structure/style checks or annotation-aware flows → **MCP**. Offline/CI → **CLI with saved fixtures** (`save-fixture`). |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider splitting the guidance sentence for better readability.
The "When to use which" guidance packs three distinct use cases into a single sentence. Consider reformatting as a bulleted list for easier scanning:
**When to use which:**
- Accurate component analysis (e.g. style overrides, missing-component rules) → **CLI with FIGMA_TOKEN**
- Quick structure/style checks or annotation-aware flows → **MCP**
- Offline/CI → **CLI with saved fixtures** (`save-fixture`)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@README.md` at line 87, Split the single guidance sentence under the "When to
use which:" header into a short bulleted list for readability; replace the long
inline sentence with three bullets referencing the existing options: "CLI with
FIGMA_TOKEN" for accurate component analysis (style overrides, missing-component
rules), "MCP" for quick structure/style checks or annotation-aware flows, and
"CLI with saved fixtures (`save-fixture`)" for offline/CI use so each use case
is easy to scan.
- Remove internal term "Stage 4" from CLAUDE.md guidance - Add Screenshots row to SKILL.md comparison table - Align wording "reliable" → "accurate component analysis" in SKILL.md - Reformat README.md "When to use which" as bulleted list Made-with: Cursor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
CLI와 MCP 경로 간 기능 차이점을 문서화.
주요 차이점
변경 파일
CLAUDE.md— Architecture 섹션에 비교 테이블 + 사용 가이드 추가src/mcp/server.ts— docs tool의 setup 문서에 비교 테이블 추가Test plan
pnpm lint— cleanpnpm test:run— 302 tests passedCloses #20
🤖 Generated with Claude Code
Summary by CodeRabbit