skills.rest
shawn-sandy
shawn-sandyCOMMUNITY
Explore all skills by this author →
Website𝕏@shawnsandyGitHub

component-icon-button

Generate accessible React IconButton scaffolds with SCSS and XOR aria-label constraints.

Updated Apr 21, 2026
Search Tags:#typescript#accessibility#react#component generation#scss#aria-label#fpkit-acss
One-click install
npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill component-icon-button
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-icon-button
Source: https://github.com/shawn-sandy/agentic-acss-plugins/tree/main/plugins/acss-kit/skills/component-icon-button
Command: npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill component-icon-button

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python3 scripts/detect_target.py, python3 scripts/verify_integration.py, and includes references (resource) components.

What problem does it solve?

It solves the problem of building accessible icon-only buttons without missing required accessibility attributes or UI consistency.

Core Features & Use Cases

  • Scaffolds an fpkit-style IconButton: generates icon-button.tsx plus matching icon-button.module.scss into your project.
  • Type-level accessibility guardrails: enforces an XOR constraint so exactly one of aria-label or aria-labelledby is provided at compile time.
  • Responsive label behavior: supports an optional label that remains in the accessibility tree while being visually revealed only at larger viewports.
  • Handles dependencies automatically: ensures the Button dependency exists by generating component-button first (or aligning to the generation contract).

Quick Start

Invoke the skill with /kit-create and ask for an icon button, including the required aria-label, desired variant/size, and optional tooltip/label text.

Frequently Asked Questions about component-icon-button

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an accessible icon button in React that meets WCAG 2.2 AA standards?▼

To create an accessible icon button in React that meets WCAG 2.2 AA standards, you need a component enforcing an XOR constraint so exactly one of `aria-label` or `aria-labelledby` is provided at compile time, ensuring a proper accessible name.

How do I enforce an aria-label requirement for icon-only buttons in TypeScript?▼

You can enforce an aria-label requirement for icon-only buttons in TypeScript by applying type-level accessibility guardrails that require an XOR constraint, validating that exactly one of `aria-label` or `aria-labelledby` is passed before compilation succeeds.

What is the best way to add a responsive text label to an icon button in SCSS?▼

The best way to add a responsive text label to an icon button in SCSS is to support an optional `label` property that remains in the accessibility tree while being visually hidden and revealed only at larger viewports using module SCSS.

Do I need a standard Button component before generating an IconButton in fpkit?▼

Yes, you need a standard Button component before generating an IconButton in fpkit, because the tool automatically verifies project initialization and handles dependencies by ensuring the `Button` dependency exists or generating `component-button` first.

Can I generate matching SCSS styles when scaffolding a React icon button component?▼

Yes, you can generate matching SCSS styles when scaffolding a React icon button component, as the generation process produces both an `icon-button.tsx` file and a matching `icon-button.module.scss` file using fpkit/acss conventions.

Related Skills

Explore More Design & Creative Skills→
shawn-sandyshawn-sandy

component-button

Generate fpkit-style React Button components with SCSS and variant data attributes.

Community
Intermediate
codebar-agcodebar-ag
3

design

Standardize Blade UI components and styling across Laravel views.

Official
Advanced
superpollo02superpollo02

cosmic

Define neon-themed UI components with WCAG 2.2 AA accessibility and token-based styling.

Community
Intermediate
shawn-sandyshawn-sandy

component-icon

Generate an accessible React Icon component with inline SVG paths and ARIA behavior.

Community
Basic