dev-create-component

分类: 工具与效率 | 上传者: HerbertJulio | 下载: 0 | 版本: v1.0（最新）

Use when adding a new UI component to an existing module - handles templates, inputs, and test scaffolding.

更新日志: Source: GitHub https://github.com/HerbertJulio/specialist-agent

目录结构

当前层级: packs/angular/skills/dev-create-component/

📄 SKILL.md 1.5 KB

SKILL.md

---
name: dev-create-component
description: "Use when adding a new UI component to an existing module - handles templates, inputs, and test scaffolding."
user-invocable: true
argument-hint: "[ComponentName]"
allowed-tools: Read, Write, Edit, Bash, Glob, Grep
---

Create an Angular standalone component following `docs/ARCHITECTURE.md` section 5.

Component: $ARGUMENTS

## Steps

1. Read `docs/ARCHITECTURE.md` section 5.

2. Determine the type:
   - **Feature component** -> `src/modules/[module]/components/kebab-case.component.ts`
   - **Shared component** -> `src/shared/components/kebab-case.component.ts`
   - **Page** -> `src/modules/[module]/pages/kebab-case-page.component.ts`

3. Create the component with the standard template:

```typescript
import { Component, ChangeDetectionStrategy, inject, input, output, signal, computed } from '@angular/core'

@Component({
  selector: 'app-kebab-case',
  standalone: true,
  imports: [],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- clean template, < 100 lines -->
  `,
})
export class PascalCaseComponent {
  // Inputs / Outputs (signal-based)
  readonly myInput = input<string>()
  readonly myOutput = output<string>()

  // Injected dependencies
  private readonly service = inject(MyService)

  // Local state, computed, handlers...
}
```

4. Checklist:
   - Standalone component ✅
   - input()/output() signals ✅
   - inject() for DI ✅
   - OnPush change detection ✅
   - < 200 lines ✅
   - kebab-case.component.ts ✅

5. Validate: `npx tsc --noEmit`

登录后下载/点赞/收藏 ❤ 6 | ★ 0

dev-create-component

目录结构

SKILL.md

举报内容

提示