angular-signals

Files (1)

• SKILL.md

SKILL.md (first lines)

# Angular Signals

Critical rules for Angular's reactive primitives. Misuse of effects is the #1 source of bugs.

## Signal Usage

- **`signal()`** for local mutable state
- **`computed()`** for any value derived from other signals — always the first choice for transformations
- **`set()` or `update()`** to modify signal values
- Keep state transformations pure and predictable

## Effects — Critical Rules

**NEVER set a signal inside an effect.** This creates circular dependencies and infinite loops.

```typescript
// FORBIDDEN — infinite loop
effect(() => {
  this.mySignal.set(this.someInput());
});

// CORRECT — use computed
mySignal = computed(() => this.someInput());
```

**Effects are for side effects ONLY:**
- Logging and analytics
- DOM manipulation (rare, escape hatch)
- External event emissions
- **NEVER for state updates** — use `computed()` instead

## When to Use What

| Need | Use |
|:-----|:----|
| Local mutable state | `signal()` |
| Derived/transformed value | `computed()` |
| React to changes with side effects | `effect()` |
| Combine multiple signals | `computed()` |

From TheNordicOne/claude-skills, MIT.

More from TheNordicOne/claude-skills