skill:icon-design – Semantically Appropriate Icon Selection

Version: 1.0.0

Purpose

Select semantically appropriate icons for websites and applications using Lucide, Heroicons, or Phosphor icon libraries. This skill maps UI concepts to the best-fitting icons, generates framework-specific integration code (React, Vue, HTML), enforces consistent sizing and styling, and applies tree-shaking patterns for optimal bundle size.

File Structure

skills/icon-design/
├── SKILL.md (this file)
└── examples.md

Interface References

• Context: Loaded via ContextProvider Interface
• Memory: Accessed via MemoryStore Interface
• Shared Patterns: Shared Loading Patterns
• Schemas: Validated against context_metadata.schema.json and memory_entry.schema.json

Mandatory Workflow

IMPORTANT: Execute ALL steps in order. Do not skip any step.

Step 1: Initial Analysis

• Gather UI concepts and features that need icons
• Identify the target framework (React, Vue, HTML, React Native)
• Determine the preferred icon library (Lucide, Heroicons, Phosphor) or recommend one
• Note any existing icon conventions in the project (size, stroke width, color scheme)
• Determine project name for memory lookup

Step 2: Load Memory

Follow Standard Memory Loading with skill="icon-design" and domain="engineering".

• Load icon_mappings.md for previously mapped concept-to-icon associations
• Load library_preferences.md for project-specific library choices and styling conventions

Step 3: Load Context

Follow Standard Context Loading for the engineering domain. Stay within the file budget declared in frontmatter.

Step 4: Map Concepts to Icons

• For each UI concept, find the semantically best icon from the chosen library
• Provide 2–3 alternative icons per concept for user selection
• Consider cultural and universal meaning (e.g., floppy disk for “save” may not resonate universally)
• Ensure visual consistency across the icon set (matching style weight, fill vs outline)
• Document the rationale for each primary recommendation

Step 5: Generate Integration Code

• Produce framework-specific code for the selected icons:
  • React: Named imports from the library package, JSX component usage
  • HTML: SVG references, CDN links, or sprite sheet includes
  • Vue: Component imports and template usage
  • React Native: Library-specific native component imports
• Include sizing, color, and stroke-width props for consistency
• Generate a shared icon wrapper component if the project uses many icons

Step 6: Optimize for Production

• Add tree-shaking patterns to ensure only used icons are bundled
• Recommend dynamic imports for large icon sets with code splitting
• For HTML projects, generate SVG sprite sheets to reduce HTTP requests
• Verify that import patterns support dead-code elimination
• Note bundle size impact estimates where possible

Step 7: Generate Output

• Save output to /claudedocs/icon-design_{project}_{YYYY-MM-DD}.md
• Follow naming conventions in ../OUTPUT_CONVENTIONS.md
• Include: icon mapping table, integration code snippets, optimization notes

Step 8: Update Memory

Follow Standard Memory Update for skill="icon-design". Store any newly learned patterns, conventions, or project insights.

• Update icon_mappings.md with new concept-to-icon associations
• Update library_preferences.md with confirmed library choice, sizing, and style settings

Compliance Checklist

Before completing, verify:

• All mandatory workflow steps executed in order
• Standard Memory Loading pattern followed (Step 2)
• Standard Context Loading pattern followed (Step 3)
• Icon alternatives provided for each concept (Step 4)
• Framework-specific integration code generated (Step 5)
• Tree-shaking and optimization patterns included (Step 6)
• Output saved with standard naming convention
• Standard Memory Update pattern followed (Step 8)

Version History