component-table

Community

Scaffold an accessible table component in minutes.

Authorshawn-sandy
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you quickly generate an accessible React table component with correct semantic markup so users with assistive technologies can navigate headers and relationships reliably.

Core Features & Use Cases

  • Accessible compound Table API: Generates a Table component with subcomponents (Caption, Head, Body, Row, HeaderCell, Cell) using native table elements.
  • Header scope support: Provides scope handling for <th> to support complex header configurations.
  • Design-system-ready styling: Writes the accompanying SCSS with tokenized CSS variables consistent with fpkit/acss conventions.
  • Usage-ready output: Produces table.tsx and table.module.scss directly in your project once the target UI foundation is present.

Quick Start

Run the command to add a table component, then describe your caption, column headers (including which ones are sortable, if any), and what each row looks like so the Skill can generate the component files in your project.

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

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.