perigon-angular

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

25 stars

Best use case

perigon-angular is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

Teams using perigon-angular should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/perigon-angular/SKILL.md --create-dirs "https://raw.githubusercontent.com/ComeOnOliver/skillshub/main/skills/aiskillstore/marketplace/aterdev/perigon-angular/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/perigon-angular/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How perigon-angular Compares

Feature / Agentperigon-angularStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

## When to use
- Frontend work in src/ClientApp/WebApp (components, routes, services, styles, i18n).

## Usage
- Layout: entry main.ts; app config in app/app.config.ts; routes in app/app.routes.ts; layout shell in app/layout/*; pages under app/pages/*; shared UI in app/share/components; pipes in app/share/pipe; guards in app/share/auth.guard.ts.
- Components: standalone only; avoid NgModules. Use Angular Material; theming in styles.scss/theme.scss/vars.scss; keep page styles alongside each *.scss.
- State/forms: prefer signals and signal forms; avoid legacy two-way binding when signals suffice.
- Services/API: HTTP clients/types in app/services (admin-client, base.service, models/services); keep customer-http.interceptor active; honor proxy.conf.json; use environments/environment*.ts for endpoints/config.
- i18n: strings live in assets/i18n/*.json; align keys with app/share/i18n-keys.ts and scripts/i18n-keys.js.
- UX/auth: reuse layout/navigation components; auth via auth.service + auth.guard; paginator intl in share/custom-paginator-intl.ts.
- Tooling: use pnpm; avoid builds/tests unless requested. Keep ESLint/tsconfig defaults; prefer standalone Material imports over deprecated modules.

Related Skills

angular-signals

25
from ComeOnOliver/skillshub

Implement signal-based reactive state management in Angular v20+. Use for creating reactive state with signal(), derived state with computed(), dependent state with linkedSignal(), and side effects with effect(). Triggers on state management questions, converting from BehaviorSubject/Observable patterns to signals, or implementing reactive data flows.

angular-http

25
from ComeOnOliver/skillshub

Implement HTTP data fetching in Angular v20+ using resource(), httpResource(), and HttpClient. Use for API calls, data loading with signals, request/response handling, and interceptors. Triggers on data fetching, API integration, loading states, error handling, or converting Observable-based HTTP to signal-based patterns.

angular-directives

25
from ComeOnOliver/skillshub

Create custom directives in Angular v20+ for DOM manipulation and behavior extension. Use for attribute directives that modify element behavior/appearance, structural directives for portals/overlays, and host directives for composition. Triggers on creating reusable DOM behaviors, extending element functionality, or composing behaviors across components. Note - use native @if/@for/@switch for control flow, not custom structural directives.

angular-di

25
from ComeOnOliver/skillshub

Implement dependency injection in Angular v20+ using inject(), injection tokens, and provider configuration. Use for service architecture, providing dependencies at different levels, creating injectable tokens, and managing singleton vs scoped services. Triggers on service creation, configuring providers, using injection tokens, or understanding DI hierarchy.

angular

25
from ComeOnOliver/skillshub

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.

angular-ui-patterns

25
from ComeOnOliver/skillshub

Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.

angular-migration

25
from ComeOnOliver/skillshub

Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or modernizing legacy Angular code.

angular-best-practices

25
from ComeOnOliver/skillshub

Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.

perigon-backend

25
from ComeOnOliver/skillshub

Perigon ASP.NET Core + EF Core + Aspire conventions

perigon-agent

25
from ComeOnOliver/skillshub

Pointers for Copilot/agents to apply Perigon conventions

angular-component

25
from ComeOnOliver/skillshub

Create modern Angular standalone components following v20+ best practices. Use for building UI components with signal-based inputs/outputs, OnPush change detection, host bindings, content projection, and lifecycle hooks. Triggers on component creation, refactoring class-based inputs to signals, adding host bindings, or implementing accessible interactive components.

rxjs-patterns-for-angular

25
from ComeOnOliver/skillshub

Implement RxJS patterns for reactive programming in Angular. Use this skill when working with Observables, operators, subscriptions, async data flows, and error handling. Covers common patterns like combineLatest, switchMap, debounceTime, catchError, retry logic, and integration with Angular Signals using toSignal() and toObservable(). Ensures proper subscription cleanup with takeUntilDestroyed().