Skills
.Work. You
Rest

component-icon

Community

Generate accessible SVG icon components fast

Design & Creative#typescript#accessibility#react#wcag#component scaffolding#aria-label#svg icons
Authorshawn-sandy
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Creates an accessible Icon component on demand, so developers can quickly add consistent, WCAG-aligned inline SVG icons without manually wiring aria attributes, sizing, or boilerplate.

Core Features & Use Cases

  • Accessible SVG output: Renders an inline <svg> for a chosen built-in icon name, supporting decorative usage via aria-hidden and standalone/informative usage via aria-label (with appropriate role).
  • Simple sizing and color control: Uses a size prop (default 16) and a color prop (default currentColor) so icons match surrounding typography and theme needs.
  • Project-scaffolding workflow: Writes the component to the target project (via the skill’s generation contract), then runs an integration verification pass to help confirm it works in context.

Quick Start

Ask the agent to create an accessible info icon component in your project named Icon with size 20 and decorative aria-hidden behavior by running /kit-add icon and specifying the icon name "info", size 20, and that it should be decorative.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: component-icon
Download link: https://github.com/shawn-sandy/agentic-acss-plugins/archive/main.zip#component-icon

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.