Project instructions for React and Angular

By Midhul · Updated 5 November 2026

Project instructions capture the conventions an agent should check before changing code. Start with the repository you have: its README, lockfile, package scripts and existing instruction files.

1. Record facts before preferences

For a React project, note the installed version, router, component conventions and test runner. A useful rule is: “Keep rendering pure and derive values from existing state before adding effects.” Avoid naming scripts that do not exist in package.json.

For Angular, record the installed version and whether the existing feature uses standalone components or modules. A useful rule is: “Follow the existing injector hierarchy and change detection strategy; do not migrate architecture as part of an unrelated fix.”

2. Generate and review

Choose React or Angular in the generator, then select the package manager, styling and test preferences that match the repository. The preview is a starting point. Add actual file locations, state management and API conventions locally after checking them. Never add tokens or passwords.

3. Merge safely

Compare the downloaded instructions with existing files. Keep project-specific rules, remove contradictions and review the diff. Check the coding client’s supported instruction filename, discovery rules and directory scope; formats are not interchangeable across every agent.

4. Verify on a small task

Ask the agent to explain one existing component, then make a narrow change. Review the diff and run the repository’s real checks. Instructions guide work; they do not enforce security or replace code review.