acss-kit-test-component
CommunityPreview any acss-kit component instantly.
Design & Creative#accessibility#claude code#acss#variant testing#static html#component preview#scss theming
Authorshawn-sandy
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It solves the problem of needing a fast, accurate visual check for an acss-kit component without running a dev server, building React, or doing manual HTML conversions.
Core Features & Use Cases
- One-page static preview: Generates a self-contained HTML file that renders the component variants as static markup.
- Reference-driven rendering: Pulls CSS variables, the SCSS template (used verbatim as native CSS), and the usage-example variants from the component's reference documentation.
- Variant coverage for accessibility: Produces grouped sections for the default state and each variant family, including accessible-name stories for form controls and proper aria-disabled handling for disabled states.
Quick Start
Ask the AI to run the command “test the alert” to produce a browser-ready preview of the alert component with all documented variants.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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: acss-kit-test-component Download link: https://github.com/shawn-sandy/agentic-acss-plugins/archive/main.zip#acss-kit-test-component Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.