feat(design-mode): New design skills#67
Conversation
Enables teams to design directly on the Figma canvas with patternfly guardrails in place
📝 WalkthroughWalkthroughAdds a new write-focused Figma skill Changespf-design-mode skill + README updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Possibly related PRs
Suggested reviewers
🚥 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)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
The skill text repeated 6 times. Fixed now
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
plugins/figma/skills/design-mode/SKILL.md (1)
45-89: 🧹 Nitpick | 🔵 TrivialNitpick: Consider shifting some procedural wording toward expected outcomes.
Most sections are written as step-by-step “do X, then Y” implementation guidance. That’s helpful, but it slightly leans into procedure rather than “expected outcomes.” A small rewrite to emphasize outcomes (e.g., “ensure only approved PatternFly assets are used” / “validate hierarchy/layout after edits”) would better match the “outcomes not implementation” guideline, while keeping the guardrails.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@plugins/figma/skills/design-mode/SKILL.md` around lines 45 - 89, The current SKILL.md sections ("When to use", "Workflow", steps like "Resolve approved assets with pattern-first priority", "Handle page intent", "Make incremental edits", and "Guardrails") read as prescriptive step-by-step instructions; rewrite them to state expected outcomes instead (e.g., "Ensure only approved PatternFly assets are used", "Confirm hierarchy, alignment, spacing, and variant states are valid after edits", "Prefer pattern reuse over ad-hoc components", "Ask clarifying questions when requirements are ambiguous") while preserving the existing checks and priorities (pattern-first, approved sources, binding variables/tokens) and keeping references to `fileKey`/`nodeId`, new-page vs edit intent, and use of the `figma-use` skill; keep the same headings but convert procedural bullets into outcome-focused bullets and guardrails.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@plugins/figma/skills/design-mode/SKILL.md`:
- Around line 1-4: The SKILL.md frontmatter for the "design-mode" skill must
indicate this is a mutating/write skill; update the YAML frontmatter at the top
of plugins/figma/skills/design-mode/SKILL.md (where name: design-mode and
description are defined) to include disable-model-invocation: true so the skill
is marked as non-read-only and the runtime will disable model invocation for
write operations.
- Around line 10-16: The “Required prerequisite” text references “the
`figma-use` Claude skill”; remove the tool-specific “Claude” term and reword the
sentence to be tool-agnostic by referring to the prerequisite as the `figma-use`
skill (e.g., “load and follow the `figma-use` skill”), and keep the two bullet
rules unchanged (never call `use_figma` directly; pair `figma-use` with
`figma-generate-design` when creating broad screens) so SKILL.md no longer
mentions Claude-specific tooling.
---
Outside diff comments:
In `@plugins/figma/skills/design-mode/SKILL.md`:
- Around line 45-89: The current SKILL.md sections ("When to use", "Workflow",
steps like "Resolve approved assets with pattern-first priority", "Handle page
intent", "Make incremental edits", and "Guardrails") read as prescriptive
step-by-step instructions; rewrite them to state expected outcomes instead
(e.g., "Ensure only approved PatternFly assets are used", "Confirm hierarchy,
alignment, spacing, and variant states are valid after edits", "Prefer pattern
reuse over ad-hoc components", "Ask clarifying questions when requirements are
ambiguous") while preserving the existing checks and priorities (pattern-first,
approved sources, binding variables/tokens) and keeping references to
`fileKey`/`nodeId`, new-page vs edit intent, and use of the `figma-use` skill;
keep the same headings but convert procedural bullets into outcome-focused
bullets and guardrails.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 794bcae1-e0ab-4988-b902-7ac5cf030364
📒 Files selected for processing (1)
plugins/figma/skills/design-mode/SKILL.md
added disable-model-invocation: true
Removed duplicates and reference to Claude
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@plugins/figma/skills/design-mode/SKILL.md`:
- Around line 1-3: The skill is PatternFly-specific but currently named
generically; rename the skill directory and frontmatter to use the pf- prefix:
change the directory from plugins/figma/skills/design-mode/ to
plugins/figma/skills/pf-design-mode/, update any filenames if present, and
update the SKILL.md frontmatter `name: design-mode` to `name: pf-design-mode`
(ensure directory name, file name, and frontmatter name all match exactly so the
skill loader finds pf-design-mode).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: d9220b14-3a6d-44e8-aadb-70fea8c702a4
📒 Files selected for processing (1)
plugins/figma/skills/design-mode/SKILL.md
|
|
||
| ## Required prerequisite | ||
|
|
||
| Before any `use_figma` call, load and follow the `figma-use` skill. |
There was a problem hiding this comment.
The figma-use/generate skills are coming from Figma's repo. I wasn't sure which approach was better:
- tell them its a dependency with instructions to install or
- Just sharing the skills in our ai-helpers repo. I want to maintain the connection to the source so it gets all the updated.
Is there a difference in these approaches?
|
|
||
| ## Required prerequisite | ||
|
|
||
| Before any `use_figma` call, load and follow the `figma-use` skill. |
There was a problem hiding this comment.
The figma-use/generate skills are coming from Figma's repo. I wasn't sure which approach was better:
- tell them its a dependency with instructions to install or
- Just sharing the skills in our ai-helpers repo. I want to maintain the connection to the source so it gets all the updated.
Is there a difference in these approaches?
There was a problem hiding this comment.
♻️ Duplicate comments (1)
plugins/figma/skills/pf-design-mode/SKILL.md (1)
1-5:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winCritical: Frontmatter
namemust match directory name.The frontmatter declares
name: design-modebut the skill directory ispf-design-mode/. This mismatch will cause skill invocation failures. Thenamefield must bepf-design-modeto match the directory.🐛 Proposed fix
--- -name: design-mode +name: pf-design-mode description: Create and edit Figma design files using the Figma MCP workflow with PatternFly-approved libraries only. Use when the user asks to build, update, restyle, or restructure Figma frames/components and wants write operations. disable-model-invocation: true ---Based on learnings: The skill directory name, file name, and frontmatter
namemust all match. A mismatch causes confusing behavior when invoking the skill.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@plugins/figma/skills/pf-design-mode/SKILL.md` around lines 1 - 5, The frontmatter 'name' field in SKILL.md is incorrect (currently "design-mode") and must match the skill directory "pf-design-mode"; update the frontmatter line name: to name: pf-design-mode so the skill invocation name aligns with the directory and file naming conventions (check SKILL.md's top YAML block and change the value for name to pf-design-mode).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@plugins/figma/skills/pf-design-mode/SKILL.md`:
- Around line 1-5: The frontmatter 'name' field in SKILL.md is incorrect
(currently "design-mode") and must match the skill directory "pf-design-mode";
update the frontmatter line name: to name: pf-design-mode so the skill
invocation name aligns with the directory and file naming conventions (check
SKILL.md's top YAML block and change the value for name to pf-design-mode).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: a00cfae7-51f9-4d72-9109-7266cc22788a
📒 Files selected for processing (3)
plugins/figma/README.mdplugins/figma/skills/pf-design-mode/SKILL.mdplugins/figma/skills/pf-design-mode/references/approved-sources.md
| The `pf-design-mode` skill requires the official Figma plugin. Install it before using that skill: | ||
|
|
||
| ```bash | ||
| /plugin install figma |
There was a problem hiding this comment.
I'm not sure this will actually point to "the official Figma plugin" since we're not specifying the source of the plugin - it might assume our ai-helpers?
|
|
||
| ## Required prerequisites | ||
|
|
||
| This skill depends on two skills from the **official Figma plugin** (`claude-plugins-official/figma`). See the [plugin README](../../README.md) for install instructions. |
There was a problem hiding this comment.
The (claude-plugins-official/figma) identifier is Claude Code-specific — would Cursor users know what to do with that? Since you're already linking to the README for install instructions, could you drop the parenthetical and just say "the official Figma plugin"?
| The `pf-design-mode` skill requires the official Figma plugin. Install it before using that skill: | ||
|
|
||
| ```bash | ||
| /plugin install figma |
There was a problem hiding this comment.
Per Figma's MCP server guide, the Claude Code install is claude plugin install figma@claude-plugins-official — could you use that instead of /plugin install figma?
| See the [root README](../../README.md) for Cursor installation options. | ||
| Install this plugin from the Cursor marketplace or see the [root README](../../README.md) for options. | ||
|
|
||
| The `pf-design-mode` skill requires the official [Figma plugin for Cursor](https://cursor.com/marketplace). Install it from the Cursor marketplace before using that skill. |
There was a problem hiding this comment.
The Cursor install per Figma's guide is /add-plugin figma — could you use that instead of a generic marketplace link?
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@plugins/figma/README.md`:
- Around line 29-31: Update the fenced code block that shows the Cursor command
so it includes a language tag; locate the code fence containing "/add-plugin
figma" and change the opening ``` to ```bash so the block starts with ```bash
and ends with ``` to satisfy markdownlint MD040.
🪄 Autofix (Beta)
❌ Autofix failed (check again to retry)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 85c388a3-333b-4016-8d44-471f61081fcc
📒 Files selected for processing (2)
plugins/figma/README.mdplugins/figma/skills/pf-design-mode/SKILL.md
| ``` | ||
| /add-plugin figma | ||
| ``` |
There was a problem hiding this comment.
Nitpick: add a language tag to the Cursor command fence (Line 29).
This triggers markdownlint MD040 and is a quick docs-lint fix.
Suggested diff
-```
+```bash
/add-plugin figma</details>
<!-- suggestion_start -->
<details>
<summary>📝 Committable suggestion</summary>
> ‼️ **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.
```suggestion
🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 29-29: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@plugins/figma/README.md` around lines 29 - 31, Update the fenced code block
that shows the Cursor command so it includes a language tag; locate the code
fence containing "/add-plugin figma" and change the opening ``` to ```bash so
the block starts with ```bash and ends with ``` to satisfy markdownlint MD040.
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. Autofix skipped. No unresolved CodeRabbit review comments with fix instructions found. |
2 participants
Enables teams to design directly on the Figma canvas with patternfly guardrails in place
Summary by CodeRabbit
New Features
Documentation