maxart

React With AI — Security skill for Claude Code

Security community

A comprehensive CLAUDE.md template for modern React projects.

How to install React With AI

This entry records only its repository, not the path inside it, so there is no exact command to give. Open maxart/React-with-AI and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What React With AI does

A comprehensive CLAUDE.md template for modern React projects. Drop it in and Claude Code automatically follows production-grade conventions for TypeScript, state management, accessibility, security, testing, and more — with token-efficient output rules built in.

Alternatives in Security

Skills Audit Report — Date: 2026-02-15 Auditor: Automated Skill Quality Audit Scope: Recently added skills in business-growth/, fina 5.3k ★
Cve MCP Server — Production-grade MCP server giving Claude 27 security intelligence tools across 21 APIs — CVE lookup, EPSS sco 1.2k ★
Reactnative Expo AI Agent System Workflow — AI-powered development toolkit with 7 production agents for React Native/Expo mobile apps 125 ★

README

React-with-AI

A `CLAUDE.md` template that teaches [Claude Code](https://docs.anthropic.com/en/docs/claude-code) modern React best practices. Drop it into any React project and Claude will follow production-grade conventions for TypeScript, state management, accessibility, security, testing, and more — automatically, on every interaction.

Why

Claude Code reads `CLAUDE.md` from your working directory and applies its rules to every conversation (including sub-agents). Without guardrails, AI-generated React code can drift: `any` types, raw `useEffect` data fetching, missing error boundaries, inaccessible markup, tokens in localStorage, and more. This template codifies the conventions experienced React teams enforce in code review, so Claude follows them from the first line.

Two Versions

Pick the one that fits your project.

File	Size	Contains	Best for
`CLAUDE.md.FULL`	36,610 chars	All rules plus BAD/GOOD code examples	Teams that want rules plus concrete patterns — Claude follows rules-with-examples more reliably
`CLAUDE.md.SHORT`	26,435 chars	All rules, no code examples	Token-constrained setups, or projects that just need guardrails without inline samples

Both files cover the **same rules** — the only difference is whether each rule is illustrated with a BAD/GOOD code block. SHORT is ~28% smaller because it strips all fenced code blocks while preserving every rule, table, and checklist.

What's inside (click to expand)

Area	Key rules
TypeScript	Strict mode, no `any`, discriminated unions, exhaustive switch guards
Components	Single responsibility, composition over configuration, stable list keys
State Management	Decision tree: SWR/Query → useState → Context → Zustand; never store derived state
Hooks	useEffect only for external sync, mandatory cleanup, async safet