agentskills.codes
CR

create-signal-store

by FabianGosebrinkCodingSource

Ensures consistent NgRx Signal Store implementation for Angular state management.

BackendFrontendAngularTypeScript

Install

mkdir -p .claude/skills/create-signal-store && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/19006" && unzip -o skill.zip -d .claude/skills/create-signal-store && rm skill.zip

Installs to .claude/skills/create-signal-store

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Use when the user asks to add state management or create a store for a feature in this Angular workspace.
105 chars✓ has a “when” trigger
Advanced

Key capabilities

  • →Create a Signal Store with `signalStore`
  • →Manage collections with `withEntities<T>()`
  • →Handle flags and scalar values with `withState({ ... })`
  • →Implement asynchronous actions as `rxMethod` with `tapResponse`
  • →Track loading state with a `loading` flag

How it works

The skill guides the creation of an NgRx Signal Store using `signalStore`, managing entities and state, implementing asynchronous actions with `rxMethod` and `tapResponse`, and tracking loading states.

Inputs & outputs

You give it
Request to add state management or create a store for an Angular feature
You get back
NgRx Signal Store following architectural patterns

When to use create-signal-store

  • →Create a new state management store
  • →Add async data fetching to an Angular component
  • →Standardize Angular store implementation

About this skill

Creating a Signal Store

In this workspace we manage state exclusively with the NgRx Signal Store. When asked to create a store, follow these rules:

  • Create the store with signalStore from @ngrx/signals.
  • Decide providedIn: 'root' vs. component-provided scope using the placement test in the state-management skill — don't default to root.
  • Keep collections with withEntities<T>(); keep flags and scalar values with withState({ ... }).
  • Implement every asynchronous action as an rxMethod and wrap the HTTP call in tapResponse. Track loading with a loading flag kept in withState({ loading: false }): set it to true before the call in a leading tap, and back to false when the data arrives.
  • On success, patch the state AND show a success notification through the injected NotificationService. On error, show an error notification.
  • Inject services through default parameters of the withMethods factory.
  • If the store should load its data immediately, call the load method from a withHooks({ onInit }) hook.

Example

export const DogsStore = signalStore(
  { providedIn: 'root' },
  withEntities<Dog>(),
  withState({ loading: false }),
  withMethods(
    (
      store,
      notificationService = inject(NotificationService),
      dogsApiService = inject(DogsApiService),
    ) => ({
      loadDogs: rxMethod<void>(
        pipe(
          tap(() => patchState(store, { loading: true })),
          exhaustMap(() =>
            dogsApiService.getDogs().pipe(
              tapResponse({
                next: (dogs) => {
                  patchState(store, setAllEntities(dogs), { loading: false });
                  notificationService.showSuccess('Dogs Loaded');
                },
                error: () => notificationService.showError(),
              }),
            ),
          ),
        ),
      ),
    }),
  ),
  withHooks({
    onInit(store) {
      store.loadDogs();
    },
  }),
);

When not to use it

  • →When not asked to add state management
  • →When not asked to create a store for a feature in this Angular workspace

Limitations

  • →Requires `providedIn: 'root'` vs. component-provided scope decision
  • →Requires `NotificationService` for success/error notifications
  • →Requires `DogsApiService` for data fetching in the example

How it compares

This skill enforces a strict architectural pattern for NgRx Signal Stores, including specific methods for async actions and loading states, ensuring consistency across the Angular workspace unlike ad-hoc store creation.

Compared to similar skills

create-signal-store side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
create-signal-store (this skill)014dNo flagsAdvanced
angular1003moReviewAdvanced
angular-state-management83moNo flagsIntermediate
angular-modernization47moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

angular

sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.

100129

angular-state-management

sickn33

Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.

823

angular-modernization

bitwarden

Modernizes Angular code such as components and directives to follow best practices using both automatic CLI migrations and Bitwarden-specific patterns. YOU must use this skill when someone requests modernizing Angular code. DO NOT invoke for general Angular discussions unrelated to modernization.

422

angular-routing

analogjs

Implement routing in Angular v20+ applications with lazy loading, functional guards, resolvers, and route parameters. Use for navigation setup, protected routes, route-based data loading, and nested routing. Triggers on route configuration, adding authentication guards, implementing lazy loading, or reading route parameters with signals.

14

igniteui-angular-grids

igniteui

Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data.

14

igniteui-angular-components

igniteui

Provides guidance on all non-grid Ignite UI for Angular UI components including application setup and architecture, form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, reactive forms), layout (Tabs, Bottom Navigation, Stepper, Accordion, Splitter, Navigation Drawer, Layout Manager), data display (List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Bar, Linear Progress Bar, Circular Progress Bar, Chat), feedback/overlays (Dialog, Snackbar, Toast, Banner), directives (Button, Ripple, Tooltip, Drag and Drop), Dock Manager, and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart, IgxCategoryChart, IgxFinancialChart, IgxDataChart, IgxPieChart). Use when users ask about any Ignite UI Angular component that is not a data grid, such as forms, inputs, dropdowns, date pickers, dialogs, navigation, lists, trees, cards, charts, or application scaffolding and setup.

12

Search skills

Search the agent skills registry