From frontend-skills
Enforces React/TS/security rules via PostToolUse hooks: bans raw HTML, TS escape hatches, XSS vectors, barrel imports, and more. Use when enforcing React patterns or component library standards.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-skills:setup-react-rulesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
PostToolUse hooks on Edit/Write (auto-skip component library dirs):
PostToolUse hooks on Edit/Write (auto-skip component library dirs):
HTML/Components: ban raw HTML elements (use @/components/ui/), ban inline style={{}} (use Tailwind), ban icon inside AlertTitle (use icon prop), require handler on buttons (onClick/asChild/type="submit"/disabled)
TypeScript: ban as any, as Record<string,any>, @ts-ignore, @ts-expect-error
Security: ban dangerouslySetInnerHTML, eval(), new Function(), .innerHTML = (XSS/OWASP A03)
Performance: ban barrel imports (use direct paths), ban missing { passive: true } on scroll/touch/wheel, ban static import of heavy deps (chart.js/d3/three.js/pdf-lib -- use React.lazy())
Styling: ban raw hex/rgb in className (use design tokens), ban !important, ban outline: none (use focus-visible), ban visual overrides on registry components (use variant prop)
Navigation: ban onClick + navigate() (use <Button asChild><Link>), require aria-label on icon-only buttons
React Compiler: ban manual useMemo/useCallback/React.memo, ban class components
Protobuf: enforce create() wrapper for message spreads (v2)
REACT_RULES_BAN_USEEFFECT=1: ban useEffect/useLayoutEffect/useInsertionEffect. Escape: // allow: useEffect [reason]REACT_RULES_BAN_TYPE_ASSERTIONS=1: ban as X (allow as const). Force type guards/generics/schema validation.useSyncExternalStore for browser API subscriptions (navigator.onLine, matchMedia, scroll)validate cross-field validation (react-hook-form v7.72+)useMemo not useState+useEffectuseReducer for 3+ interrelated useState<T> for reusable typed componentsSee REFERENCE.md for patterns + examples.
scripts/react-rules-check.sh + scripts/fp-check.sh + scripts/tailwind-check.sh + scripts/_hook-lib.sh -> .claude/hooks/. chmod +x..claude/settings.json.codex-compat for .codex/hooks.json.as any, @ts-ignore in TSXnpx claudepluginhub redpanda-data/ui-harness --plugin frontend-skillsDefines React + TypeScript component and hook standards including structure rules, custom hook guidelines, and performance memoization patterns.
Reviews React hooks against design principles: object returns, SSR-safe init, effect cleanup, TypeScript generics, performance, and state patterns.
Validate TypeScript/React code against style and architectural conventions