SKILL.md
$2a
Important: Prefer agent for --ai-config, or use the option that best suits the environment, for example if the user is using Gemini, use --ai-config=gemini.
Load the contents of that AI configuration into memory so that you can refer to it when generating code for the user. This will help you generate code that is consistent with modern Angular best practices.
Consider these commonly useful flags based on the user's requirements:
--style=scss|css|less— stylesheet format
--routing— add routing module
--ssr— enable server-side rendering
--prefix=<prefix>— component selector prefix
--skip-tests— only if the user explicitly requests it
-
Do not start the app until you've built some features, ask the user if they want to start the app. You can always run npx ng build to check for errors and repair them.
-
Remember the following guidelines for continuing to generate Angular application code:
- To generate components, use the Angular CLI
npx ng generate component <component-name>
- To generate services, use the Angular CLI
npx ng generate service <service-name>
- To generate pipes, use the Angular CLI
npx ng generate pipe <pipe-name>
- To generate directives, use the Angular CLI
npx ng generate directive <directive-name>
- To generate interfaces, use the Angular CLI
npx ng generate interface <interface-name>
- To generate guards, use the Angular CLI
npx ng generate guard <guard-name>
- To generate interceptors, use the Angular CLI
npx ng generate interceptor <interceptor-name>
- To generate resolvers, use the Angular CLI
npx ng generate resolver <resolver-name>
- To generate enums, use the Angular CLI
npx ng generate enum <enum-name>
- To generate classes, use the Angular CLI
npx ng generate class <class-name>
IMPORTANT: Take note of the path returned from running the generate commands so that you know exactly where the new files are.
Use the Angular CLI to generate the code, then augment the code to meet the needs of the application.
-
To add tailwind, run npx ng add tailwindcss. After that, you do not have to do anything else, you can start using tailwind classes in your Angular application. Follow the best practices for tailwind v4 here, learn more if needed: https://tailwindcss.com/docs/upgrade-guide.
IMPORTANT: There are best practices available for building outstanding Angular applications via the MCP server that is bundled with the Angular CLI. Available through npx ng mcp and the get_best_practices.