React Principles — Master Skill

You are the entry point for React Principles capabilities. Your job is to understand the user's intent and either:

1. Delegate to the appropriate sub-skill (preferred when intent is clear)
2. Execute the equivalent task yourself using the patterns documented in this skill
3. Ask a clarifying question when intent is ambiguous

When to invoke

• User mentions "React Principles" without specifying a sub-skill
• User asks for help with React patterns without naming the specific tool
• User asks "what can React Principles do for me?"
• User runs `/reactprinciples` directly

Routing table

Match user intent to one of these patterns. Each routes to a more specific sub-skill — read that sub-skill's `SKILL.md` for full instructions.

Routing process

1. Identify intent

Read the user's message and extract:

• Action verb — create, scaffold, review, audit, check, fix
• Subject — component, hook, store, form, query, code, recipe
• Context — file path mentioned, code pasted, framework mentioned

2. Match to a sub-skill

Use the routing table above. If multiple patterns match (e.g., user says "create a form with React Query"), pick the most specific route — in that case `reactprinciples-form` (form is the primary task; the mutation is a dependency the form skill will handle).

3. Announce the route

Tell the user which sub-skill applies before doing the work:

"Based on what you're asking, I'll follow the `reactprinciples-component` approach. Reading the existing components for reference..."

This sets expectations and lets the user redirect if you misread the intent.

4. Execute

If the matched sub-skill's `SKILL.md` is available in your skill folder (typical when installed via `npx skills add sindev08/react-principles-skills`), follow its instructions exactly.

If you don't have the sub-skill file available, follow the abbreviated guidance below for that route, and recommend the user install the full skill bundle.

When intent is ambiguous

If the user's message could match 2+ sub-skills equally, or doesn't match any clearly, ask:

"I can help with several React Principles tasks — which one matches what you're after?

• Review existing code against principles
• Scaffold a new component, hook, store, form, or query
• Audit a cookbook recipe (maintainer task)

Or describe what you're trying to do and I'll pick the right approach."

Abbreviated playbooks (fallback if sub-skill is unavailable)

These are quick references. The full sub-skill files have more depth — install them if you need to do this work often.

Review (fallback)

• Read target file(s)
• Check against: feature-sliced folders, TypeScript strictness (no `any`, no `!`), `cn()` usage, server vs client state taxonomy, Zod schema as source of truth, `createApiClient` for HTTP
• Report by severity (critical / major / minor)

Scaffolding (fallback)

• Always read an existing example first (`src/ui/Button.tsx` for components, `src/shared/hooks/useDebounce.ts` for hooks, etc.)
• Match conventions exactly
• Component: props extend HTMLAttributes, variants as `Record<>`, `cn()` for merging
• Hook: `use` prefix, stable return shape, colocated test
• Store: `'use client'` on file, `initialState` const, actions inside store
• Query: explicit `staleTime`, `placeholderData` for lists, `enabled` for dependent queries
• Form: Zod schema is source of truth, `zodResolver`, error messages in schema not JSX

What you should NOT do

• Don't try to do everything at once if the user asks vague questions — clarify first
• Don't reinvent the routing — if a sub-skill exists for the task, use it
• Don't pretend a sub-skill ran if you only did the fallback playbook — be honest about which path you took
• Don't promote internal-only skills (`reactprinciples-recipe`, `reactprinciples-audit-recipe`) to end users — those are for cookbook maintainers

Reference

• Cookbook: reactprinciples.dev
• Sub-skills: react-principles-skills on GitHub
• Install all skills: `npx skills add sindev08/react-principles-skills`