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

component-table

Generate an accessible React Table component with TypeScript and SCSS files.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about component-table

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

FAQPage Schema
How do I generate an accessible React table component with TypeScript?▼

To scaffold an accessible React table, this Skill generates a TypeScript component with subcomponents like Caption, Head, and Row, ensuring correct header semantics and reliable navigation for assistive technologies.

What makes a React data table accessible for screen readers?▼

An accessible React data table uses native table elements, caption support, and th scope attributes to ensure screen readers can reliably navigate headers and data relationships.

Can I use this table component with my existing SCSS styling variables?▼

Yes, the Skill generates a table.module.scss file with tokenized CSS variables following fpkit and acss conventions, allowing you to integrate design-system-ready styling with your existing SCSS setup.

Do I need any external dependencies to scaffold this React table?▼

No external dependencies are required to generate the component, but you need an existing React and TypeScript project with a UI foundation to place the generated table.tsx and table.module.scss files.

How do I add a caption and sortable headers to a static React table?▼

You describe your caption, column headers, and sortable columns when running the Skill, which generates the React table component with the appropriate caption element and header scope handling for your static data.

Related Skills

Explore More Software Engineering Skills→
staruhubstaruhub
662

ui-analyzer

Analyze UI design screenshots to generate React TypeScript components with Tailwind CSS.

Community
Intermediate
TechsioCZTechsioCZ
2

table-usage

Build semantic data tables with @techsio/ui-kit Table components.

Official
Intermediate
aaltaayaaltaay

ckm:ui-styling

Build accessible React UI components with shadcn/ui, Tailwind, and Radix primitives.

Community
Advanced
Ali1razAli1raz
1

tanstack-table

Create dynamic React tables with sorting, filtering, and pagination using @tanstack/react-table.

Community
Intermediate