Add skill for identifying icons from Figma designs

[jeff-phillips-18]

Summary

Adds a new /figma-icon-finder skill to the pf-figma plugin that helps developers identify PatternFly icons used in Figma mockups and
provides the correct React import statements.

• Analyzes Figma design screenshots using Claude's multimodal capabilities
• Matches visual icons to PatternFly React icon components
• Provides import statements and usage examples
• Supports both brief and detailed output formats
• Includes comprehensive reference documentation for 100+ common PatternFly icons

Changes

• New skill: plugins/pf-figma/skills/figma-icon-finder/SKILL.md
  • Workflow for analyzing Figma screenshots
  • User preferences for output format (brief vs. detailed)
  • Handling of component-managed icons (checkboxes, tree views, etc.)
  • Accessibility reminders and best practices
• Icon reference: plugins/pf-figma/skills/figma-icon-finder/references/common-icons.md
  • Categorized list of 100+ PatternFly icons
  • Visual descriptions for matching
  • Usage patterns and color guidelines

Usage

# Analyze a Figma screenshot
/figma-icon-finder @mockup.png                                                                                                               
                                                                                                                                             
# Analyze from path                                                                                                                          
/figma-icon-finder ~/Downloads/design.png                                                                                                    

Test plan

• Skill follows SKILL.md format conventions
• Clear descriptions and argument hints in frontmatter
• Workflow steps are well-documented
• Icon reference is comprehensive and organized
• Examples demonstrate both brief and detailed output formats
• Test with actual Figma mockup screenshots (manual testing recommended)

References

• Related to pf-figma plugin ecosystem
• Complements existing Figma design review capabilities
• Uses PatternFly icon naming conventions from https://www.npmjs.com/package/@patternfly/react-icons

🤖 Generated with https://claude.com/claude-code

Summary by CodeRabbit

• Documentation
  • Added Figma icon finder skill documentation with workflow for analyzing PatternFly icon usage from Figma screenshots and URLs.
  • Added PatternFly icons reference guide with categorized icon listings, sizing options, color guidelines, and visual matching tips.

[jpuzz0]

At 412 lines this is well over the 200-line guideline — could the output format templates (Brief and Detailed sections) be extracted to reference files like you did with common-icons.md? That'd bring the core instructions way down.

[jpuzz0]

allowed-tools and argument-hint in frontmatter are Claude Code specific — Cursor would ignore these. Same with the AskUserQuestion tool reference on line 120. Could these be rephrased to be tool-agnostic (e.g., "ask the user" instead of "use the AskUserQuestion tool")?

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

📝 Walkthrough

Walkthrough

Introduces documentation for a new figma-icon-finder skill that guides users through analyzing PatternFly icon usage from Figma screenshots or URLs. Includes interactive prompts for report customization and structured output with import statements, usage examples, and PatternFly icon reference guidelines.

Changes

Cohort / File(s)	Summary
Figma Icon Finder Skill Documentation plugins/pf-figma/skills/figma-icon-finder/SKILL.md, plugins/pf-figma/skills/figma-icon-finder/references/common-icons.md	Adds skill workflow definition and reference guide for analyzing PatternFly icons. SKILL.md outlines the end-to-end process including image analysis, icon matching, user prompts, and report generation. common-icons.md provides categorized icon listings with visual descriptions, sizing/color guidance, and visual matching tips.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and clearly summarizes the main change: adding a new skill for identifying PatternFly icons from Figma designs, which is the core objective of this PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[jpuzz0]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[jpuzz0]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 2

♻️ Duplicate comments (1)

plugins/pf-figma/skills/figma-icon-finder/SKILL.md (1)

4-5: ⚠️ Potential issue | 🟠 Major

Make the skill tool-agnostic (currently tied to Claude-specific capabilities/tools).

Line 4-5 (argument-hint, allowed-tools), Line 38 (“Since Claude is multimodal”), and Line 119+ (“use the AskUserQuestion tool”) couple behavior to a specific runtime. This breaks the requirement that the same skill works in both Claude Code and Cursor.

Suggested direction

-argument-hint: "[path/to/figma-screenshot.png] or [figma-url] or use `@file` for autocomplete"
-allowed-tools: Read, WebFetch, AskUserQuestion
+# Keep frontmatter tool-neutral; put optional invocation examples in body text.

-Read the image file at the provided path. Since Claude is multimodal, you will be able to see the image visually.
+Read the image file at the provided path and analyze it with available vision capabilities.

-**Always ask the user two questions** using the AskUserQuestion tool:
+**Always ask the user two questions** before generating the report:

As per coding guidelines, “Skills must be tool-agnostic — they run in both Claude Code and Cursor. Avoid referencing a specific tool.”

Also applies to: 38-39, 119-137

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@plugins/pf-figma/skills/figma-icon-finder/SKILL.md` around lines 4 - 5,
Update SKILL.md to remove runtime-specific references: replace the argument-hint
and allowed-tools entries so they don’t reference Claude-specific tooling
(change argument-hint to a generic example like "[path/to/figma-screenshot.png]
or [figma-url] or use `@file` for autocomplete" if needed but avoid runtime names,
and change allowed-tools to generic tool names such as "Read, WebFetch, AskUser"
or simply "Read, WebFetch, InteractivePrompt"). Also replace the sentence that
says "Since Claude is multimodal" with a neutral phrase like "In multimodal
runtimes" and change any occurrences of "AskUserQuestion" or other
Claude-specific tool names (lines ~119+) to the generic interactive tool name
used above (e.g., "AskUser" or "InteractivePrompt") so the skill is
tool-agnostic across runtimes.

🤖 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/pf-figma/skills/figma-icon-finder/references/common-icons.md`:
- Around line 7-153: Replace the five non-exported icon identifiers with the
correct PatternFly exports: change AddCircleIcon to AddCircleOIcon, DeleteIcon
to TrashIcon, SlidersIcon to SlidersHIcon, SparklesIcon to HandSparklesIcon, and
VolumeSlashIcon to either VolumeMuteIcon or VolumeOffIcon; update all
occurrences in the skill docs and reference table (e.g., the SKILL.md examples
and common-icons.md entries) and adjust any import statements/usages to import
these exact exported symbol names so generated code references only valid
PatternFly exports.

In `@plugins/pf-figma/skills/figma-icon-finder/SKILL.md`:
- Line 3: Update the SKILL.md frontmatter `description` so it includes an
explicit trigger context phrase (e.g., start with or append "Use when..." or
"Use when you need to...") so the skill loader can reliably detect when to
activate; edit the `description` string shown in this file (the PatternFly/Figma
icon capability description) to include that trigger language while keeping the
existing capability text intact.

---

Duplicate comments:
In `@plugins/pf-figma/skills/figma-icon-finder/SKILL.md`:
- Around line 4-5: Update SKILL.md to remove runtime-specific references:
replace the argument-hint and allowed-tools entries so they don’t reference
Claude-specific tooling (change argument-hint to a generic example like
"[path/to/figma-screenshot.png] or [figma-url] or use `@file` for autocomplete" if
needed but avoid runtime names, and change allowed-tools to generic tool names
such as "Read, WebFetch, AskUser" or simply "Read, WebFetch,
InteractivePrompt"). Also replace the sentence that says "Since Claude is
multimodal" with a neutral phrase like "In multimodal runtimes" and change any
occurrences of "AskUserQuestion" or other Claude-specific tool names (lines
~119+) to the generic interactive tool name used above (e.g., "AskUser" or
"InteractivePrompt") so the skill is tool-agnostic across runtimes.

🪄 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: CHILL

Plan: Pro

Run ID: 794efe52-e435-4cba-9b74-08921632a659

📥 Commits

Reviewing files that changed from the base of the PR and between 6518912 and 33ab7e2.

📒 Files selected for processing (2)

• plugins/pf-figma/skills/figma-icon-finder/SKILL.md
• plugins/pf-figma/skills/figma-icon-finder/references/common-icons.md

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# 1) Collect icon-like identifiers from the new skill docs
tmp_icons="$(mktemp)"
tmp_exports="$(mktemp)"

python - <<'PY' > "$tmp_icons"
import re, pathlib
files = [
  "plugins/pf-figma/skills/figma-icon-finder/references/common-icons.md",
  "plugins/pf-figma/skills/figma-icon-finder/SKILL.md",
]
icons=set()
for f in files:
    text=pathlib.Path(f).read_text(encoding="utf-8")
    for m in re.findall(r'`([A-Z][A-Za-z0-9]*Icon)`', text):
        icons.add(m)
for i in sorted(icons):
    print(i)
PY

# 2) Fetch latest exported icons typing surface from unpkg
# Try common declaration paths used by package builds.
url1="https://unpkg.com/@patternfly/react-icons@latest/dist/esm/icons/index.d.ts"
url2="https://unpkg.com/@patternfly/react-icons@latest/dist/js/icons/index.d.ts"
if curl -fsSL "$url1" -o "$tmp_exports"; then
  :
else
  curl -fsSL "$url2" -o "$tmp_exports"
fi

# 3) Parse exported names and diff
python - "$tmp_icons" "$tmp_exports" <<'PY'
import re, sys
icons_path, exports_path = sys.argv[1], sys.argv[2]
icons = {l.strip() for l in open(icons_path, encoding="utf-8") if l.strip()}
exports_txt = open(exports_path, encoding="utf-8").read()

# Handles forms like: export { default as PlusIcon } from './plus-icon';
exports = set(re.findall(r'default\s+as\s+([A-Z][A-Za-z0-9]*Icon)\b', exports_txt))

missing = sorted(icons - exports)
print("Total referenced icons:", len(icons))
print("Total exported icons parsed:", len(exports))
if missing:
    print("\nReferenced but NOT found in exports:")
    for m in missing:
        print(" -", m)
    sys.exit(2)
print("\nAll referenced icons were found in exports.")
PY

Repository: patternfly/ai-helpers

Length of output: 1942

---

🏁 Script executed (no clone):

curl -fsSL "https://registry.npmjs.org/@patternfly/react-icons" | jq -r '.["dist-tags"].latest'

Length of output: 36

---

🏁 Script executed:

#!/bin/bash
# Check the files referenced in the review comment
ls -lh plugins/pf-figma/skills/figma-icon-finder/references/common-icons.md 2>/dev/null || echo "File not found"
ls -lh plugins/pf-figma/skills/figma-icon-finder/SKILL.md 2>/dev/null || echo "File not found"

# Count icons in the common-icons.md file to verify the count
grep -o '`[A-Z][A-Za-z0-9]*Icon`' plugins/pf-figma/skills/figma-icon-finder/references/common-icons.md 2>/dev/null | sort -u | wc -l || echo "0"

Repository: patternfly/ai-helpers

Length of output: 285

---

🏁 Script executed (no clone):

#!/bin/bash
# Fetch the TypeScript definitions and examine the actual format
curl -fsSL "https://unpkg.com/@patternfly/react-icons@latest/dist/esm/icons/index.d.ts" 2>/dev/null | head -50

Length of output: 3725

---

🏁 Script executed (no clone):

#!/bin/bash
# Fetch complete TypeScript definitions and extract all icon exports
curl -fsSL "https://unpkg.com/@patternfly/react-icons@6.4.0/dist/esm/icons/index.d.ts" 2>/dev/null | \
  grep -o 'export { [A-Za-z0-9]*Icon,' | \
  sed 's/export { //' | sed 's/,//' | sort -u > /tmp/exported_icons.txt

wc -l /tmp/exported_icons.txt
head -20 /tmp/exported_icons.txt

Length of output: 352

---

🏁 Script executed:

#!/bin/bash
# Extract all icon references from skill files
grep -oh '`[A-Z][A-Za-z0-9]*Icon`' \
  plugins/pf-figma/skills/figma-icon-finder/references/common-icons.md \
  plugins/pf-figma/skills/figma-icon-finder/SKILL.md 2>/dev/null | \
  sed 's/`//g' | sort -u > /tmp/referenced_icons.txt

echo "Referenced icons:"
wc -l /tmp/referenced_icons.txt

echo -e "\nSample of referenced icons:"
head -20 /tmp/referenced_icons.txt

Repository: patternfly/ai-helpers

Length of output: 407

---

🏁 Script executed (no clone):

#!/bin/bash
# Get exported icons
curl -fsSL "https://unpkg.com/@patternfly/react-icons@6.4.0/dist/esm/icons/index.d.ts" 2>/dev/null | \
  grep -o 'export { [A-Za-z0-9]*Icon,' | \
  sed 's/export { //' | sed 's/,//' | sort -u > /tmp/exported_icons.txt

# Compare files (requires both to exist)
if [ -f /tmp/referenced_icons.txt ] && [ -f /tmp/exported_icons.txt ]; then
  echo "=== Icons referenced but NOT exported (missing) ==="
  comm -23 /tmp/referenced_icons.txt /tmp/exported_icons.txt || echo "None missing"
  
  echo -e "\n=== Statistics ==="
  echo "Referenced: $(wc -l < /tmp/referenced_icons.txt)"
  echo "Exported: $(wc -l < /tmp/exported_icons.txt)"
fi

Length of output: 199

---

🏁 Script executed (no clone):

#!/bin/bash
# Get all exported icons and search for similar names
curl -fsSL "https://unpkg.com/@patternfly/react-icons@6.4.0/dist/esm/icons/index.d.ts" 2>/dev/null | \
  grep -o 'export { [A-Za-z0-9]*Icon,' | \
  sed 's/export { //' | sed 's/,//' | sort -u | \
  grep -E '(Add|Delete|Slider|Sparkle|Volume)' | head -30

Length of output: 239

---

🏁 Script executed:

#!/bin/bash
# Find exact references to the 5 missing icons
for icon in "AddCircleIcon" "DeleteIcon" "SlidersIcon" "SparklesIcon" "VolumeSlashIcon"; do
  echo "=== $icon ==="
  grep -n "\`$icon\`" plugins/pf-figma/skills/figma-icon-finder/references/common-icons.md plugins/pf-figma/skills/figma-icon-finder/SKILL.md || echo "Not found"
done

Repository: patternfly/ai-helpers

Length of output: 941

---

Replace 5 non-exported icon names with actual PatternFly exports.

The skill references these icons that don't exist in @patternfly/react-icons@6.4.0 (1,748 total exports):

• AddCircleIcon → use AddCircleOIcon (lines 47, 49 in SKILL.md)
• DeleteIcon → use TrashIcon (line 49 in SKILL.md; already listed in common-icons.md)
• SlidersIcon → use SlidersHIcon (line 108 in common-icons.md)
• SparklesIcon → use HandSparklesIcon (line 151 in common-icons.md)
• VolumeSlashIcon → use VolumeMuteIcon or VolumeOffIcon (line 135 in common-icons.md)

The remaining 110 referenced icons are valid exports. Update the documentation examples and reference table to use only exported names, or generated code will break.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@plugins/pf-figma/skills/figma-icon-finder/references/common-icons.md` around
lines 7 - 153, Replace the five non-exported icon identifiers with the correct
PatternFly exports: change AddCircleIcon to AddCircleOIcon, DeleteIcon to
TrashIcon, SlidersIcon to SlidersHIcon, SparklesIcon to HandSparklesIcon, and
VolumeSlashIcon to either VolumeMuteIcon or VolumeOffIcon; update all
occurrences in the skill docs and reference table (e.g., the SKILL.md examples
and common-icons.md entries) and adjust any import statements/usages to import
these exact exported symbol names so generated code references only valid
PatternFly exports.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Add trigger context to the frontmatter description for reliable skill activation.

Line 3 describes capability, but it should explicitly include trigger language (e.g., “Use when …”) so the model can decide when to load this skill.

Proposed frontmatter tweak

-description: Identifies PatternFly icons used in Figma mockups and provides the correct import statements for React components. Works with any PatternFly-based application.
+description: Use when you need to identify PatternFly icons from a Figma screenshot/mockup and generate correct React imports and usage examples.

As per coding guidelines, “The description should include trigger contexts (e.g., 'Use when...') since the AI decides whether to load the skill based on the description alone.”

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@plugins/pf-figma/skills/figma-icon-finder/SKILL.md` at line 3, Update the
SKILL.md frontmatter `description` so it includes an explicit trigger context
phrase (e.g., start with or append "Use when..." or "Use when you need to...")
so the skill loader can reliably detect when to activate; edit the `description`
string shown in this file (the PatternFly/Figma icon capability description) to
include that trigger language while keeping the existing capability text intact.