One command. Your AI already knows the rules.
Run npx react-principles init and your project is wired into React Principles: your AI follows the patterns, looks up recipes, and pulls components on its own. No copy-paste, no keeping docs in sync.
Existing project
Make it React Principles–aware in one step.
npx react-principles initNew project
Scaffold a starter that ships wired-in from the first commit.
npx react-principles create my-appBoth wire up everything below — automatically:
AGENTS.md
The principles, so any AI assistant follows them.
.mcp.json
The MCP server — live recipe and component lookup.
Skills
Invocable review and scaffolding commands.
autorenewAlways current — recipe updates reach your tools automatically, no re-sync.
Under the hood
Prefer to wire it up yourself?
init and create configure all of this for you. Here's each piece — connect them manually, or go deeper on how they work.
MCP Server
Live connection
Add the remote MCP server once — your AI looks up recipes by itself in any conversation. Always current, token-efficient.
Connect belowarrow_forwardSkills
Invocable commands
10 Agent Skills following the open standard. Works with Claude Code, Cursor, and any AI tool that supports skills.sh.
View skills belowarrow_forwardllms.txt
Drop-in AI context
The cookbook as AI-readable markdown. Two versions: compact for quick reference, full for deep RAG context.
See files belowarrow_forwardMCP Server
Live connection to the cookbook and UI Kit
A remote Model Context Protocol server serving both the cookbook and the UI Kit. Connect once and your AI can look up recipes and pull component source on demand — no copy-paste, always in sync with the published site.
MCP is an open protocol — this server works with any MCP client. Pick yours:
Run in your terminal:
claude mcp add --transport http reactprinciples https://www.reactprinciples.dev/api/mcplist_recipesAll published recipes with slugs, categories, and descriptions.
search_recipesRanked keyword search across titles, rules, and principles.
get_recipeFull recipe as markdown — principle, rules, pattern, implementations.
list_componentsNewAll UI Kit components with target dir, description, and dependencies.
search_componentsNewRanked keyword search across component names and descriptions.
get_componentNewFull component source (matches the CLI), install command, and deps.
Skills
Invocable commands
Install once, invoke when needed. Each skill encodes a workflow — from reviewing code to scaffolding components — following React Principles patterns exactly.
Install all skills with one command:
npx skills add sindev08/react-principles-skillsOr manually copy any SKILL.md from the react-principles-skills repo into ~/.claude/skills/.
/reactprinciplesMasterUmbrella skill — routes intent to the right sub-skill (review, scaffold, audit).
/reactprinciples-reviewReviewReview React/TypeScript code against 13 principle categories. Flags violations with reasoning and fixes.
/reactprinciples-folder-structureScaffoldingScaffold a feature-sliced folder layout (components, hooks, stores, data).
/reactprinciples-componentScaffoldingScaffold a UI component — props extending HTMLAttributes, Record variants, cn() for class merging.
/reactprinciples-hookScaffoldingScaffold a custom hook with proper naming, stable return shape, and colocated test.
/reactprinciples-storeScaffoldingScaffold a Zustand store with selectors, actions, reset, and 'use client' boundary.
/reactprinciples-queryScaffoldingScaffold a React Query hook (list, detail, search, or mutation) with staleTime and enabled.
/reactprinciples-formScaffoldingScaffold a React Hook Form + Zod form. Shares schemas between create and edit via .omit/.pick.
/reactprinciples-recipeInternalDraft a new cookbook recipe in the standard structure. (Cookbook maintainer skill.)
/reactprinciples-audit-recipeInternalAudit an existing recipe for accuracy against the codebase. (Cookbook maintainer skill.)
llms.txt
Drop-in AI context
The cookbook compiled into AI-readable markdown. Auto-rebuilds on every publish. No setup — just point your AI at the URL.
Compact
~5K tokensPrinciples + rules only, no code. Drop into any AI context window for quick principle-aware help.
Best for: quick chat sessions, lightweight rules in Cursor.
Full
~17K tokensEvery recipe with pattern code and Next.js + Vite implementations. Suitable for RAG, fine-tuning, or long-form briefing.
Best for: custom AI assistants, retrieval pipelines, deep context.
Use cases
How developers use this
Practical patterns for getting AI tools aligned with React Principles.
Code review in editor
Invoke "/reactprinciples-review" in Claude Code or Cursor to audit your changes against documented patterns before opening a PR.
Scaffold features faster
Use "/reactprinciples-component", "/reactprinciples-query", or "/reactprinciples-form" to generate code that already follows the conventions — no boilerplate copy-paste.
Project-aware chat context
Paste llms.txt into Claude Projects, ChatGPT custom GPTs, or Cursor rules so every conversation stays principle-aligned.
Custom AI assistants
Use llms-full.txt as RAG corpus or fine-tuning data to build a React Principles assistant for your team.
Ready to install?
One command. Works across Claude Code, Cursor, and any tool supporting Agent Skills.
npx skills add sindev08/react-principles-skills