Skills
.Work. You
Rest

component-card

Community

Generate an accessible Card component

Design & Creative#typescript#accessibility#keyboard navigation#react#component generation#compound components#scss
Authorshawn-sandy
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Creates a production-ready accessible Card component for React so developers don’t have to repeatedly hand-author consistent structure, slots, semantics, keyboard behavior, and themable styles.

Core Features & Use Cases

  • Compound component scaffolding: generates Card, Card.Title, Card.Content, and Card.Footer in a single card.tsx file.
  • Interactive variant support: adds role="button", tabIndex, and Enter/Space keyboard activation when interactive is enabled.
  • FPKit ACSS-aligned styling: outputs a themable card.module.scss using CSS variables for consistent look-and-feel across a project.

Quick Start

Ask the skill to scaffold a Card with a header (title), body (content), and footer, and specify whether the whole card should be interactive.

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

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.