Skip to content

FE hyperstack: add react-pro-coder skill - #138

Merged
KailasMahavarkar merged 1 commit into
mainfrom
f-FE-hyperstack-react-pro-coder-skill
Sep 3, 2026
Merged

FE hyperstack: add react-pro-coder skill#138
KailasMahavarkar merged 1 commit into
mainfrom
f-FE-hyperstack-react-pro-coder-skill

Conversation

@KailasMahavarkar

Copy link
Copy Markdown
Collaborator

Adds react-pro-coder, a domain skill that carries the React and Next.js engineering rules the react_* MCP tools do not: 56 rules with stable IDs across ten domains, plus the process gates (environment check, task classification, architecture-first order, pattern gate, output contract, negative-doubt pass). The skill is gated on react_get_constraints so framework ground truth still comes from the plugin, and it defers visual decisions to designer/ui-ux/design-tokens and shadcn internals to shadcn-expert.

Rule set

Domain IDs Reference
Component design CD-1..CD-8 references/COMPONENT-DESIGN.md
Hooks H-1..H-7 references/HOOKS.md
State management ST-1..ST-5 references/STATE.md
Performance PF-1..PF-6 references/PERFORMANCE.md
Data fetching, React 19, Next 15 DF-1..DF-5 references/DATA-FETCHING.md
TypeScript TS-1..TS-5 references/TYPESCRIPT.md
Styling and accessibility UI-1..UI-4 references/STYLING-A11Y.md
Architecture AR-1..AR-6 references/ARCHITECTURE.md
Testing and quality TQ-1..TQ-5 references/TESTING.md
Security and production SP-1..SP-5 references/SECURITY-PRODUCTION.md

IDs are cited in findings (path:line - RULE-ID - problem - fix) so a review comment points at a rule rather than an opinion.

Conflicts resolved against react_get_constraints

The source rule list disagreed with the plugin's hard constraints in three places. Each is resolved in favour of the plugin, with the reasoning written into the rule rather than left implicit.

Conflict Resolution
"Public API via index.ts" vs no-barrel-exports AR-2: a feature-scoped index.ts is the one allowed barrel, named re-exports only, requires sideEffects: false. App-wide barrels stay forbidden, and imports inside a feature go direct
State ladder listed Redux as an option ST hierarchy: Redux prohibited, Zustand for shared client state, Jotai acceptable when the state is atom-shaped
"Memoize inline style objects" vs "measure before memoizing" UI-2: use a class; useMemo only when the object feeds a memoized child (PF-3)

Three constraints not in the source list were added from the plugin: Next.js 15 async params/searchParams, React 19 Actions (useActionState, useFormStatus, useOptimistic), and a React Compiler caveat on hand-memoization (H-3).

Changes

File Intent
skills/react-pro-coder/SKILL.md Iron Law, rationalization table, 7-step process, forbidden-pattern table, skill boundaries
skills/react-pro-coder/references/*.md (10 domain files) The rules themselves, one file per domain, each rule with why and a code contrast
skills/react-pro-coder/references/REVIEW-CHECKLIST.md Audit pass list keyed to rule IDs, with the severity scale
skills/react-pro-coder/references/OUTPUT-CONTRACT.md 10-section response contract and the negative-doubt routine
skills/react-pro-coder/references/TEMPLATES.md Component, types, cn, page with metadata, test, SEO checklist, audit report scaffolds
skills/react-pro-coder/references/VARIANT-MAPPING.md Variant-mapping detection rules and report format
scripts/audit/sources.ts Declares the skill against the react plugin so the audit harness tracks it
README.md Domain table row, count 6 to 7
skills/INDEX.md Regenerated

Verification

$ bun scripts/generate-skills-index.ts
Generating skills index (cross-platform)...
Wrote .../skills/INDEX.md

$ bun test
 87 pass
 0 fail
 850 expect() calls
Ran 87 tests across 13 files. [497.00ms]

$ npx tsc --noEmit
(exit 0, no output)

skills-index-behaviour.test.ts covers the parts that break when a skill is added wrong: INDEX.md sync, required frontmatter (name, category, description), and a valid category. audit-harness-behaviour.test.ts covers the new skills: ["react-pro-coder"] entry existing under skills/.

Rule IDs verified contiguous per prefix and totalling 56, and every relative link in SKILL.md and the reference files resolves to a file in the tree.

Known stale, not touched

README.md still advertises 22 skills in the badge and the intro, package.json says 27, and summary.md says 21. The repo has 29 skill directories after this PR. Those counts were already inconsistent before this change and correcting them is a separate pass.

56 rules with stable IDs across component design, hooks, state placement,
performance, data fetching, TypeScript, styling and accessibility,
architecture, testing, and production security. Gated on react_get_constraints
so the skill defers to the react plugin for framework ground truth.

Wires the skill to the react plugin in the audit source table and adds it to
the README domain table.
@KailasMahavarkar
KailasMahavarkar force-pushed the f-FE-hyperstack-react-pro-coder-skill branch from 56b9a07 to 512ae29 Compare September 3, 2026 21:46
@KailasMahavarkar
KailasMahavarkar merged commit 8371e5e into main Sep 3, 2026
4 checks passed
@KailasMahavarkar
KailasMahavarkar deleted the f-FE-hyperstack-react-pro-coder-skill branch September 3, 2026 21:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant