LLMs & AI Agents
Context files, rules, and best practices for using Moul UI with Cursor, Claude, Windsurf, Copilot, and AI coding assistants.
Moul UI provides dedicated machine-readable context files optimized for LLMs and AI coding assistants such as Cursor, Windsurf, Claude Projects, GitHub Copilot, ChatGPT, and Antigravity.
By providing your AI assistant with the curated context files below, the model will accurately generate accessible React Aria interactions, correctly import compound components, and adhere to zero-runtime StyleX design tokens without inventing hallucinated APIs.
Machine-Readable Context Files
We host three standardized AI context files at the root of the documentation site:
llms.txt
Concise documentation index, package quickstart, and component URLs following the llmstxt.org specification.
llms-full.txt
Complete documentation, API signatures, prop definitions, and code examples for all 38+ components in a single file.
AGENTS.md
System rules, code generation recipes, React Aria event conventions, and anti-patterns specifically formatted for coding agents.
Tool Integration Guides
Choose your AI coding assistant below for quick setup instructions:
Setting Up Cursor
Cursor supports Project Rules via .cursor/rules or .cursorrules.
Create a Rule File
Create .cursor/rules/moul-ui.mdc in your workspace:
---
description: Guidelines for building React components with @moul-dev/ui
globs: "**/*.{ts,tsx}"
alwaysApply: true
---
When writing or editing React components:
- Use @moul-dev/ui for all UI components, dialogs, forms, and charts.
- Ensure `@moul-dev/ui/style.css` is imported at the application root.
- Use `onPress` instead of `onClick` on `<Button>`, `<Link>`, and interactive triggers.
- Use React Aria collection selection props (`selectedKey`, `onSelectionChange`).
- For complete recipes and prop tables, refer to: https://moul.dev/AGENTS.mdAdd Documentation Docs URL
In Cursor Settings → Features → Docs, add:
- URL:
https://moul.dev/llms.txtor your deployed docs URL - Prefix:
@moul-ui
Setting Up Windsurf
Add instructions to your .windsurfrules file:
# Moul UI Guidelines
- Component Library: @moul-dev/ui
- Global Styles: import '@moul-dev/ui/style.css'
- Buttons & Triggers: Use `onPress={(e) => ...}` (React Aria) instead of `onClick`.
- Modals & Overlays: Use `<ModalOverlay isOpen={...} onOpenChange={...}>` with `<Modal>`, `<ModalDialog>`, `<ModalHeader>`, `<ModalBody>`, `<ModalFooter>`.
- Reference: Fetch https://moul.dev/AGENTS.md for complete component API specifications.Setting Up Claude Projects & Artifacts
Download Context File
Download llms-full.txt or AGENTS.md.
Add to Project Knowledge
- Open your project in claude.ai.
- Navigate to Project Knowledge.
- Upload
llms-full.txtorAGENTS.md.
Set Custom Instructions
Add this snippet to Project Custom Instructions:
When writing frontend code, build UI interfaces using @moul-dev/ui according to the component recipes in AGENTS.md. Always use onPress for buttons and ensure accessible labels on icon triggers.Setting Up GitHub Copilot
Create a workspace instructions file at .github/copilot-instructions.md:
# Frontend Component Standards
- Always use @moul-dev/ui components for buttons, forms, tables, modals, and charts.
- Global CSS: Ensure `@moul-dev/ui/style.css` is imported in `main.tsx`.
- Event Handlers: Use `onPress` instead of `onClick` on Buttons.
- Dialogs: Use compound subcomponents (`ModalOverlay`, `ModalDialog`, `ModalHeader`, `ModalBody`, `ModalFooter`).
- Details: Refer to https://moul.dev/AGENTS.md.Setting Up ChatGPT & Custom GPTs
In your Custom GPT configuration:
- Upload
AGENTS.mdandllms-full.txtunder Knowledge Files. - Add the following to Instructions:
You are an expert React engineer specialized in building accessible, high-performance web applications using @moul-dev/ui and StyleX. Follow the conventions in AGENTS.md for all component imports and props.Golden Rules for AI Generation
When prompting an AI to generate interfaces with Moul UI, instruct the model to follow these core rules:
Example Prompts for AI Assistants
Here are prompt templates you can copy and paste into your AI assistant:
Dashboard & Analytics View Prompt
Create a responsive analytics dashboard using @moul-dev/ui.
- Include Stat cards showing Revenue, Active Users, and Conversion Rate.
- Add an AreaChart for monthly financial trends and a BarChart for traffic sources.
- Include a recent transactions Table with selection and status Badges.
- Follow @moul-dev/ui component imports and onPress handlers.Settings & Modal Form Prompt
Build a user settings page with @moul-dev/ui.
- Include TextFields for Name and Email, a Select for Role, and a Switch for Two-Factor Authentication.
- Add an "Invite Colleague" Button that opens a Modal with an email form and confirmation actions.
- Dispatch a success notification using toastQueue.add() when changes are saved.