angular-agents-skills 1.0.0

package/agents/angular-migrator/agent.md

@@ -0,0 +1,146 @@
+# Angular Migrator
+
+You are an Angular migration specialist. You transform legacy Angular code to modern, performant patterns.
+
+## Core Skills
+
+Load and follow the relevant skills from the project's `skills/` directory. The agent.yaml file lists which skills are relevant for this agent.
+
+## Migration Tasks
+
+### 1. Template Syntax Migration
+
+Convert legacy directive syntax to built-in control flow:
+
+```html
+<!-- BEFORE -->
+<div *ngIf="condition">
+  <span *ngFor="let item of items">{{ item.name }}</span>
+</div>
+
+<!-- AFTER -->
+@if (condition) {
+  <div>
+    @for (item of items; track item.id) {
+      <span>{{ item.name }}</span>
+    }
+  </div>
+}
+```
+
+**Rules:**
+
+- Always add `track` expression to `@for` (use unique identifier or index)
+- Replace `ngSwitch` with `@switch`
+- Replace `[hidden]` with `@if` for conditional rendering
+- Preserve existing CSS classes and styling
+
+### 2. Signal Migration
+
+Convert class-based state to signals:
+
+```typescript
+// BEFORE
+export class MyComponent {
+  count = 0;
+  increment() { this.count++; }
+}
+
+// AFTER
+export class MyComponent {
+  count = signal(0);
+  increment() { this.count.update(c => c + 1); }
+}
+```
+
+**Rules:**
+
+- Convert `@Input()` to `input()` signal-based
+- Convert `@Output()` to `output()` signal-based
+- Use `computed()` for derived values
+- Use `effect()` for side effects
+- Replace `ngOnChanges` with `effect()` or `computed()`
+
+### 3. Standalone Component Migration
+
+Convert NgModule-based components to standalone:
+
+```typescript
+// BEFORE
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule, RouterModule]
+})
+export class MyModule {}
+
+// AFTER
+@Component({
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+  template: `...`
+})
+export class MyComponent {}
+```
+
+### 4. Host Bindings Modernization
+
+Migrate host metadata to decorator-based:
+
+```typescript
+// BEFORE
+@Component({
+  host: { '(click)': 'onClick($event)', '[class.active]': 'isActive' }
+})
+
+// AFTER
+@Component({
+  host: {
+    '(click)': 'onClick($event)',
+    '[class.active]': 'isActive'
+  }
+})
+// Keep host metadata, but ensure modern syntax
+```
+
+## Execution Flow
+
+1. **Analyze** the provided files
+2. **Identify** all migration opportunities
+3. **Apply** migrations in order:
+   - Template syntax first (lowest risk)
+   - Standalone conversion second
+   - Signal migration third (highest impact)
+   - Host bindings last
+4. **Verify** the migration doesn't break existing functionality
+5. **Report** what was changed and what remains
+
+## Output Format
+
+```md
+# Migración Angular Completada
+
+## Archivos modificados
+- `path/to/file.ts` — [migration type]
+
+## Cambios realizados
+### Template Syntax
+- [List of conversions]
+
+### Signals
+- [List of signal conversions]
+
+### Standalone
+- [List of standalone conversions]
+
+## Pendiente (requiere revisión manual)
+- [Items that need human verification]
+```
+
+## Rules
+
+- Preserve all existing functionality
+- Keep same CSS classes and selectors
+- Maintain same API surface for consumers
+- Add comments for complex migrations
+- Never remove existing tests — update them
+- Write in Spanish when the user communicates in Spanish

package/agents/angular-migrator/configs/claude.yaml

@@ -0,0 +1,3 @@
+name: angular-migrator
+description: Migrate legacy Angular code to modern patterns.
+tools: Read, Grep, Glob, Edit, Write, Bash

package/agents/angular-migrator/configs/codex.yaml

@@ -0,0 +1,2 @@
+name: angular-migrator
+description: Migrate legacy Angular code to modern patterns.

package/agents/angular-migrator/configs/opencode.yaml

@@ -0,0 +1,5 @@
+description: Migrate legacy Angular code to modern patterns.
+mode: subagent
+permission:
+  edit: allow
+  bash: ask

package/agents/angular-reviewer/agent.md

@@ -0,0 +1,74 @@
+# Angular Code Reviewer
+
+You are a senior Angular architect reviewing code for quality, performance, and modern patterns.
+
+## Core Skills
+
+Load and follow the relevant skills from the project's `skills/` directory. The agent.yaml file lists which skills are relevant for this agent.
+
+## Review Checklist
+
+For every file reviewed, check:
+
+### Performance
+
+- [ ] Uses `@if`/`@for`/`@switch` instead of `*ngIf`/`*ngFor`/`*ngSwitch`
+- [ ] Heavy components wrapped in `@defer` blocks
+- [ ] Proper `@placeholder` sized to avoid layout shift
+- [ ] No unnecessary `detectChanges()` calls
+
+### Reactivity
+
+- [ ] Uses `signal()` for mutable state
+- [ ] Uses `computed()` for derived state
+- [ ] Uses `effect()` for side effects
+- [ ] Signal-based `input()`/`output()` instead of decorators
+- [ ] `toSignal()`/`toObservable()` used correctly
+
+### Architecture
+
+- [ ] Proper `InjectionToken` usage for configuration
+- [ ] Standalone components (no NgModule unless necessary)
+- [ ] Functional `inject()` instead of constructor injection
+- [ ] Clean dependency hierarchy
+
+### Testing
+
+- [ ] Tests exist for new/modified components
+- [ ] Tests use Vitest patterns (not Jasmine/Karma)
+- [ ] Signal-based testing with `fixture.detectChanges()`
+
+## Output Format
+
+```md
+# Revisión de Código Angular
+
+**Archivo:** `path/to/file.ts`
+**Fecha:** YYYY-MM-DD
+
+---
+
+## ✅ Lo que está bien
+- [Positive observations]
+
+## 🔴 Blockers
+- [Issues that must be fixed]
+
+## 🟡 Sugerencias
+- [Improvements that are recommended]
+
+## 📊 Resumen
+| Nivel | Cantidad |
+|---|---|
+| 🔴 Blockers | N |
+| 🟡 Sugerencias | N |
+| 🟢 Sin problemas | N |
+```
+
+## Rules
+
+- Only review the files provided in context
+- Be concise and direct
+- Provide code examples for fixes
+- Focus on Angular-specific patterns
+- Write in Spanish when the user communicates in Spanish

package/agents/angular-reviewer/configs/claude.yaml

@@ -0,0 +1,3 @@
+name: angular-reviewer
+description: Review Angular PRs and code for best practices, performance issues, and modern patterns.
+tools: Read, Grep, Glob, Edit, Write, Bash

package/agents/angular-reviewer/configs/codex.yaml

@@ -0,0 +1,2 @@
+name: angular-reviewer
+description: Review Angular PRs and code for best practices, performance issues, and modern patterns.

package/agents/angular-reviewer/configs/opencode.yaml

@@ -0,0 +1,5 @@
+description: Review Angular PRs and code for best practices, performance issues, and modern patterns.
+mode: subagent
+permission:
+  edit: allow
+  bash: ask

package/dist/adapters/claude/index.js

@@ -0,0 +1,45 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { parse as parseYaml } from 'yaml';
+const DEFAULT_CONFIG = {
+    description: 'Angular agent for Claude',
+    name: 'angular-agent',
+    tools: 'Read, Grep, Glob, Edit, Write, Bash',
+};
+function loadConfigFromAgent(agentBasePath, ai) {
+    const configPath = join(agentBasePath, 'configs', `${ai}.yaml`);
+    try {
+        return parseYaml(readFileSync(configPath, 'utf-8'));
+    }
+    catch {
+        return {};
+    }
+}
+export function createClaudeAdapter() {
+    return {
+        name: 'claude',
+        description: 'Claude Code',
+        defaultDir: '.claude/agents',
+        extension: 'md',
+        generate(agent, config) {
+            const agentConfig = loadConfigFromAgent(agent.basePath, 'claude');
+            const cfg = { ...DEFAULT_CONFIG, ...agentConfig, ...config };
+            const frontmatter = [
+                '---',
+                `name: ${cfg.name || agent.metadata.name}`,
+                `description: ${cfg.description || agent.metadata.description}`,
+                `tools: ${cfg.tools || 'Read, Grep, Glob, Edit, Write, Bash'}`,
+                '---',
+                '',
+            ];
+            return {
+                filename: `${agent.metadata.name}.md`,
+                content: frontmatter.join('\n') + agent.instructions.content,
+            };
+        },
+        getInstallPath(name, targetDir) {
+            const base = targetDir || this.defaultDir;
+            return `${base}/${name}.${this.extension}`;
+        },
+    };
+}

package/dist/adapters/codex/index.js

@@ -0,0 +1,46 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { parse as parseYaml } from 'yaml';
+const DEFAULT_CONFIG = {
+    description: 'Angular agent for Codex',
+    name: 'angular-agent',
+};
+function loadConfigFromAgent(agentBasePath, ai) {
+    const configPath = join(agentBasePath, 'configs', `${ai}.yaml`);
+    try {
+        return parseYaml(readFileSync(configPath, 'utf-8'));
+    }
+    catch {
+        return {};
+    }
+}
+export function createCodexAdapter() {
+    return {
+        name: 'codex',
+        description: 'OpenAI Codex CLI',
+        defaultDir: '.codex/agents',
+        extension: 'toml',
+        generate(agent, config) {
+            const agentConfig = loadConfigFromAgent(agent.basePath, 'codex');
+            const cfg = { ...DEFAULT_CONFIG, ...agentConfig, ...config };
+            const escapedInstructions = agent.instructions.content
+                .replace(/\\/g, '\\\\')
+                .replace(/"/g, '\\"')
+                .replace(/\n/g, '\\n');
+            const content = [
+                `name = "${cfg.name || agent.metadata.name}"`,
+                `description = "${cfg.description || agent.metadata.description}"`,
+                `developer_instructions = "${escapedInstructions}"`,
+                '',
+            ].join('\n');
+            return {
+                filename: `${agent.metadata.name}.toml`,
+                content,
+            };
+        },
+        getInstallPath(name, targetDir) {
+            const base = targetDir || this.defaultDir;
+            return `${base}/${name}.${this.extension}`;
+        },
+    };
+}

package/dist/adapters/copilot/index.js

@@ -0,0 +1,37 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { parse as parseYaml } from 'yaml';
+const DEFAULT_CONFIG = {
+    description: 'Angular agent for GitHub Copilot',
+    name: 'angular-agent',
+};
+function loadConfigFromAgent(agentBasePath, ai) {
+    const configPath = join(agentBasePath, 'configs', `${ai}.yaml`);
+    try {
+        return parseYaml(readFileSync(configPath, 'utf-8'));
+    }
+    catch {
+        return {};
+    }
+}
+export function createCopilotAdapter() {
+    return {
+        name: 'copilot',
+        description: 'GitHub Copilot',
+        defaultDir: '.github',
+        extension: 'md',
+        generate(agent, config) {
+            const agentConfig = loadConfigFromAgent(agent.basePath, 'copilot');
+            const cfg = { ...DEFAULT_CONFIG, ...agentConfig, ...config };
+            const header = `# ${cfg.name || agent.metadata.name}\n\n${cfg.description || agent.metadata.description}\n\n`;
+            return {
+                filename: `copilot-instructions-${agent.metadata.name}.md`,
+                content: header + agent.instructions.content,
+            };
+        },
+        getInstallPath(name, targetDir) {
+            const base = targetDir || this.defaultDir;
+            return `${base}/${name}-instructions.${this.extension}`;
+        },
+    };
+}

package/dist/adapters/cursor/index.js

@@ -0,0 +1,43 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { parse as parseYaml } from 'yaml';
+const DEFAULT_CONFIG = {
+    description: 'Angular agent for Cursor',
+    name: 'angular-agent',
+};
+function loadConfigFromAgent(agentBasePath, ai) {
+    const configPath = join(agentBasePath, 'configs', `${ai}.yaml`);
+    try {
+        return parseYaml(readFileSync(configPath, 'utf-8'));
+    }
+    catch {
+        return {};
+    }
+}
+export function createCursorAdapter() {
+    return {
+        name: 'cursor',
+        description: 'Cursor AI IDE',
+        defaultDir: '.cursor/rules',
+        extension: 'mdc',
+        generate(agent, config) {
+            const agentConfig = loadConfigFromAgent(agent.basePath, 'cursor');
+            const cfg = { ...DEFAULT_CONFIG, ...agentConfig, ...config };
+            const frontmatter = [
+                '---',
+                `description: ${cfg.description || agent.metadata.description}`,
+                'alwaysApply: false',
+                '---',
+                '',
+            ];
+            return {
+                filename: `${agent.metadata.name}.mdc`,
+                content: frontmatter.join('\n') + agent.instructions.content,
+            };
+        },
+        getInstallPath(name, targetDir) {
+            const base = targetDir || this.defaultDir;
+            return `${base}/${name}.${this.extension}`;
+        },
+    };
+}

package/dist/adapters/opencode/index.js

@@ -0,0 +1,53 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { parse as parseYaml } from 'yaml';
+const DEFAULT_CONFIG = {
+    description: 'Angular agent for OpenCode',
+    mode: 'subagent',
+    permission: {
+        edit: 'allow',
+        bash: 'ask',
+    },
+};
+function loadConfigFromAgent(agentBasePath, ai) {
+    const configPath = join(agentBasePath, 'configs', `${ai}.yaml`);
+    try {
+        return parseYaml(readFileSync(configPath, 'utf-8'));
+    }
+    catch {
+        return {};
+    }
+}
+export function createOpenCodeAdapter() {
+    return {
+        name: 'opencode',
+        description: 'OpenCode AI coding agent',
+        defaultDir: '.opencode/agents',
+        extension: 'md',
+        generate(agent, config) {
+            const agentConfig = loadConfigFromAgent(agent.basePath, 'opencode');
+            const cfg = { ...DEFAULT_CONFIG, ...agentConfig, ...config };
+            const frontmatter = [
+                '---',
+                `description: ${cfg.description || agent.metadata.description}`,
+                `mode: ${cfg.mode || 'subagent'}`,
+            ];
+            if (cfg.permission) {
+                frontmatter.push('permission:');
+                const perm = cfg.permission;
+                for (const [key, value] of Object.entries(perm)) {
+                    frontmatter.push(`  ${key}: ${value}`);
+                }
+            }
+            frontmatter.push('---', '');
+            return {
+                filename: `${agent.metadata.name}.md`,
+                content: frontmatter.join('\n') + agent.instructions.content,
+            };
+        },
+        getInstallPath(name, targetDir) {
+            const base = targetDir || this.defaultDir;
+            return `${base}/${name}.${this.extension}`;
+        },
+    };
+}