Skip to main content
affpapa.org
RU EN
rule

react-chakra-ui-cursorrules-prompt-file — Cursor rule

A Cursor rule for React projects using Chakra UI, covering component style, theming, responsive layouts, accessibility, and project structure.

Install into Cursor · Manually: put the files in place All methods and platforms ↓ 
.cursor/rules/react-chakra-ui-cursorrules-prompt-file.mdc
Open on GitHub

What react-chakra-ui-cursorrules-prompt-file does

This rule gives Cursor guidance for React work with Chakra UI. It favors functional components with hooks, places ChakraProvider at the application root, and uses Chakra UI components for the interface. It also calls for a custom theme, responsive styles based on Chakra UI breakpoints, and Chakra UI hooks where they fit.

The suggested layout puts components/, pages/, theme/, hooks/, and utils/ under src/. The theme area includes index.js, foundations/, and components/. The instructions ask for TypeScript, component composition, built-in accessibility support, semantic HTML through the as prop, color mode for dark mode, and Chakra UI layout components.

The rule uses globs: **/*, while alwaysApply: false keeps it from being active at all times. That setting matters when checking why its guidance is not present in every Cursor interaction.

What it helps with

  • build React components with Chakra UI
  • create a brand-specific Chakra UI theme
  • apply responsive breakpoint styles
  • organize source files under src/
  • add dark mode with Chakra UI color mode

Example prompts for the agent

  • Create a functional React component with hooks and Chakra UI components.
  • Set up the Chakra UI theme in src/theme/index.js and add responsive breakpoints.
  • Organize the code under src/components/, src/pages/, src/hooks/, and src/utils/.

How to install react-chakra-ui-cursorrules-prompt-file

Manually: put the files in place

.cursor/rules/react-chakra-ui-cursorrules-prompt-file.mdc

Frontmatter: description, globs, alwaysApply

Step by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules

Questions about react-chakra-ui-cursorrules-prompt-file

How do I install react-chakra-ui-cursorrules-prompt-file in Cursor?

Create .cursor/rules/react-chakra-ui-cursorrules-prompt-file.mdc and place the rule in that file.

What does react-chakra-ui-cursorrules-prompt-file do?

It guides Cursor while building React interfaces with Chakra UI. Its guidance covers components, theming, responsive design, accessibility, and folder layout.

Why is the rule not always active?

Its settings contain alwaysApply: false, so Cursor does not keep it active for every interaction. The globs: **/* pattern still covers every path when Cursor applies rules by glob.

Source text

react-chakra-ui-cursorrules-prompt-file.mdc · CC0-1.0 
---
description: "Cursor rules for React development with Chakra UI integration."
globs: **/*
alwaysApply: false
---
// React + Chakra UI .cursorrules

// Prefer functional components with hooks

const preferFunctionalComponents = true;

// Chakra UI best practices

const chakraUIBestPractices = [
  "Use ChakraProvider at the root of your app",
  "Utilize Chakra UI components for consistent design",
  "Implement custom theme for brand-specific styling",
  "Use responsive styles with the Chakra UI breakpoint system",
  "Leverage Chakra UI hooks for enhanced functionality",
];

// Folder structure

const folderStructure = `
src/
  components/
  pages/
  theme/
    index.js
    foundations/
    components/
  hooks/
  utils/
`;

// Additional instructions

const additionalInstructions = `
1. Use TypeScript for type safety with Chakra UI components
2. Implement proper component composition using Chakra UI
3. Utilize Chakra UI's built-in accessibility features
4. Use the 'as' prop for semantic HTML rendering
5. Implement dark mode using Chakra UI's color mode
6. Use Chakra UI's layout components for responsive design
7. Follow Chakra UI best practices for performance optimization
`;

© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules

Similar IDE rules

All IDE rules for Frontend and UI →
winui3 official github This rule guides GitHub Copilot on WinUI 3 and Windows App SDK patterns, from XAML bindings to window management. Use it when working on a Windows desktop app. ★ 40,451repo stars vue official github A Copilot instruction file that sets Vue 3 conventions: Composition API, <script setup>, reactivity, Pinia and Vue Router. Useful when the agent writes components your way. ★ 40,451repo stars tanstack-start-shadcn-tailwind official github A Copilot instruction file that pins the stack to TanStack Start, Shadcn/ui and Tailwind CSS, with Zod validating every external payload. ★ 40,451repo stars tailwind-v4-vite official github This rule guides GitHub Copilot through setting up Tailwind CSS v4 in a Vite project with the official Vite plugin. It also covers migration from v3. ★ 40,451repo stars svelte official github Guides GitHub Copilot on Svelte 5 and SvelteKit 2 standards, enforcing runes reactivity, TypeScript props, and safe SSR data loading. ★ 40,451repo stars power-bi-custom-visuals-development official github A GitHub Copilot rule that gives the agent patterns for building Power BI custom visuals with React, D3.js and TypeScript. ★ 40,451repo stars

From the same set210

react-mobx-cursorrules-prompt-file Cursor rule for building React apps with MobX. It configures state stores, hook conventions, and strict MobX patterns for code generation. ★ 41,024repo stars react-graphql-apollo-client-cursorrules-prompt-file This rule guides React work with GraphQL and Apollo Client in Cursor. Use it when a project needs consistent patterns for operations, hooks, and error states. ★ 41,024repo stars react-formengine-ai-form-builder-cursorrules-prompt-file A Cursor rule that has the agent build React forms from a screenshot, PDF, HTML or text description and return a FormEngine JSON schema plus a runnable App.tsx. ★ 41,024repo stars react-components-creation-cursorrules-prompt-file Guides React component creation in Cursor by checking for duplicates, building v0.dev generation links, and standardising shadcn/ui imports. ★ 41,024repo stars rails-cursorrules-prompt-file A Cursor rule file that tells the agent how to write Rails 8 code: generators, bin/dev, the Solid stack, Minitest and Hotwire. ★ 41,024repo stars r-cursorrules-prompt-file-best-practices Enforces R project structuring, tidyverse formatting standards, renv lockfiles, and package documentation guidelines in Cursor. ★ 41,024repo stars qwik-tailwind-cursorrules-prompt-file A Cursor rule that tells the agent how to write Qwik components with Tailwind CSS: lazy functions, signals, folder layout. Useful on a Qwik City project in TypeScript. ★ 41,024repo stars qwik-basic-cursorrules-prompt-file A Cursor rule that sets Qwik conventions for the agent: lazy functions with the $ suffix, signals, tasks, and a TypeScript plus Vite project layout. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor