chakra-ui

Chakra UI v3 Reference

A skill covering the official Chakra UI v3 documentation. Look up the category from the task, and identify the target page in the category's README.md.

Directory structure

skills/chakra-ui/
  SKILL.md
  references/
    get-started/
      README.md
      ai-llms.md
      ai-mcp-server.md
      ai-skills.md
      changelog.md
      cli.md
      contributing.md
      env-iframe.md
      env-shadow-dom.md
      figma.md
      framework-next-app.md
      framework-next-pages.md
      framework-remix.md
      framework-storybook.md
      framework-tanstack-router.md
      framework-vite.md
      installation.md
      migration.md
      playground.md
    components/
      README.md
      concepts/
      layout/
      typography/
      buttons/
      date-time/
      forms/
      collections/
      overlays/
      disclosure/
      feedback/
      data-display/
      i18n/
      utilities/
    charts/
      README.md
      installation.md
      area-chart.md
      bar-chart.md
      bar-list.md
      bar-segment.md
      axes.md
      cartesian-grid.md
      donut-chart.md
      legend.md
      line-chart.md
      pie-chart.md
      radar-chart.md
      scatter-chart.md
      sparkline.md
      tooltip.md
      use-chart.md
    styling/
      README.md
      concepts/
      compositions/
      style-props/
    theming/
      README.md
      concepts/
      design-tokens/
      compositions/
      customization/
    blocks/
      README.md
      ai.md
      app-headers.md
      app-integrations.md
      app-navbars.md
      authentication.md
      banners.md
      blogs.md
      cards.md
      careers.md
      charts.md
      contacts.md
      cta.md
      dividers.md
      docs-changelog.md
      docs-code-block.md
      docs-example-preview.md
      docs-header.md
      docs-navbar.md
      docs-pagination.md
      docs-parameter-field.md
      docs-sidebar.md
      docs-step.md
      docs-toc.md
      faqs.md
      features.md
      feeds.md
      footers.md
      help-center.md
      heroes.md
      layouts.md
      logos.md
      marketing-headers.md
      marketing-navbars.md
      notifications.md
      onboarding.md
      org-switcher.md
      pricing.md
      product-categories.md
      product-grid.md
      product-reviews.md
      profiles.md
      property-panels.md
      settings.md
      sharing.md
      shopping-carts.md
      sidebars.md
      stats.md
      store-signup-offers.md
      teams.md
      testimonials.md
      webhooks.md
  samples/
    README.md
    provider-setup.md
    dark-mode.md
    responsive-styles.md
    theme-customization.md
    component-recipes.md
    chakra-factory.md
    form-field-input.md
    dialog.md
    toast.md
    table.md
  scripts/
    README.md
    install.md
    cli.md
    generate.md
    migration.md
    test.md
    mcp.md

Exploration procedure

Look up the category from the task, and identify the target page in the category's README.md:

1. Find the category corresponding to the task in the mapping table below
2. Of that category, references/{category}/README.md Refer to to identify the target page
3. Read the .md of the relevant page to check the details

Task → Category Mapping

Task	Category	Reference README
Installation, framework integration (Next.js/Remix/Vite/TanStack Router), AI integration (LLMs.txt/MCP Server/AI Skills), environment setup, CLI, migration	get-started	references/get-started/README.md
Component usage, Props, variants, layout, forms, overlays	components	references/components/README.md
Chart display, BarChart/LineChart/PieChart, useChart, data visualization	charts	references/charts/README.md
Style props, responsive design, dark mode, CSS variables, Chakra Factory	styling	references/styling/README.md
Design tokens, recipes, slot recipes, customization, defineConfig	theming	references/theming/README.md
UI block templates (hero, navbar, footer, etc., CHAKRA_PRO_API_KEY required)	blocks	references/blocks/README.md
Typical usage (Provider setup, dark mode, forms, dialogs, etc.)	samples	samples/README.md
Installation/CLI commands, code generation, migration, testing, MCP	scripts	scripts/README.md