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

[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")?