In your IDE settings or at the start of every prompt, you now reference README.md file that instruct the AI on how to use them together.
README.md
This file acts as the primary entry point. It defines the core tech stack and file structure, and most importantly, it instructs the AI to use the other two files as part of its context.
# AI Coding Guidelines:
This repo uses Figma MCP. For instructions, for styles, mappings and design of components you MUST read and strictly apply the rules from all three of the following files:
1. This `README.md` file (for foundational rules).
2. `design-system-rules.md` (for how to use our components).
3. `figma-mcp-rules.md` (for the specific Figma-to-code process).---
## Core Principles & Best Practices
- Expert Persona: Act as an expert senior frontend developer writing clean, accessible, and maintainable TypeScript and React.
- Accessibility: All components must meet WCAG 2.1 AA standards.
- Performance: Optimize for performance. Code should have linear time/space complexity where possible.
- Testing: Suggest testable code.
---
## Core Technologies (React & Tailwind)
- Framework: React
- Language: TypeScript
- Styling:Tailwind CSS, configured via `tailwind.config.js`.
---
## File Structure & Naming Conventions
- Components: Place all new components in `src/components/`.
- Reusable UI Primitives:`src/components/ui/` (e.g., Button, Input).
- Feature-Specific Components: `src/components/feature/` (e.g., `UserProfileCard`).
- Component Files: Use PascalCase for filenames. Each component must be in its own folder. (e.g., `src/components/ui/Button/Button.tsx`)
- Hooks: Custom hooks go in `src/hooks/` and should be named with the `use` prefix (e.g., `useUserData.ts`).
design-system-rules.md
This is the detailed guide on how to correctly use your custom components from your-design-system.
# Design System Usage Rules
This document outlines how to correctly implement components and styles from `your-design-system`.
---
## Component Architecture & Styling
- Design System First: Always use existing components from the `your-design-system` package. Do not rebuild them.
- Layout Primitives: Always use layout components from `your-design-system` (e.g., ``, ``). Do not use raw `div`s with custom flexbox CSS.
- Styling with Tokens: Use Tailwind utility classes that are configured in our `tailwind.config.js`. Prefer our custom theme utilities (e.g., `bg-brand-primary`) over default Tailwind colors.
- Icons: Use the `` component from `your-design-system`, passing the appropriate icon name. Do not import raw SVGs.
- Props: Component props must be defined with a TypeScript `interface`.
---
## What to Avoid
- No Hardcoded Values: Do not use hardcoded strings (use translation files), URLs (use config files), or styling values (use tokens).
- No Inconsistent Naming: Follow the project's naming conventions.
- No Ignoring Errors: Do not ignore TypeScript errors.
- No Unnecessary DOM: Avoid unnecessary `div` wrappers.
figma-mcp-rules.md
This file is a specific, process-oriented set of instructions for the AI to follow whenever it’s translating a design from Figma.
# Figma to Code Workflow Rules
When generating code from a Figma design, follow this specific process:
1. Get Context First: Run `get_design_context` to fetch the structured representation of the Figma node.
2. Get Visual Reference: Run `get_screenshot` for a visual reference.
3. Implement: Only after you have both, begin implementation.
4. Translate the MCP output (React + Tailwind) into our project's conventions, strictly following the rules defined in `README.md` and `design-system-rules.md`.
5. Validate: Ensure the final UI has 1:1 visual parity with the Figma screenshot before completing.
For a technical starting point, Figma’s developer documentation provides an excellent guide on how to add custom rules ↗, including example prompts you can use to generate a baseline for these files.