What is vite-ts-react-template CLAUDE.md?

Project instructions for a React single-page app built with Vite and TypeScript. They describe the technology stack, available commands, folder approach, and rules for making changes.

Use them when developing, checking types, linting, running tests, starting Storybook, or running browser tests with Playwright. They also set expectations for small, focused changes.

They help an assistant work within the project’s existing conventions instead of guessing commands, architecture, or how much code to change.

How bartstc/vite-ts-react-template configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to bartstc/vite-ts-react-template. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/bartstc/vite-ts-react-template/core/CLAUDE.md

Clone the repo

git clone --depth 1 https://github.com/bartstc/vite-ts-react-template

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/instructions/bartstc/vite-ts-react-template/claude-md/github.svg)](https://agentmods.dev/instructions/bartstc/vite-ts-react-template/claude-md)

Your own site

<a href="https://agentmods.dev/instructions/bartstc/vite-ts-react-template/claude-md"><img src="https://agentmods.dev/badge/instructions/bartstc/vite-ts-react-template/claude-md/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/instructions/bartstc/vite-ts-react-template/claude-md"><img src="https://agentmods.dev/badge/instructions/bartstc/vite-ts-react-template/claude-md.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 807 This file is loaded in full into every session.

When invoked 807 The same file — it is already loaded in full.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

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.

Model	Per session	Once invoked
Fable 5.1	$0.00807	$0.00807
Opus 5.5	$0.00323	$0.00323
Sonnet 5.5	$0.00161	$0.00161
Haiku 4.5	$0.00081	$0.00081

Measured 2mo ago against content hash 795204133965, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

vite-ts-react-template CLAUDE.md 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 2mo ago.

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.md · 74 lines

How it starts

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

Project

React SPA built with Vite using feature slice architecture with clean architecture principles.

Stack

TypeScript SPA. React 19, Vite 8, React Router 8, TanStack Query, Zustand, XState, Chakra UI, i18next. Testing: Vitest, Storybook, Playwright, MSW.

Commands

pnpm dev — start dev server (port 5173)
pnpm dev:all — start both frontend (port 5173) and local API server (port 3001)
pnpm typecheck — type-check all sources (src, e2e, stories, tests)
pnpm lint --fix — lint and auto-fix
pnpm test — all tests (unit + storybook)
pnpm test:e2e — Playwright E2E (headless)
pnpm storybook — component dev (port 6006)

Package manager: PNPM only. Path alias: @/* → src/.

Core Principles

Simplicity first — make every change as simple as possible, minimize code impact, choose the boring solution
Surgical changes — touch only what the task requires; don't refactor, reformat, or "improve" adjacent code. Remove only the orphans your own changes create
When unsure about requirements or business logic, ask the developer — never assume
When multiple interpretations exist, present them — don't pick silently
For changes >300 LOC or >3 files, ask for confirmation before proceeding
Stay within current task context; inform dev if fresh start needed
Modify API contracts only with explicit approval
Use git commands only when explicitly requested
Keep reports, options, and summaries extremely concise — prioritize information density

Workflow

1. Plan Mode Default

Enter plan mode for any non-trivial task (3+ steps or architectural decisions)
If something goes wrong, STOP and re-plan immediately — do not keep pushing
For complex features, write or request a spec before implementation
Use plan mode for verification steps, not just building

2. Self-Improvement Loop

After any correction, capture the pattern in specs/lessons.md and write a rule to prevent recurrence
Review specs/lessons.md at the start of each session
Ruthlessly iterate on lessons until the mistake rate drops

Read the full file on GitHub · 74 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.

2mo ago First seen · 74 lines · 807 tokens per session scan A 795204133965

Subscribe to this mod's changes

vite-ts-react-template CLAUDE.md is an instructions file published in the GitHub repository bartstc/vite-ts-react-template (123 stars, last pushed 13d ago), licensed MIT. It adds 807 tokens to every session, about $0.0032 per session on Opus 5.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-30.

React TypeScript reactjs spa-template storybook vite

vite-ts-react-template CLAUDE.md next to 6 instructions from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
vite-ts-react-template CLAUDE.mdbartstc/vite-ts-react-template	Instructions file	123	13d ago	MIT	A	807	Claude Code
vscode buildNext.instructions.mdmicrosoft/vscode	Instructions file	195k	yesterday	MIT	A	9,719	GitHub Copilot
next.js AGENTS.mdvercel/next.js	Instructions file	143k	today	MIT	A	7,461	Codex, OpenCode
langchain AGENTS.mdlangchain-ai/langchain	Instructions file	149k	yesterday	MIT	A	4,680	Codex, OpenCode
vscode oss-third-party-notices.instructions.mdmicrosoft/vscode	Instructions file	195k	yesterday	MIT	A	5,516	GitHub Copilot
vscode copilot-instructions.mdmicrosoft/vscode	Instructions file	195k	yesterday	MIT	A	3,093	GitHub Copilot
deepseek-harness AGENTS.mddeepseek-ai/deepseek-harness	Instructions file	274k	2d ago	MIT	A	4,313	Codex, OpenCode

vite-ts-react-template: Instructions file for Claude Code