skills/better-icons/SKILL.md
Use when working with icons in any project. Provides CLI for searching 200+ icon libraries (Iconify) and retrieving SVGs. Commands: `better-icons search <query>` to find icons, `better-icons get <id>` to get SVG. Also available as MCP server for AI agents.
npx skillsauth add onmax/claude-config better-iconsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Search and retrieve icons from 200+ libraries via Iconify.
# Search icons
better-icons search <query> [--prefix <prefix>] [--limit <n>] [--json]
# Get icon SVG (outputs to stdout)
better-icons get <icon-id> [--color <color>] [--size <px>] [--json]
# Setup MCP server for AI agents
better-icons setup [-a cursor,claude-code] [-s global|project]
better-icons search arrow --limit 10
better-icons search home --json | jq '.icons[0]'
better-icons get lucide:home > icon.svg
better-icons get mdi:home --color '#333' --json
prefix:name - e.g., lucide:home, mdi:arrow-right, heroicons:check
lucide, mdi, heroicons, tabler, ph, ri, solar, iconamoon
| Tool | Description |
|------|-------------|
| search_icons | Search across all libraries |
| get_icon | Get single icon SVG |
| get_icons | Batch retrieve multiple icons |
| list_collections | Browse available icon sets |
| recommend_icons | Smart recommendations for use cases |
| find_similar_icons | Find variations across collections |
| sync_icon | Add icon to project file |
| scan_project_icons | List icons in project |
interface SearchIcons {
query: string
limit?: number // 1-999, default 32
prefix?: string // e.g., 'mdi', 'lucide'
category?: string // e.g., 'General', 'Emoji'
}
interface GetIcon {
icon_id: string // 'prefix:name' format
color?: string // e.g., '#ff0000', 'currentColor'
size?: number // pixels
}
interface GetIcons {
icon_ids: string[] // max 20
color?: string
size?: number
}
interface RecommendIcons {
use_case: string // e.g., 'navigation menu'
style?: 'solid' | 'outline' | 'any'
limit?: number // default 10
}
interface SyncIcon {
icons_file: string // absolute path
framework: 'react' | 'vue' | 'svelte' | 'solid' | 'svg'
icon_id: string
component_name?: string
}
All icons from https://api.iconify.design
development
Iterative writing loop. Gemini 3 Pro writes, Claude Agent SDK reviews autonomously. Use for blog posts, docs, technical content needing quality iteration.
documentation
Conversational PRD writer - interview, scope, write, then create Linear/GitHub issue. Use when planning a new feature or product requirement.
tools
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.
development
Use when working with VueUse composables - track mouse position with useMouse, manage localStorage with useStorage, detect network status with useNetwork, debounce values with refDebounced, and access browser APIs reactively. Check VueUse before writing custom composables - most patterns already implemented.