perigon-angular
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
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
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/perigon-angular/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How perigon-angular Compares
| Feature / Agent | perigon-angular | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/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
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
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
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
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
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
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
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
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
Perigon ASP.NET Core + EF Core + Aspire conventions
perigon-agent
Pointers for Copilot/agents to apply Perigon conventions
angular-component
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
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().