<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react-auditor</title>
<style>
:root {
--bg: #0d1117;
--surface: #161b22;
--border: #30363d;
--text: #e6edf3;
--text-muted: #8b949e;
--accent: #58a6ff;
--green: #3fb950;
--orange: #d29922;
--red: #f85149;
--font: -apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif;
--mono: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
header {
padding: 64px 0 48px;
border-bottom: 1px solid var(--border);
text-align: center;
}
h1 { font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; }
h1 span { color: var(--accent); }
.tagline {
font-size: 1.2rem;
color: var(--text-muted);
margin-top: 12px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.badges { margin-top: 20px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: .8rem;
font-family: var(--mono);
background: var(--surface);
border: 1px solid var(--border);
}
.badge.green { border-color: var(--green); color: var(--green); }
.badge.orange { border-color: var(--orange); color: var(--orange); }
.badge.blue { border-color: var(--accent); color: var(--accent); }
.badge.purple { border-color: #d2a8ff; color: #d2a8ff; }
section { padding: 48px 0; border-bottom: 1px solid var(--border); }
h2 { font-size: 1.5rem; margin-bottom: 20px; }
h2 .count {
font-size: 0.9rem;
font-weight: 400;
color: var(--text-muted);
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px;
}
.card h4 { font-size: 1.1rem; margin-bottom: 8px; }
.card p { font-size: .9rem; color: var(--text-muted); }
.card .rule-count {
display: inline-block;
margin-top: 12px;
font-size: .8rem;
font-family: var(--mono);
color: var(--accent);
}
pre {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px 20px;
overflow-x: auto;
font-family: var(--mono);
font-size: .85rem;
line-height: 1.5;
}
code { font-family: var(--mono); }
.cmd { color: var(--green); }
.comment { color: var(--text-muted); }
.install-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-top: 16px;
}
.install-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px 20px;
}
.install-card pre { margin-top: 8px; border: none; padding: 0; background: transparent; }
ul.feature-list {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
ul.feature-list li {
padding: 8px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
font-size: .9rem;
}
ul.feature-list li::before {
content: "\2713";
color: var(--green);
margin-right: 8px;
font-weight: 700;
}
footer {
text-align: center;
padding: 32px 0;
color: var(--text-muted);
font-size: .9rem;
}
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="container">
<header>
<h1><span>react</span>-auditor</h1>
<p class="tagline">
A blazing-fast Rust CLI that scans your JS/TS/React codebase for best practices,
quality, security, performance, accessibility, and Next.js issues.
</p>
<div class="badges">
<span class="badge green">67 rules</span>
<span class="badge orange">Rust + oxc 0.138</span>
<span class="badge blue">MIT license</span>
<span class="badge purple">~138us / 1k LOC</span>
<span class="badge">6 platforms</span>
</div>
</header>
<section>
<h2>Install</h2>
<div class="install-grid">
<div class="install-card">
<strong>npm</strong>
<pre>$ npm install -g react-auditor</pre>
</div>
<div class="install-card">
<strong>Cargo</strong>
<pre>$ cargo install react-auditor</pre>
</div>
<div class="install-card">
<strong>Homebrew</strong>
<pre>$ brew install react-auditor</pre>
</div>
<div class="install-card">
<strong>Docker</strong>
<pre>$ docker run ghcr.io/chesteralan/react-auditor src/</pre>
</div>
<div class="install-card">
<strong>VS Code</strong>
<pre>Install from marketplace</pre>
</div>
<div class="install-card">
<strong>GitHub Action</strong>
<pre>uses: ./.github/actions/react-auditor</pre>
</div>
</div>
</section>
<section>
<h2>Key Features</h2>
<ul class="feature-list">
<li>Parallel scanning (rayon)</li>
<li>Watch mode (-W / --watch)</li>
<li>Incremental caching</li>
<li>Multi-root workspaces</li>
<li>Per-file-type rule config</li>
<li>Auto-fix (--fix)</li>
<li>--fail-on severity</li>
<li>--category filter</li>
<li>--ignore patterns</li>
<li>stylish / json / compact</li>
<li>Progress bar (indicatif)</li>
<li>VS Code extension</li>
</ul>
</section>
<section>
<h2>Rule Categories <span class="count">(67 rules total)</span></h2>
<div class="card-grid">
<div class="card">
<h4>Code Quality</h4>
<p>No unused vars, no shadowing, consistent returns, complexity caps, no console, no empty blocks, no var, max params, no long functions, prefer early return, no commented code, no deep nesting, no magic numbers.</p>
<span class="rule-count">13 rules</span>
</div>
<div class="card">
<h4>React</h4>
<p>Hooks rules, missing keys, inline styles, effect deps, direct mutation, duplicate props, component naming, index keys, inline functions, function components, unnecessary memo, multiple render methods, side effects in render, setState in effect/render, ref in component name, no forwardRef.</p>
<span class="rule-count">17 rules</span>
</div>
<div class="card">
<h4>TypeScript</h4>
<p>No any, no non-null assertions, no type assertions, no empty interfaces, consistent type imports, explicit return types, strict null checks, prefer interface, no explicit any.</p>
<span class="rule-count">9 rules</span>
</div>
<div class="card">
<h4>Security</h4>
<p>No eval, no dangerouslySetInnerHTML, no hardcoded secrets, no script URLs, no unsanitized input, no insecure protocols, no unsafe iframes.</p>
<span class="rule-count">7 rules</span>
</div>
<div class="card">
<h4>Accessibility</h4>
<p>img alt, button type, label associations, valid ARIA, heading levels, link/button content, no ambiguous labels, tabindex no positive, click events have key events, html has lang, no autofocus.</p>
<span class="rule-count">11 rules</span>
</div>
<div class="card">
<h4>Performance</h4>
<p>Prefer fragments, no bind in JSX, lazy loading, no heavy computation in render, no large libraries.</p>
<span class="rule-count">5 rules</span>
</div>
<div class="card">
<h4>Next.js</h4>
<p>Use Image instead of img, Script instead of script, Link instead of a, Head instead of head, async scripts.</p>
<span class="rule-count">5 rules</span>
</div>
</div>
</section>
<section>
<h2>Usage</h2>
<pre><span class="comment"># Scan with default settings</span>
$ react-auditor
<span class="comment"># Output as JSON</span>
$ react-auditor src/ --format json
<span class="comment"># Run specific categories</span>
$ react-auditor --rules react,typescript,security
<span class="comment"># Auto-fix where supported</span>
$ react-auditor --fix
<span class="comment"># Fail CI on errors only</span>
$ react-auditor --fail-on error
<span class="comment"># Watch mode</span>
$ react-auditor -W
<span class="comment"># Write JSON log</span>
$ react-auditor --log audit.json</pre>
</section>
<section>
<h2>Pre-commit Integration</h2>
<p style="margin-bottom:16px;color:var(--text-muted);">
Add to your <code>package.json</code> for automatic linting on every commit:
</p>
<pre>{
<span style="color:#d2a8ff">"lint-staged"</span>: {
<span style="color:#d2a8ff">"*.{js,jsx,ts,tsx}"</span>: [
<span style="color:#a5d6ff">"react-auditor --quiet --max-warnings 0"</span>
]
}
}</pre>
</section>
<section>
<h2>Configuration</h2>
<p style="margin-bottom:16px;color:var(--text-muted);">
Create <code>.rauditrc.toml</code> in your project root:
</p>
<pre><span class="comment"># Enable/disable rules per severity</span>
<span style="color:#d2a8ff">"no-console"</span> = <span style="color:#a5d6ff">"warning"</span>
<span style="color:#d2a8ff">"no-var"</span> = <span style="color:#a5d6ff">"error"</span>
<span style="color:#d2a8ff">"no-magic-numbers"</span> = <span style="color:#a5d6ff">"off"</span>
<span class="comment"># Workspace roots and per-file-type overrides</span>
<span style="color:#d2a8ff">workspaces</span> = [<span style="color:#a5d6ff">"packages/*"</span>]
<span class="comment">[file_types]</span>
<span class="comment"># Disable TS rules in .jsx files</span>
<span style="color:#d2a8ff">".jsx"</span> = { <span style="color:#d2a8ff">"no-explicit-any"</span> = <span style="color:#a5d6ff">"off"</span> }</pre>
</section>
<footer>
<p>
MIT — <a href="https://github.com/chesteralan/react-auditor">GitHub</a>
· <a href="https://github.com/chesteralan/react-auditor/issues">Issues</a>
· <a href="https://www.npmjs.com/package/react-auditor">npm</a>
</p>
</footer>
</div>
</body>
</html>