Skills
.Work. You
Rest

component-list

Community

Scaffold an accessible list component

Software Engineering#accessibility#react#semantic html#ui components#scss#fpkit acss#list variants
Authorshawn-sandy
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you quickly add a semantic, accessible list component to your React project without manually wiring up correct markup and accessibility workarounds.

Core Features & Use Cases

  • Accessible semantic list rendering: Generates an ul, ol, or dl wrapper that preserves native list semantics for screen readers.
  • Configurable layout variants: Supports inline, numbered, and none styling patterns, including marker behavior via SCSS variables.
  • Safari/VoiceOver workaround: Documents and supports explicitly passing role="list" when list-style: none would otherwise cause assistive technologies to miss list semantics.
  • Compound API structure: Outputs a compound component with List and List.ListItem to match ordered, unordered, and definition list item types (li, dt, dd).

Quick Start

Ask an AI to run the plugin to generate a list component for your fpkit/acss React codebase with the behavior you want (ordered, inline, or unstyled with role restoration).

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

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.