Tooling
Measured, opinionated Claude Code rules for frontend work (React / Next.js / Vite / Astro) — skills, path rules, review agents, sign-off hooks, installer & plugin. Every claim backed by committed eval reports.
npx -y skills add Syo-M/fable-frontend-skills --skill toolingAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Lint and enforcement configuration — ESLint, Stylelint, tsconfig flags, env validation, dead-code checks; maps project rules to the tools that enforce them. Use when configuring linters, tsconfig, or when a convention should be automated instead of remembered. 日本語の依頼例:「ESLint/Lint設定」「tsconfig設定」「ルールを自動で強制したい」「Stylelint」「CIで弾きたい」。
SKILL.md
3.8 KB, 864 tokens by cl100k_base, as published. Nobody here has run it
Tooling — enforce rules with machines, not memory
Every mechanical rule in this rule-set should be backed by a tool so lint/CI catches violations regardless of who (or what) wrote the code. When setting up or auditing a project, wire these:
tsconfig
strict: true, plusnoUncheckedIndexedAccess,noImplicitOverride,verbatimModuleSyntax.
ESLint — rule → enforcement map
| Convention (source) | ESLint rule / plugin |
|---|---|
No any (CLAUDE.md) | @typescript-eslint/no-explicit-any |
@ts-expect-error needs reason, @ts-ignore banned (CLAUDE.md) | @typescript-eslint/ban-ts-comment with ts-expect-error: 'allow-with-description' |
| Hooks rules + complete effect deps (react-patterns) | eslint-plugin-react-hooks (rules-of-hooks, exhaustive-deps) — suppression comments banned |
| No array-index keys (react-patterns) | react/no-array-index-key |
| Named exports only, with exceptions (react-patterns) | import/no-default-export + overrides allowing app/**, pages/**, src/pages/**, *.stories.*, *.config.*, .storybook/** |
| No inline styles (CLAUDE.md) | react/forbid-dom-props (style) |
No dangerouslySetInnerHTML / eval family (frontend-security) | react/no-danger, no-eval, no-implied-eval, no-new-func |
| Semantic HTML, labels, keyboard, no positive tabindex (a11y) | eslint-plugin-jsx-a11y (recommended config, as errors) |
| Testing Library discipline (testing-vitest) | eslint-plugin-testing-library (prefer-user-event, prefer-find-by, no-container, no-node-access, no-wait-for-side-effects) |
| Playwright bans (testing-playwright) | eslint-plugin-playwright (no-wait-for-timeout, no-networkidle, missing-playwright-await, no-element-handle) |
| Awaited play interactions (storybook) | eslint-plugin-storybook (await-interactions, use-storybook-expect) |
| Server-only module isolation (nextjs) | server-only package + import/no-restricted-paths |
| Feature-boundary imports (vite-react) | eslint-plugin-boundaries or dependency-cruiser in CI |
Stylelint (CSS Modules)
stylelint-declaration-strict-value: requirevar()forcolor,background-color,z-index,transition-duration, spacing properties — enforces the tokens rule fromcss-modules.declaration-property-value-disallowed-list: ban rawz-indexintegers outsidetokens.css.
Type-safe CSS Modules
- Editor:
typescript-plugin-css-modules. CI: generated.d.ts(typed-css-modulesor the bundler's typegen) so a renamed class fails typecheck, not production.
Env validation
@t3-oss/env-nextjs/@t3-oss/env-core(zod-based): typed, validated env access; fails fast on missing vars; statically separates server/client vars.
Dead code & deps
knipin CI: unused files, exports, and dependencies.
Honor-system rules — cannot be tool-enforced, review for these explicitly
zod at every boundary, per-resource authorization (IDOR), webhook signature verification, mock-at-the-boundary policy, "measure before optimizing", small focused diffs, manual keyboard walks (a11y). Lint cannot catch these. The shipped templates/.semgrep/ heuristics backstop webhook-missing-verification, SSRF, secret exposure, and unsanitized HTML (flags for review, not proof); zod-at-boundary and IDOR have no reliable static rule and stay review-only. All of them still require human/AI code review.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.
Gives 0 of the 12 instructions most quality gates skills give in 864 tokens
Counted across 1,195 of the 2,094 authors here whose files we hold, read 2026-08-07
- Read the output and check the exit codein 54 of 1195, across 14 files
- Verify requirements using a line-by-line checklistin 53 of 1195, across 12 files
- Identify the verification command proving the claimin 51 of 1195, across 12 files
- Run the full verification commandin 50 of 1195, across 11 files
- Verify output confirms the claimin 49 of 1195, across 12 files
- Check version control diff after agent delegationin 46 of 1195, across 6 files
- State claim with evidencein 44 of 1195, across 4 files
- Run the test suitein 33 of 1195, across 26 files
- Keep state in memory by defaultin 27 of 1195, across 6 files
- Make prototype runnable with one commandin 26 of 1195, across 5 files
- Produce a verification reportin 25 of 1195, across 14 files
- Detect the package manager from lockfilesin 24 of 1195, across 5 files
Said here and by no other author read
- map every convention to a lint rule
- ban ts-ignore comments
- ban effect dependency suppressions
- ban inline style props
- ban raw z-index integers
- generate type definitions for css modules
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.