setup-react-rules
Setup React Rules
Repo/code changes: run /deslop before commit, push, PR, or merge.
PostToolUse hooks on Edit/Write (auto-skip component library dirs):
Enforced Rules
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