# Frontend Type Generation > CRITICAL. How to keep frontend data types in sync with the backend, ensuring type safety and reducing bugs. Use when this capability is needed. - Skill: `tomevault-io/frontend-type-generation` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/frontend-type-generation` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-type-generation/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/frontend-type-generation --- # Frontend Type Generation & Sync Keeping data types synced between the backend and frontend is a high priority. Follow this logic exactly: 1. **Change Directory:** Always start by moving into the `./frontend/` directory. 2. **Execute Generation:** Run the npm script: `npm run generate:types` *Note*: This script automatically handles checking if the backend is running and choosing the appropriate generation method. 3. **Verification:** Confirm that the generated type files have been updated in `./frontend/src/types/types.generated.ts`. 4. **Application:** Ensure that the new types are being used in the frontend codebase to maintain type safety and reduce bugs. 5. **Constraints:** - Do NOT modify `./frontend/src/types/types.generated.ts` file directly. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/jpmolinamatute) — claim your Tome and manage your conversions.