Frontend standards

React House Standards

Writes React the way your team already agreed to write it.

What it produces

add a settings panel that matches the rest of this app

SettingsPanel.tsxcomponents/settings/

StateuseReducer, as agreed

PropscamelCase, no boolean traps

Stylingtokens, no literals

One rule is ambiguousasked rather than guessed

matched against 14 components already in the tree

Trigger accuracy

Not measured yet. This skill does not go on sale until its eval suite has been run against it and the number published here.

Trigger description written around the phrase people type, not the one a maintainer would.
Conventions live in references/ and load on demand, so the rules do not sit in context on every turn.
Fails loudly when it cannot find a config it needs, instead of guessing a default.
Three worked examples taken from a real component tree, not a to-do list.
A troubleshooting table written from the ways it went wrong on a 200-component codebase.

Adding a component to an existing tree

> add a settings panel that matches the rest of this app

Matched the folder layout, the state pattern and the prop naming already in use, and flagged one place the existing rule is ambiguous.

Reviewing against the agreed rules

> does this component follow our standards?

Listed four deviations, each quoting the rule it breaks and the line it breaks it on.

Onboarding a new pattern

> we now use the reducer pattern here, update the rules

Rewrote the rule file, noted the six components that predate it, and left them alone until asked.

Cuts what Claude reads before it starts, without cutting what it knows.

Eval suite not run yet

Reviews a screen against real UI rules, not taste.

Eval suite not run yet