🎯

frontend-angular-store

🎯Skill

from duc01226/easyplatform

VibeIndex|
What it does

frontend-angular-store skill from duc01226/easyplatform

πŸ“¦

Part of

duc01226/easyplatform(87 items)

frontend-angular-store

Installation

πŸ“‹ No install commands found in docs. Showing default command. Check GitHub for actual instructions.
Quick InstallInstall with npx
npx skills add duc01226/easyplatform --skill frontend-angular-store
7Installs
3
-
Last UpdatedJan 29, 2026

Skill Details

SKILL.md

Use when implementing state management with PlatformVmStore for complex components requiring reactive state, effects, and selectors.

Overview

# Angular Store Development Workflow

Use when implementing PlatformVmStore state management for lists, CRUD, complex state, or shared/cached data.

Decision Tree

```

What kind of state?

β”œβ”€β”€ Component-scoped CRUD list β†’ @Injectable() + providers: [Store]

β”œβ”€β”€ Shared state between components β†’ @Injectable({ providedIn: 'root' })

β”œβ”€β”€ Form with dependent lookups β†’ @Injectable() + forkJoin for parallel load

β”œβ”€β”€ Cached lookup data β†’ @Injectable({ providedIn: 'root' }) + enableCaching

└── Simple component (no store) β†’ Use AppBaseVmComponent instead

```

Workflow

  1. Search existing stores: grep "{Feature}Store" --include="*.ts"
  2. Read design system docs (see Read Directives below)
  3. Define state interface with all required properties
  4. Implement vmConstructor with default state
  5. Add selectors via select(), effects via effectSimple(), updaters via updateState()
  6. Integrate with component: extend AppBaseVmStoreComponent, provide store
  7. Verify checklist below

Key Rules

  • Effects use effectSimple(fn, 'requestKey') - second param auto-tracks loading state
  • State updates must be immutable: updateState(state => ({ items: [...state.items, newItem] }))
  • Selectors are memoized via select() - return Signal
  • Use tapResponse(success, error) inside effects
  • Component-scoped: providers: [Store] in @Component
  • Singleton cached: @Injectable({ providedIn: 'root' }) + enableCaching

File Location

```

src/Frontend/apps/{app-name}/src/app/features/{feature}/

β”œβ”€β”€ {feature}.store.ts

└── {feature}.component.ts

```

⚠️ MUST READ Before Implementation

IMPORTANT: You MUST read these files before writing any code. Do NOT skip.

  1. ⚠️ MUST READ .claude/skills/shared/angular-design-system.md β€” hierarchy, platform APIs
  2. ⚠️ MUST READ .claude/skills/shared/bem-component-examples.md β€” BEM template examples
  3. ⚠️ MUST READ .claude/skills/frontend-angular-store/references/store-patterns.md β€” CRUD, dependent data, caching, integration
  4. ⚠️ MUST READ target app design system: docs/design-system/06-state-management.md

Anti-Patterns

  • Direct api.subscribe() without effectSimple - no loading state tracking
  • this.currentVm().items.push(newItem) - mutates state directly
  • Missing providers: [Store] in component decorator
  • Using observerLoadingErrorState inside effectSimple (it handles loading internally)
  • Store as singleton when it should be component-scoped (or vice versa)

Verification Checklist

  • [ ] State interface defines all required properties
  • [ ] vmConstructor provides default state
  • [ ] Effects use effectSimple() with request key
  • [ ] Effects use tapResponse() for handling
  • [ ] Selectors use select() for memoization
  • [ ] State updates are immutable
  • [ ] Store provided at correct level (component vs root)
  • [ ] Caching configured if needed (enableCaching, cachedStateKeyName)

IMPORTANT Task Planning Notes

  • Always plan and break many small todo tasks
  • Always add a final review todo task to review the works done at the end to find any fix or enhancement needed