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

component-card

Generates React Card components with compound subcomponents and optional keyboard interactivity for TypeScript projects.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about component-card

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

FAQPage Schema
How do I create an accessible React card component with TypeScript?▼

You can scaffold an accessible React card component by generating a TypeScript file with compound subcomponents like Card.Title and Card.Content, ensuring consistent semantic HTML structure without manual hand-authoring.

How do I make a whole React card clickable with keyboard navigation?▼

To make a React card clickable with keyboard navigation, you can enable an interactive variant that automatically adds role='button', tabIndex, and Enter/Space keyboard activation to the component's accessibility attributes.

What is the best way to scaffold compound components for a UI card in React?▼

Scaffolding compound UI card components involves generating a single canonical card.tsx file that structures Card, Card.Title, Card.Content, and Card.Footer slots together for flexible React layout composition.

Can I use SCSS modules to style generated React card components?▼

Yes, you can style generated React card components using SCSS modules. The Skill outputs a themable card.module.scss file using CSS variables for consistent look-and-feel aligned with FPKit ACSS styling standards.

Do I need to manually set up a UI foundation before generating a React card component?▼

You do not need to manually set up a UI foundation before generating a React card component, as the Skill verifies existing integration and automatically initializes the missing target UI foundation during the scaffolding process.

Related Skills

Explore More Design & Creative Skills→
timequitytimequity
6

frontend-react

Automate React frontend development with TypeScript, Tailwind CSS, Vite, Zustand, and TanStack Query.

Official
Advanced
alongor666alongor666
1

component-styling

Generate BEM-compliant responsive CSS templates for Vue components.

Community
Basic
shawn-sandyshawn-sandy

component-input

Generate accessible React Input components with ARIA state and validation.

Community
Intermediate
forgivesam168forgivesam168
2

frontend-patterns

Implement reusable React and Next.js component patterns for scalable frontend architectures.

Community
Intermediate