AGENTS.md — web

Overview

Frontend application (TypeScript/React/Vue)

Key Files

Golden Samples (follow these patterns)

Setup & environment

• Node version: >=20.0.0
• Framework: react
• Package manager: npm
• Environment variables: See .env.example

Build & tests

• Install: npm install
• Typecheck: npm run typecheck
• Lint: npm run lint
• Format: npx prettier --write .
• Test: npm test
• Build: npm run build
• Dev server: npm run dev

Code style & conventions

• TypeScript strict mode enabled (verified from tsconfig.json)
• Use functional components with hooks
• Naming: camelCase for variables/functions, PascalCase for components
• File naming: ComponentName.tsx, utilityName.ts
• Imports: group and sort (external, internal, types)
• CSS: Tailwind CSS
• Avoid class components

Security & safety

• Sanitize user inputs before rendering
• Raw HTML rendering only with sanitized content (use DOMPurify)
• Validate environment variables at build time
• Never expose secrets in client-side code
• Use HTTPS for all API calls
• Implement CSP headers
• WCAG 2.2 AA accessibility compliance

PR/commit checklist

• Tests pass: npm test
• TypeScript compiles: npm run typecheck
• Lint clean: npm run lint
• Formatted: npx prettier --write .
• Accessibility: keyboard navigation works, ARIA labels present
• Responsive: tested on mobile, tablet, desktop
• Performance: no unnecessary re-renders

Patterns to Follow

Prefer looking at real code in this repo over generic examples. See Golden Samples section above for files that demonstrate correct patterns.

When stuck

• Check React documentation: https://react.dev
• Review TypeScript handbook: https://www.typescriptlang.org/docs/
• Check root AGENTS.md for project-wide conventions
• Review existing components for patterns