chakra-react-toolkit

Run accessibility audit on components (WCAG 2.1 AA checks)

Auto-fix common accessibility issues in components

Add Framer Motion or Chakra transitions to components

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

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

Generate sortable, paginated data tables with Chakra UI Table components

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

Generate custom icon components wrapping Chakra UI Icon with TypeScript support

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

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

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

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

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

Analyze responsive design across breakpoints

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

Generate accessibility tests using jest-axe or vitest-axe

Generate component tests (Vitest/Jest + Testing Library)

Generate visual snapshot tests for Chakra components

Extend/customize existing Chakra theme

Initialize Chakra theme with design tokens

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.

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

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.

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.

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.

This skill activates when implementing accessible React applications, ensuring WCAG 2.1 AA compliance, managing keyboard navigation, adding ARIA attributes, or leveraging Chakra UI's built-in accessibility features. It provides comprehensive guidance on focus management, screen reader support, semantic HTML, and testing for accessibility.

1 hook across 1 event