Skills
.Work. You
Rest

component-alert

Community

Generate an accessible Alert with live regions

Software Engineering#accessibility#react#scss#aria-live#ui scaffolding#alert component
Authorshawn-sandy
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It eliminates the manual effort of writing accessible status/error/warning alerts with correct ARIA live behavior and consistent component structure.

Core Features & Use Cases

  • Accessible live-region notifications: Automatically sets role and aria-live semantics based on severity (polite for info/success/warning, assertive for error).
  • Dismiss and auto-hide behavior: Supports dismissible alerts, optional auto-dismiss timing, and pause-on-hover/focus to avoid cutting off screen reader users.
  • Consistent styling and theming: Generates TSX and SCSS using the fpkit/acss conventions and severity-based CSS variables/icons.
  • Use Case: Build a payment error banner that reads assertively to assistive technologies, includes an icon, and can be dismissed via a keyboard-accessible button.

Quick Start

Use the component-alert skill to generate an accessible fpkit Alert by calling it as instructed in the hint, including severity (info/success/warning/error), dismissible, aria-live politeness, and an optional leading icon.

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-alert
Download link: https://github.com/shawn-sandy/agentic-acss-plugins/archive/main.zip#component-alert

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.