Skip to content

Commit d80dae2

Browse files
JeanMechealan-agius4
authored andcommitted
feat(@schematics/angular): add schematics to generate ai context files.
* `ng generate ai-config` to prompt support tools. * `ng generate ai-config --tool=gemini` to specify the tool. * `ng new` will prompt to config AI tools. * `ng new --ai-config=gemini` to create a new project with AI configuration. Supported AI tools: gemini, claude, copilot, windsurf, jetbrains, cursor.
1 parent 2e3cfd5 commit d80dae2

File tree

10 files changed

+286
-1
lines changed

10 files changed

+286
-1
lines changed

goldens/public-api/angular_devkit/schematics/index.api.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -637,7 +637,10 @@ export enum MergeStrategy {
637637
export function mergeWith(source: Source, strategy?: MergeStrategy): Rule;
638638

639639
// @public (undocumented)
640-
export function move(from: string, to?: string): Rule;
640+
export function move(from: string, to: string): Rule;
641+
642+
// @public (undocumented)
643+
export function move(to: string): Rule;
641644

642645
// @public (undocumented)
643646
export function noop(): Rule;

packages/angular_devkit/schematics/src/rules/move.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { join, normalize } from '@angular-devkit/core';
1010
import { Rule } from '../engine/interface';
1111
import { noop } from './base';
1212

13+
export function move(from: string, to: string): Rule;
14+
export function move(to: string): Rule;
1315
export function move(from: string, to?: string): Rule {
1416
if (to === undefined) {
1517
to = from;
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<% if (frontmatter) { %><%= frontmatter %>
2+
3+
<% } %>You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
4+
5+
## TypeScript Best Practices
6+
7+
- Use strict type checking
8+
- Prefer type inference when the type is obvious
9+
- Avoid the `any` type; use `unknown` when type is uncertain
10+
11+
## Angular Best Practices
12+
13+
- Always use standalone components over NgModules
14+
- Must NOT set `standalone: true` inside Angular decorators. It's the default.
15+
- Use signals for state management
16+
- Implement lazy loading for feature routes
17+
- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
18+
- Use `NgOptimizedImage` for all static images.
19+
- `NgOptimizedImage` does not work for inline base64 images.
20+
21+
## Components
22+
23+
- Keep components small and focused on a single responsibility
24+
- Use `input()` and `output()` functions instead of decorators
25+
- Use `computed()` for derived state
26+
- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
27+
- Prefer inline templates for small components
28+
- Prefer Reactive forms instead of Template-driven ones
29+
- Do NOT use `ngClass`, use `class` bindings instead
30+
- Do NOT use `ngStyle`, use `style` bindings instead
31+
32+
## State Management
33+
34+
- Use signals for local component state
35+
- Use `computed()` for derived state
36+
- Keep state transformations pure and predictable
37+
- Do NOT use `mutate` on signals, use `update` or `set` instead
38+
39+
## Templates
40+
41+
- Keep templates simple and avoid complex logic
42+
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
43+
- Use the async pipe to handle observables
44+
45+
## Services
46+
47+
- Design services around a single responsibility
48+
- Use the `providedIn: 'root'` option for singleton services
49+
- Use the `inject()` function instead of constructor injection
Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import {
10+
Rule,
11+
apply,
12+
applyTemplates,
13+
chain,
14+
mergeWith,
15+
move,
16+
noop,
17+
strings,
18+
url,
19+
} from '@angular-devkit/schematics';
20+
import { Schema as ConfigOptions, Tool } from './schema';
21+
22+
type ToolWithoutNone = Exclude<Tool, Tool.None>;
23+
24+
const AI_TOOLS: { [key in ToolWithoutNone]: ContextFileInfo } = {
25+
gemini: {
26+
rulesName: 'GEMINI.md',
27+
directory: '.gemini',
28+
},
29+
claude: {
30+
rulesName: 'CLAUDE.md',
31+
directory: '.claude',
32+
},
33+
copilot: {
34+
rulesName: 'copilot-instructions.md',
35+
directory: '.github',
36+
},
37+
windsurf: {
38+
rulesName: 'guidelines.md',
39+
directory: '.windsurf/rules',
40+
},
41+
jetbrains: {
42+
rulesName: 'guidelines.md',
43+
directory: '.junie',
44+
},
45+
// Cursor file has a front matter section.
46+
cursor: {
47+
rulesName: 'cursor.mdc',
48+
directory: '.cursor/rules',
49+
frontmatter: `---\ncontext: true\npriority: high\nscope: project\n---`,
50+
},
51+
};
52+
53+
interface ContextFileInfo {
54+
rulesName: string;
55+
directory: string;
56+
frontmatter?: string;
57+
}
58+
59+
export default function ({ tool }: ConfigOptions): Rule {
60+
if (!tool || tool.includes(Tool.None)) {
61+
return noop();
62+
}
63+
64+
const files: ContextFileInfo[] = (tool as ToolWithoutNone[]).map(
65+
(selectedTool) => AI_TOOLS[selectedTool],
66+
);
67+
68+
const rules = files.map(({ rulesName, directory, frontmatter }) =>
69+
mergeWith(
70+
apply(url('./files'), [
71+
applyTemplates({
72+
...strings,
73+
rulesName,
74+
frontmatter,
75+
}),
76+
move(directory),
77+
]),
78+
),
79+
);
80+
81+
return chain(rules);
82+
}
Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
10+
import { Schema as WorkspaceOptions } from '../workspace/schema';
11+
import { Schema as ConfigOptions, Tool as ConfigTool } from './schema';
12+
13+
describe('Ai Config Schematic', () => {
14+
const schematicRunner = new SchematicTestRunner(
15+
'@schematics/angular',
16+
require.resolve('../collection.json'),
17+
);
18+
19+
const workspaceOptions: WorkspaceOptions = {
20+
name: 'workspace',
21+
newProjectRoot: 'projects',
22+
version: '15.0.0',
23+
};
24+
25+
let workspaceTree: UnitTestTree;
26+
function runConfigSchematic(tool: ConfigTool[]): Promise<UnitTestTree> {
27+
return schematicRunner.runSchematic<ConfigOptions>('ai-config', { tool }, workspaceTree);
28+
}
29+
30+
beforeEach(async () => {
31+
workspaceTree = await schematicRunner.runSchematic('workspace', workspaceOptions);
32+
});
33+
34+
it('should create a GEMINI.MD file', async () => {
35+
const tree = await runConfigSchematic([ConfigTool.Gemini]);
36+
expect(tree.exists('.gemini/GEMINI.md')).toBeTruthy();
37+
});
38+
39+
it('should create a copilot-instructions.md file', async () => {
40+
const tree = await runConfigSchematic([ConfigTool.Copilot]);
41+
expect(tree.exists('.github/copilot-instructions.md')).toBeTruthy();
42+
});
43+
44+
it('should create a cursor file', async () => {
45+
const tree = await runConfigSchematic([ConfigTool.Cursor]);
46+
expect(tree.exists('.cursor/rules/cursor.mdc')).toBeTruthy();
47+
});
48+
49+
it('should create a windsurf file', async () => {
50+
const tree = await runConfigSchematic([ConfigTool.Windsurf]);
51+
expect(tree.exists('.windsurf/rules/guidelines.md')).toBeTruthy();
52+
});
53+
54+
it('should create a claude file', async () => {
55+
const tree = await runConfigSchematic([ConfigTool.Claude]);
56+
expect(tree.exists('.claude/CLAUDE.md')).toBeTruthy();
57+
});
58+
59+
it('should create a jetbrains file', async () => {
60+
const tree = await runConfigSchematic([ConfigTool.Jetbrains]);
61+
expect(tree.exists('.junie/guidelines.md')).toBeTruthy();
62+
});
63+
64+
it('should create multiple files when multiple tools are selected', async () => {
65+
const tree = await runConfigSchematic([
66+
ConfigTool.Gemini,
67+
ConfigTool.Copilot,
68+
ConfigTool.Cursor,
69+
]);
70+
expect(tree.exists('.gemini/GEMINI.md')).toBeTruthy();
71+
expect(tree.exists('.github/copilot-instructions.md')).toBeTruthy();
72+
expect(tree.exists('.cursor/rules/cursor.mdc')).toBeTruthy();
73+
});
74+
75+
it('should error is None is associated with other values', () => {
76+
return expectAsync(runConfigSchematic([ConfigTool.None, ConfigTool.Cursor])).toBeRejected();
77+
});
78+
79+
it('should not create any files if None is selected', async () => {
80+
const filesCount = workspaceTree.files.length;
81+
const tree = await runConfigSchematic([ConfigTool.None]);
82+
expect(tree.files.length).toBe(filesCount);
83+
});
84+
});
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"$schema": "http://json-schema.org/draft-07/schema",
3+
"$id": "SchematicsAngularAIConfig",
4+
"title": "Angular AI Config File Options Schema",
5+
"type": "object",
6+
"additionalProperties": false,
7+
"description": "Generates AI configuration files for Angular projects. This schematic creates configuration files that help AI tools follow Angular best practices, improving the quality of AI-generated code and suggestions.",
8+
"properties": {
9+
"tool": {
10+
"type": "array",
11+
"uniqueItems": true,
12+
"default": "none",
13+
"x-prompt": "Which AI tools do you want to configure with Angular best practices? https://angular.dev/ai/develop-with-ai",
14+
"description": "Specifies which AI tools to generate configuration files for. These file are used to improve the outputs of AI tools by following the best practices.",
15+
"minItems": 1,
16+
"items": {
17+
"type": "string",
18+
"enum": ["none", "gemini", "copilot", "claude", "cursor", "jetbrains", "windsurf"]
19+
}
20+
}
21+
},
22+
"if": {
23+
"properties": {
24+
"tool": {
25+
"contains": {
26+
"const": "none"
27+
}
28+
}
29+
},
30+
"required": ["tool"]
31+
},
32+
"then": {
33+
"properties": {
34+
"tool": {
35+
"maxItems": 1
36+
}
37+
}
38+
}
39+
}

packages/schematics/angular/collection.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,11 @@
131131
"factory": "./config",
132132
"schema": "./config/schema.json",
133133
"description": "Generates a configuration file."
134+
},
135+
"ai-config": {
136+
"factory": "./ai-config",
137+
"schema": "./ai-config/schema.json",
138+
"description": "Generates an AI tool configuration file."
134139
}
135140
}
136141
}

packages/schematics/angular/ng-new/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ export default function (options: NgNewOptions): Rule {
6565
apply(empty(), [
6666
schematic('workspace', workspaceOptions),
6767
options.createApplication ? schematic('application', applicationOptions) : noop,
68+
schematic('ai-config', {
69+
tool: options.aiConfig?.length ? options.aiConfig : undefined,
70+
}),
6871
move(options.directory),
6972
]),
7073
),

packages/schematics/angular/ng-new/index_spec.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,4 +103,13 @@ describe('Ng New Schematic', () => {
103103
const { cli } = JSON.parse(tree.readContent('/bar/angular.json'));
104104
expect(cli.packageManager).toBe('npm');
105105
});
106+
107+
it('should add ai config file when aiConfig is set', async () => {
108+
const options = { ...defaultOptions, aiConfig: ['gemini', 'claude'] };
109+
110+
const tree = await schematicRunner.runSchematic('ng-new', options);
111+
const files = tree.files;
112+
expect(files).toContain('/bar/.gemini/GEMINI.md');
113+
expect(files).toContain('/bar/.claude/CLAUDE.md');
114+
});
106115
});

packages/schematics/angular/ng-new/schema.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,15 @@
142142
"zoneless": {
143143
"description": "Create an initial application that does not utilize `zone.js`.",
144144
"type": "boolean"
145+
},
146+
"aiConfig": {
147+
"type": "array",
148+
"uniqueItems": true,
149+
"description": "Specifies which AI tools to generate configuration files for. These file are used to improve the outputs of AI tools by following the best practices.",
150+
"items": {
151+
"type": "string",
152+
"enum": ["none", "gemini", "copilot", "claude", "cursor", "jetbrains", "windsurf"]
153+
}
145154
}
146155
},
147156
"required": ["name", "version"]

0 commit comments

Comments
 (0)