Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add rules/kevin-liu-01/sigil-ui/react-conventionsgit clone --depth 1 https://github.com/Kevin-Liu-01/Sigil-UIWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/rules/kevin-liu-01/sigil-ui/react-conventions)<a href="https://agentmods.dev/rules/kevin-liu-01/sigil-ui/react-conventions"><img src="https://agentmods.dev/badge/rules/kevin-liu-01/sigil-ui/react-conventions.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.01040 | $0.01040 |
| Opus 5 | $0.00520 | $0.00520 |
| Sonnet 5 | $0.00208 | $0.00208 |
| Haiku 4.5 | $0.00104 | $0.00104 |
Grade A, and why
react-conventions scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 77 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Conventions
Imported from Kevin's wiki (
wiki/style/react.md). Cross-reference:sigil-conventions.mdc(component rules),sigil-design-system.mdc(token consumption),css-ui-enforcement.mdc(styling stack).
Styling
All UI via className={cn(...)} and Tailwind utilities. No CSS modules or co-located .css for normal components. Raw CSS belongs almost only in globals.css. Do not combine style={{ ... }} with Tailwind on the same node. See css-ui-enforcement.mdc.
Rules of Hooks
Hooks are identified by position in an array. Call order must be identical on every render.
- Hooks at the top level of a component or custom hook only.
- Before any conditional logic.
- No hooks inside conditions, loops, event handlers, callbacks passed to
useMemo/useReducer/useEffect, or after early returns. - Most common violation: early return before hooks. Move hooks above the conditional.
Custom Hooks
Name the hook after what it returns, not what it does internally. useOrgData > useFetchAndCacheOrgDataWithLoading.
Exhaustive Dependencies
useEffect, useMemo, useCallback dependency arrays must include every referenced value. Missing dependencies cause stale closures. If adding a dependency causes an infinite loop, restructure (extract to ref, memoize the dependency, move to event handler) — do not suppress the warning.
setState in Effects
The React compiler flags synchronous setState inside effect bodies. Canonical alternative: useSyncExternalStore. Migrate incrementally.
Linting Rules (Ultracite/oxlint)
| Rule | Severity | Notes |
|---|---|---|
react-hooks/rules-of-hooks |
error | Non-negotiable, never disable |
react-hooks/exhaustive-deps |
warn | Fix stale closures, do not suppress |
react/self-closing-comp |
error | <Foo /> not <Foo></Foo> |
react/jsx-curly-brace-presence |
error | No {"text"} when text suffices |
Architecture-Policy Rules
Custom ESLint rules for repo-specific patterns that oxlint cannot express:
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 77 lines · 1,040 tokens per session scan A 944039413135
react-conventions is a cursor rule published in the GitHub repository Kevin-Liu-01/Sigil-UI (9 stars, last pushed 1mo ago), licensed MIT. It adds 1,040 tokens to every session, about $0.0052 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other cursor rules, from other repositories
cursorrules
You are using StyleSeed, an AI design-method engine for product UI and other visual artifacts.
cursorrules
You have access to a design system extraction tool. When the user asks you to match a website's visual style, build UI that looks like a specific site, or create a DESIGN.md.
frontend
React/Next.js frontend coding standards with shadcn/ui, Tailwind CSS v4, and FSD-lite architecture.
components
CTA: inline-flex items-center justify-center gap-2 h-10 px-4 text-[1rem] font-medium bg-primary-500 text-white rounded-lg hover:bg-primary-700 cursor-pointer Sub: inline-flex items-center justify-center gap-2 h-10 px-4 text-[1rem] font-medium bg-white text-slate-700 border border-slate-200 rounded-lg hover:bg-gray-50…
webview-ui
Skill Manager webview — React 19, VS Code messaging via acquireVsCodeApi, no Node APIs.
shadcn
Cursor rule "shadcn" from chand1012/cursorrules, covering shadcn best practices for react projects, component usage, customization, type safety and accessibility.