auto_awesomeAI Corpus

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.

NewOne-command setup

Existing project

Make it React Principles–aware in one step.

npx react-principles init

New project

Scaffold a starter that ships wired-in from the first commit.

npx react-principles create my-app

Both wire up everything below — automatically:

description

AGENTS.md

The principles, so any AI assistant follows them.

hub

.mcp.json

The MCP server — live recipe and component lookup.

terminal

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.

hub

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_forward

terminal

Skills

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_forward

description

llms.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_forward

MCP 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.

smart_toy

Your AI

Claude, Cursor, Copilot, GPT — any MCP client

arrow_forward

hub

MCP Server

reactprinciples.dev/api/mcp — 6 tools, live

arrow_forward

menu_book

Cookbook + UI Kit

Recipes and components, always current

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/mcp

list_recipes

All published recipes with slugs, categories, and descriptions.

search_recipes

Ranked keyword search across titles, rules, and principles.

get_recipe

Full recipe as markdown — principle, rules, pattern, implementations.

list_componentsNew

All UI Kit components with target dir, description, and dependencies.

search_componentsNew

Ranked keyword search across component names and descriptions.

get_componentNew

Full 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.

extension

Option A: Claude Code Plugin

Installs all 10 skills and auto-registers the remote MCP server in one pass.

/plugin marketplace add sindev08/react-principles-skills
/plugin install reactprinciples@react-principles
/reload-plugins

terminal

Option B: skills.sh (Universal)

Installs skills into any agentic CLI or editor (Cursor, Copilot, OpenCode).

npx skills add sindev08/react-principles-skills

Capability	npx skills add	Claude Code Plugin
Invocable skills (review, scaffold)	Yes (10 skills)	Yes (10 skills)
MCP server auto-registered	No (manual .mcp.json)	Yes (automatic)
Tool compatibility	Cursor, Copilot, OpenCode, 75+ tools	Claude Code only
Best for	Multi-editor or non-Claude workflows	Native Claude Code developers

How Plugin Execution Works

1. Prompt Match

User asks “bikin store cart pakai zustand” ➔ AI auto-selects reactprinciples-store.

2. Live Recipe Pull

Skill queries MCP server get_recipe for client-state conventions in real time.

3. Pattern Conformance

Generates production code matching React Principles without copy-paste or hallucinated APIs.

warningDuplicate Install Warning

Do not install both methods. If you previously ran npx skills add, remove it before enabling the plugin so skills don't appear twice in listing.

forumNatural Trigger Phrasing

Skills auto-trigger on everyday phrasing (e.g. “review component ini”, “buat dialog modal”). You do not need to prefix with slash commands.

cloud_syncOutbound Requests & Privacy

The MCP server only queries reactprinciples.dev/api/mcp for public recipes/components. Zero repository code, secrets, or prompt contexts are ever sent to our servers.

verified_userZero Hooks, Zero Rules

The plugin is entirely non-invasive: no git pre-commit hooks, no modified project configs, and no background enforcement. It only delivers skills and MCP tools.

/reactprinciples-audit-recipeInternal

Audit an existing cookbook recipe for accuracy against the real codebase. Internal maintainer skill.

Manual invoke only — not auto-triggered

/reactprinciples-componentScaffolding

Scaffold a React UI component following React Principles anatomy patterns — props extending HTMLAttributes, variants as Record constants, cn() for class merging.

/reactprinciples-folder-structureScaffolding

Scaffold a feature-sliced folder structure for a new feature — components, hooks, stores, data with barrel index.ts files.

/reactprinciples-formScaffolding

Scaffold a React Hook Form + Zod form following React Principles form-validation recipe — Zod schema, zodResolver, error display, mutation integration.

/reactprinciples-hookScaffolding

Scaffold a custom React hook following React Principles custom-hooks recipe — use prefix, typed return shape, colocated test.

/reactprinciples-queryScaffolding

Scaffold a TanStack Query hook following React Principles server-state recipe — staleTime, placeholderData, enabled, queryKeys factory.

/reactprinciples-recipeInternal

Draft a new React Principles cookbook recipe in the standard structure. Internal maintainer skill.

Manual invoke only — not auto-triggered

/reactprinciples-reviewReview

Review React/TypeScript code against the React Principles cookbook — flags violations with severity, reasoning, and concrete fixes. Read-only.

/reactprinciples-storeScaffolding

Scaffold a Zustand store following React Principles client-state recipe — typed store, selectors, useShallow, reset action, colocated test.

/reactprinciplesMaster

Master entry point for React Principles — routes intent to the right sub-skill. Use /reactprinciples to invoke manually.

Manual invoke only — not auto-triggered

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 tokens

Principles + rules only, no code. Drop into any AI context window for quick principle-aware help.

Best for: quick chat sessions, lightweight rules in Cursor.

Open compact versionopen_in_new

Full

~17K tokens

Every 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.

Open full versionopen_in_new

Use cases

How developers use this

Practical patterns for getting AI tools aligned with React Principles.

rule

Code review in editor

Invoke "/reactprinciples-review" in Claude Code or Cursor to audit your changes against documented patterns before opening a PR.

construction

Scaffold features faster

Use "/reactprinciples-component", "/reactprinciples-query", or "/reactprinciples-form" to generate code that already follows the conventions — no boilerplate copy-paste.

psychology

Project-aware chat context

Paste llms.txt into Claude Projects, ChatGPT custom GPTs, or Cursor rules so every conversation stays principle-aligned.

all_inclusive

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.

/plugin marketplace add sindev08/react-principles-skills

View skills repoopen_in_new Browse the cookbook