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.

In plain words
What is it for?
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.
Why use it?
They help an assistant work within the project’s existing conventions instead of guessing commands, architecture, or how much code to change.

Instructions file

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 instructions/bartstc/vite-ts-react-template/claude-md
Clone the repo
git clone --depth 1 https://github.com/bartstc/vite-ts-react-template
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. 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.00807 $0.00807
Opus 5 $0.00404 $0.00404
Sonnet 5 $0.00161 $0.00161
Haiku 4.5 $0.00081 $0.00081

Measured 3d ago against content hash 795204133965, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, 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 3d 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.

  1. 3d 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 (121 stars, last pushed 1mo ago), licensed MIT. It adds 807 tokens to every session, about $0.0040 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-30.