chakra-react-toolkit

Run accessibility audit on components (WCAG 2.1 AA checks)

a11y-fix

/a11y-fix

Add Animation to Component

Auto-fix common accessibility issues in components

/add-animation

Add Framer Motion or Chakra transitions to components

create-card

/create-card

Generate Card components including stat displays and info cards with Chakra UI

create-component

/create-component

Generate a generic Chakra UI component with TypeScript, variants, and prop interfaces

create-data-table

/create-data-table

Generate sortable, paginated data tables with Chakra UI Table components

create-form

/create-form

Generate accessible forms with Chakra form controls, validation patterns, and TypeScript

create-icon

/create-icon

Generate custom icon components wrapping Chakra UI Icon with TypeScript support

create-layout

/create-layout

Generate page layouts using Chakra's Stack, Grid, Flex, and Container components

create-loader

/create-loader

Generate loading components including spinners, skeletons, and progress indicators with Chakra UI

create-modal

/create-modal

Generate Modal, Drawer, or AlertDialog with Chakra UI and focus management

create-nav

/create-nav

Generate navigation components including menus, breadcrumbs, and tabs with Chakra UI

create-toast

/create-toast

Generate toast notifications and alert systems using Chakra UI's useToast hook

responsive-check

/responsive-check

Analyze responsive design across breakpoints

Setup Icon Library

/setup-icons

Configure icon library (Chakra Icons, React Icons, Lucide, Heroicons)

test-a11y

/test-a11y

Generate accessibility tests using jest-axe or vitest-axe

test-component

/test-component

Generate Visual Snapshot Tests

Generate component tests (Vitest/Jest + Testing Library)

/test-snapshot

Generate visual snapshot tests for Chakra components

theme-extend

/theme-extend

Extend/customize existing Chakra theme

theme-setup

/theme-setup

Accessibility Audit Report

Initialize Chakra theme with design tokens

Agents

/accessibility-reviewer

all tools

You are an accessibility auditing specialist focused on ensuring React components built with Chakra UI meet WCAG 2.1 AA compliance standards and follow best practices for inclusive design.

Chakra Component Generator

/chakra-component-generator

all tools

You are a Chakra UI component generation specialist focused on creating high-quality, accessible, and reusable React components using Chakra UI.

Skills

Chakra UI Component Patterns

Chakra UI Theming and Design Tokens

This skill activates when working with Chakra UI components, building responsive layouts, composing component hierarchies, or implementing design systems with Chakra UI v2. It provides comprehensive guidance on component composition, responsive props, style props, and common patterns for building accessible, maintainable React applications.

Component Testing with Chakra UI

This skill activates when customizing Chakra UI themes, implementing design systems, configuring color modes, extending component styles, or working with design tokens. It provides comprehensive guidance on theme architecture, semantic tokens, global styles, and dark mode implementation for Chakra UI v2 applications.

React Accessibility with Chakra UI

This skill activates when writing tests for Chakra UI components, setting up React Testing Library with Chakra, testing user interactions, handling async operations, or ensuring accessibility with jest-axe. It provides comprehensive guidance on testing patterns that work with both Vitest and Jest, supporting modern React testing practices.