Skip to main content
hc
Submit
Frontend rules · rules · 12 picks

Best frontend CLAUDE.md rules

CLAUDE.md rule sets for frontend development — React, TypeScript, and modern UI frameworks.

Curated by @heyclaude-editors Updated 2026-06-19

CLAUDE.md rule sets for frontend development — React, TypeScript, and modern UI frameworks.

Compared at a glance

The top 5 picks side by side on trust, install, platform support, and disclosed notes — full rationale for each below.

FieldReact Expert - CLAUDE.md Rules for Claude Code

Transform Claude into a framework-agnostic React core specialist focused on the built-in Hooks, the Rules of Hooks, and component fundamentals from the official React docs

Open dossier 		Angular Expert - CLAUDE.md Rules for Claude Code

Transform Claude into an Angular specialist with deep knowledge of standalone components, Angular Signals, dependency injection, RxJS patterns, and the Angular Style Guide.

Open dossier 		Vue 3 Composition API Expert - CLAUDE.md Rules for Claude Code

Transform Claude into a Vue 3 specialist with deep knowledge of the Composition API, script setup syntax, Pinia state management, and Vue Router best practices.

Open dossier 		AI-Generated Frontend Accessibility Review Rules

Source-backed rules for reviewing AI-generated frontend UI changes for accessibility before merge, with semantic HTML, keyboard paths, focus management, labels, automated scan limits, manual checks, and privacy-safe evidence.

Open dossier 		Production Codebase Auditor - CLAUDE.md Rules for Claude Code

Expert in comprehensive production codebase analysis with Zod validation enforcement, security vulnerability detection, and code consolidation strategies

Open dossier
Trust
Install riskReview firstReview firstReview firstReview firstReview first
Notes Safety · Privacy ✓ Safety · Privacy · Safety · Privacy · Safety ✓ Privacy ✓ Safety ✓ Privacy ✓
Categoryrulesrulesrulesrulesrules
Sourcesource-backedsource-backedsource-backedsource-backedsource-backed
AuthorJSONboredjaso0n0818jaso0n0818MkDev11JSONbored
Added2025-09-152026-06-132026-06-132026-06-042025-09-26
Platforms
Claude Code
Claude Code
Claude Code
Claude Code
Claude Code
Source repo—————
Safety notes— missing— missing— missing✓AI-generated UI can silently replace semantic controls with divs, remove labels, hide focus indicators, break keyboard order, change error messaging, or add motion that affects users. Automated scans catch important classes of issues but do not prove that custom widgets, focus restoration, reading order, copy meaning, or assistive-technology behavior are correct. Browser automation and accessibility checks should run against local, preview, or staging environments with test accounts so forms, payments, messages, and destructive actions are not triggered in production.✓Recommendations may include shell commands, package installs, or file edits; review and run any suggested changes yourself instead of applying them unverified.
Privacy notes✓Guidance covers React state and effects; keep API keys, tokens, and secrets out of client-side React code and bundles, since anything in the client is exposed to users.— missing— missing✓Accessibility evidence can include screenshots, DOM text, accessible names, form values, labels, user content, network traces, browser storage, cookies, and test account data. Do not paste raw screenshots, traces, accessibility trees, DOM snapshots, customer names, private routes, or production form data into public PR comments without redaction. Use synthetic content and test accounts for accessibility examples, especially when reviewing auth, billing, dashboards, healthcare, education, or support flows.✓Auditing reads source, configuration, and logs that may contain secrets or personal data; keep any captured sensitive values out of shared audit reports.
Prerequisites— none listed— none listed— none listed
  • A frontend pull request, patch, generated component, route, story, or visual diff with enough context to identify changed user flows.
  • Access to the project's accessibility target, component library conventions, design tokens, browser test command, and review environment.
  • A local, preview, or staging URL where keyboard checks and automated accessibility scans can run without touching production data.
  • Permission to block merge when generated UI removes accessibility semantics or when verification evidence is incomplete.
— none listed
Install—————
Config—————
Citations
ClaimUnclaimedUnclaimedUnclaimedUnclaimedUnclaimed
  1. 01
    rules

    React Expert - CLAUDE.md Rules for Claude Code

    Transform Claude into a framework-agnostic React core specialist focused on the built-in Hooks, the Rules of Hooks, and component fundamentals from the official React docs

    Review firstSource-backedReview firstAdded 9mo ago
    Safety · Privacy ✓
    Why it made the cut

    React Expert - CLAUDE.md Rules for Claude Code is included because it has privacy notes present, source-backed source posture.

    Reach for instead

    If this will touch credentials, local files, or production systems, inspect the upstream source first.

  2. 02
    rules

    Angular Expert - CLAUDE.md Rules for Claude Code

    Transform Claude into an Angular specialist covering standalone components, Signals, dependency injection, RxJS, and Angular Style Guide conventions.

    Review firstSource-backedReview firstAdded 6d ago
    Safety · Privacy ·
    Why it made the cut

    Angular Expert - CLAUDE.md Rules for Claude Code is included because it has source-backed source posture.

    Reach for instead

    If this will touch credentials, local files, or production systems, inspect the upstream source first.

  3. 03
    rules

    Vue 3 Composition API Expert - CLAUDE.md Rules for Claude Code

    Transform Claude into a Vue 3 specialist with deep knowledge of the Composition API, script setup syntax, Pinia state management, and Vue Router.

    Review firstSource-backedReview firstAdded 6d ago
    Safety · Privacy ·
    Why it made the cut

    Vue 3 Composition API Expert - CLAUDE.md Rules for Claude Code is included because it has source-backed source posture.

    Reach for instead

    If this will touch credentials, local files, or production systems, inspect the upstream source first.

  4. 04
    rules

    AI-Generated Frontend Accessibility Review Rules

    Review AI-generated UI changes for semantic HTML, keyboard access, focus, labels, scan limits, manual checks, and privacy-safe evidence.

    Review firstSource-backedReview firstAdded 15d ago
    Safety ✓ Privacy ✓
    Why it made the cut

    AI-Generated Frontend Accessibility Review Rules is included because it has safety notes present, privacy notes present, source-backed source posture.

    Reach for instead

    If this will touch credentials, local files, or production systems, inspect the upstream source first.

  5. 05
    rules

    Production Codebase Auditor - CLAUDE.md Rules for Claude Code

    Expert in comprehensive production codebase analysis with Zod validation enforcement, security vulnerability detection, and code consolid...

    Review firstSource-backedReview firstAdded 9mo ago
    Safety ✓ Privacy ✓
    Why it made the cut

    Production Codebase Auditor - CLAUDE.md Rules for Claude Code is included because it has safety notes present, privacy notes present, source-backed source posture.

    Reach for instead

    If this will touch credentials, local files, or production systems, inspect the upstream source first.

  6. 06
    rules

    React Server Components Expert for Claude

    Server-first React 19: async data fetching, isolating interactivity in client components, and Suspense streaming without fetch waterfalls.

    Review firstSource-backedReview firstAdded 8mo ago
    Safety ✓ Privacy ✓
    Why it made the cut

    React Server Components Expert for Claude is included because it has safety notes present, privacy notes present, source-backed source posture.

    Reach for instead

    If this will touch credentials, local files, or production systems, inspect the upstream source first.

  7. 07
    rules

    Security-First React Components for Claude

    Security-first React component architect with XSS prevention, CSP integration, input sanitization, and OWASP Top 10 mitigation patterns

    Review firstSource-backedReview firstAdded 8mo ago
    Safety ✓ Privacy ✓
    Why it made the cut

    Security-First React Components for Claude is included because it has safety notes present, privacy notes present, source-backed source posture.

    Reach for instead

    If this will touch credentials, local files, or production systems, inspect the upstream source first.

  8. 08
    rules

    TypeScript API Client Compatibility Review Rules

    Review TypeScript API client changes for exported type surfaces, inferred router contracts, validators, downstream compile evidence, and safe rollout.

    Review firstSource-backedReview firstAdded 15d ago
    Safety ✓ Privacy ✓
    Why it made the cut

    TypeScript API Client Compatibility Review Rules is included because it has safety notes present, privacy notes present, source-backed source posture.

    Reach for instead

    If this will touch credentials, local files, or production systems, inspect the upstream source first.

  9. 09
    rules

    Svelte Expert - CLAUDE.md Rules for Claude Code

    Transform Claude into a Svelte specialist covering reactivity, components, stores, and SvelteKit routing patterns.

    Review firstSource-backedReview firstAdded 2d ago
    Safety · Privacy ✓
    Why it made the cut

    Svelte Expert - CLAUDE.md Rules for Claude Code is included because it has privacy notes present, source-backed source posture.

    Reach for instead

    If this will touch credentials, local files, or production systems, inspect the upstream source first.

  10. 10
    rules

    tRPC Expert - CLAUDE.md Rules for Claude Code

    Transform Claude into a tRPC specialist covering typed routers, procedures, middleware, and React client integration patterns.

    Review firstSource-backedReview firstAdded just now
    Safety · Privacy ✓
    Why it made the cut

    tRPC Expert - CLAUDE.md Rules for Claude Code is included because it has privacy notes present, source-backed source posture.

    Reach for instead

    If this will touch credentials, local files, or production systems, inspect the upstream source first.

  11. 11
    rules

    NestJS Expert - CLAUDE.md Rules for Claude Code

    Transform Claude into a NestJS specialist covering modules, DI, providers, guards, interceptors, pipes, and microservice patterns.

    Review firstSource-backedReview firstAdded 6d ago
    Safety · Privacy ✓
    Why it made the cut

    NestJS Expert - CLAUDE.md Rules for Claude Code is included because it has privacy notes present, source-backed source posture.

    Reach for instead

    If this will touch credentials, local files, or production systems, inspect the upstream source first.

  12. 12
    rules

    Prisma Expert - CLAUDE.md Rules for Claude Code

    Transform Claude into a Prisma specialist covering schema design, migrations, query patterns, relations, and production safety.

    Review firstSource-backedReview firstAdded 2d ago
    Safety · Privacy ✓
    Why it made the cut

    Prisma Expert - CLAUDE.md Rules for Claude Code is included because it has privacy notes present, source-backed source posture.

    Reach for instead

    If this will touch credentials, local files, or production systems, inspect the upstream source first.

Missing a pick? Propose an edit to this list — every change goes through the same review queue as new entries.

Suggest a pick
Weekly · Sundays

Get the weekly brief

One calm read on Claude workflows. Sundays. No tracking pixels.

Unsubscribe any time. No tracking pixels. No partner blasts.