create-claude-workspace 1.1.69 → 1.1.71

package/dist/template/.claude/profiles/angular.md

@@ -47,8 +47,14 @@ nx g @nx/js:library --directory=libs/[domain]/[layer] --no-interactive
 
 **Creating components:**
 ```bash
+# Each component MUST have its own subdirectory — [name] in --path is REQUIRED
 nx g @nx/angular:component --path=libs/[domain]/[layer]/src/lib/[name] --no-interactive
+
+# Example: badge component in shared/ui library
+nx g @nx/angular:component --path=libs/shared/ui/src/lib/badge --no-interactive
+# Result: libs/shared/ui/src/lib/badge/badge.ts, badge.html, badge.scss
 ```
+**NEVER** omit the component name from `--path`. Without it, all component files land flat in `lib/` — no subdirectory separation.
 
 **Bundler rule:** Omit `--bundler` for internal monorepo libs (no bundler needed). Only add `--bundler=esbuild|tsc|swc` for **publishable/buildable** libraries (npm packages, standalone deploys).
 
@@ -148,6 +154,53 @@ export class ProjectDetail {
 - WebSocket/SSE streams — use dedicated services
 - Non-HTTP async — use `resource()` instead
 
+## Forms — Signal Forms API
+
+Use the **signal-based forms API** (`@angular/forms/signals`) for all form handling when available in the project's Angular version (stable or experimental). NEVER use legacy `FormControl`/`FormGroup`/`FormBuilder`/`ReactiveFormsModule`.
+
+**Signal forms pattern:**
+```typescript
+import { Component, signal } from '@angular/core';
+import { form, FormField, required, email, minLength } from '@angular/forms/signals';
+
+@Component({
+  imports: [FormField],
+  template: `
+    <input type="email" [formField]="loginForm.email" />
+    <input type="password" [formField]="loginForm.password" />
+    <button [disabled]="loginForm.invalid()">Submit</button>
+  `,
+})
+export class LoginForm {
+  readonly loginModel = signal({ email: '', password: '' });
+  readonly loginForm = form(this.loginModel, (schema) => {
+    required(schema.email);
+    email(schema.email);
+    required(schema.password);
+    minLength(schema.password, 8);
+  });
+
+  // Field state is signal-based:
+  // this.loginForm.email().value()     — current value (signal)
+  // this.loginForm.email().dirty()     — boolean signal
+  // this.loginForm.email().invalid()   — boolean signal
+  // this.loginForm.email().value.set('new@email.com') — update programmatically
+}
+```
+
+**Key rules:**
+- `form()` function with a signal model — form structure derived from model shape
+- Validators from `@angular/forms/signals`: `required()`, `email()`, `minLength()`, `maxLength()`, `min()`, `max()`, `pattern()`
+- Template binding via `[formField]` directive (import `FormField`)
+- All field state (value, dirty, invalid, disabled) is signal-based — bind directly in templates
+- No `.valueChanges` subscriptions — state is already reactive
+
+**NEVER:**
+- `new FormControl()` / `new FormGroup()` / `new FormArray()` / `FormBuilder` — use `form()` with signal model
+- `ReactiveFormsModule` / `FormsModule` — use `FormField` directive from `@angular/forms/signals`
+- `.valueChanges.subscribe()` — field state is already reactive via signals
+- Wrapping validators in arrow functions (`control => Validators.required(control)`)
+
 ## Templates — MINIMAL Logic
 
 - ZERO method calls in templates — wrap in `computed()`, bind the signal
@@ -343,6 +396,8 @@ describe('CardBadge', () => {
 
 When reviewing Angular code, check:
 - Signal usage: signal/computed/input/output/model correctly used
+- Forms: signal forms API used (no legacy FormControl/FormGroup/FormBuilder)
+- Component file organization: each component in its own subdirectory (not flat in lib/)
 - ZERO method calls in templates — all derived state in computed()
 - Feature vs dumb separation — no inject() in ui/ components
 - Content projection (composite pattern) over deep @Input trees

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-claude-workspace",
-  "version": "1.1.69",
+  "version": "1.1.71",
   "description": "Scaffold a project with Claude Code agents for autonomous AI-driven development",
   "type": "module",
   "bin": {