react-dev

A guide to the project's React frontend conventions, using React with TypeScript, Tailwind CSS for styling, Zustand for shared state, and Vitest with React Testing Library for tests.

In plain words
What is it for?
Use it when building or modifying React components, hooks, state management, styles, or frontend tests.
Why use it?
It helps frontend changes follow the project's patterns for components, state, accessibility, styling, and testing.

Skill for Claude CodeCodex

Install

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.

agentmods
npx agentmods add skills/jaansokk/cursor_tools/react-dev
Any agent
npx skills add jaansokk/cursor_tools --skill react-dev
Clone the repo
git clone --depth 1 https://github.com/jaansokk/cursor_tools

Made for: Claude Code, Codex.

Per session 29 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 609 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00029 $0.00609
Opus 5 $0.00015 $0.00304
Sonnet 5 $0.00006 $0.00122
Haiku 4.5 $0.00003 $0.00061

Measured yesterday against content hash 3715a6d2ac47, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

react-dev 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 yesterday.

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.

.claude/skills/react-dev/SKILL.md · 55 lines

How it starts

The opening of the file, as written. The whole thing — 55 lines — stays where its author put it; the contents beside it link to each section on GitHub.

React Conventions

Stack choices

  • React 18+ with functional components only — no class components
  • TypeScript strict — type all props, callbacks, state. No any
  • Tailwind CSS exclusively — no CSS modules, no inline style objects unless absolutely necessary
  • Vite for dev server and builds
  • Zustand for shared state (not Redux, not Context for state management)
  • React Testing Library + user-event + vitest for testing

Coding standards

  • Small, composable components — one responsibility per component, extract early
  • Minimal state — derive in render what you can, don't duplicate data across state slices
  • Lift state up to the closest common parent when components must stay in sync
  • Use useReducer for complex update logic
  • Accessible by default — semantic HTML first, ARIA only when semantic elements aren't sufficient
  • Ensure keyboard accessibility and visible focus on all interactive controls

Styling

  • Utility-first Tailwind — organize classes: layout, spacing, sizing, typography, colors, effects, states
  • Use component abstractions (variant objects/props) instead of repeating long class lists
  • Mobile-first responsive: base styles for mobile, scale up with md:, lg:
  • Use prettier-plugin-tailwindcss for class sorting

Testing

  • Test like a user — prefer queries by role + accessible name (getByRole, findByRole)
  • Use @testing-library/user-event over fireEvent
  • Don't test implementation details (DOM structure, internal state, private methods)

Workflow

  • Orient before coding — read existing components in the area, match existing patterns
  • Small, focused changes — one component or concern at a time, don't refactor unrelated code
  • Write tests alongside implementation — new components and hooks should ship with tests
  • Validate after edits — run tsc and the linter, run tests if they exist in the area

Principles

  • Speak up. If you spot code that contradicts conventions, has a latent bug, unnecessary complexity, or a missed optimization — flag it. Don't silently work around issues.
  • Verify against documentation Use the context7 MCP to check documentation of libraries when needed.
  • Ask, don't assume. If requirements are ambiguous or you face a non-obvious UI/state design choice, ask for clarification before proceeding.
  • Stay scoped. If you discover an issue outside your current task, report it instead of silently fixing it. Exception: trivial fixes (typos, obvious off-by-one) that take seconds.
  • Leave code better than you found it — but only in the files you're already touching.

Read the full file on GitHub · 55 lines

Changes

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.

  1. yesterday First seen · 55 lines · 29 tokens per session scan A 3715a6d2ac47

Subscribe to this mod's changes

react-dev is a skill published in the GitHub repository jaansokk/cursor_tools (1 stars, last pushed 5mo ago), licensed MIT. It adds 29 tokens to every session and 609 once invoked, about $0.0001 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.

Related

Other skills, from other repositories

ab-testing-framework

Design, run, and analyze A/B tests (controlled experiments) using Ronny Kohavi's methodology and Gibson Biddle's DHM trade-off analysis. Use when the user needs to plan an experiment, choose metrics (OEC), evaluate statistical significance, assess sample size requirements, avoid common experimentation pitfalls, or…

luisabwk/kraken · 75 tokens

continuous-discovery

Guide teams through building sustainable customer interview habits and discovery practices. Use when setting up weekly customer interviews, preparing interview guides, coaching story-based interviewing technique, synthesizing user research findings, planning assumption tests, or helping teams that say they don't have…

luisabwk/kraken · 60 tokens

prd-writer

Guide users through writing Product Requirements Documents (PRDs) and decomposing them into executable technical tasks. Use when creating a PRD, product spec, product one-pager, feature brief, PRP, or when breaking requirements into tasks with estimates, sprint planning, or technical decomposition.

luisabwk/kraken · 61 tokens

product-led-growth-playbook

Evaluate growth strategy, growth team structure, and go-to-market motions using Elena Verna's PLG frameworks. Use when the user asks about product-led growth, PLG, growth team hiring, self-serve vs sales-led motions, product-led sales, PQA/PQL models, growth loops, when to hire a head of growth, earned vs rented…

luisabwk/kraken · 97 tokens

ai-evals-builder

Build AI evals using the Husain-Shankar framework (error analysis, open/axial coding, LLM-as-judge). Use when a user needs to create, improve, or debug evals for an AI product — including defining failure modes, building LLM judges, or setting up production monitoring for an LLM application.

luisabwk/kraken · 72 tokens

dhm-strategy-framework

Evaluate and strengthen product strategy using Gibson Biddle's DHM framework (Delight, Hard-to-copy, Margin-enhancing). Use when the user asks about product strategy, competitive advantage, feature prioritization trade-offs, or wants to stress-test whether a product idea is strategically sound.

luisabwk/kraken · 62 tokens