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. It is especially useful for teams working in multi. Angular 21+ standalone/Material/signal conventions for Perigon WebApp
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "perigon-angular" skill to help with this workflow task. Context: Angular 21+ standalone/Material/signal conventions for Perigon WebApp
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
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
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-state-management
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.
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().
angular-cdk-integration
Create components using Angular CDK utilities including drag-drop, overlay, portal, scrolling, a11y, clipboard, and platform detection for ng-events project
angular-20-standalone-component
Create Angular 20 standalone components using modern patterns: Signals for state management, input()/output() functions (not decorators), @if/@for/@switch control flow (not *ngIf/*ngFor), inject() dependency injection (not constructor), and OnPush change detection. Use this skill when scaffolding new UI components that need reactive state, form handling, or integration with services following the three-layer architecture.
azure-quotas
Check/manage Azure quotas and usage across providers. For deployment planning, capacity validation, region selection. WHEN: "check quotas", "service limits", "current usage", "request quota increase", "quota exceeded", "validate capacity", "regional availability", "provisioning limits", "vCPU limit", "how many vCPUs available in my subscription".