analogjs/angular-skills
10 skills52.3k installs5.9k starsGitHub
Install
npx skills add https://github.com/analogjs/angular-skillsSkills in this repo
1Angular ComponentAngular Component is a pattern-oriented agent skill from the AnalogJS skills set that compresses recurring Angular 17+ component design into copy-ready examples. Solo builders using Claude Code or Cursor on SaaS dashboards, internal tools, or Analog-powered sites reach for it when signals, queries, or two-way binding drift into verbose boilerplate. The skill walks model() for two-way sliders, required models, view and content queries for galleries and projected content, DI inside components, parent-child communication, and dynamic component mounting—each with idiomatic TypeScript snippets rather than framework changelog prose. It assumes you are already in an Angular repo and need fast correctness on modern APIs, not a greenfield tutorial. Pair it with your routing and state skills when a feature spans multiple components. It stays in the build frontend lane because every section maps directly to files your agent edits in src/app.8.6kinstalls2Angular SignalsAngular Signal Patterns is a reference skill for solo builders and small teams shipping Angular applications with modern reactive primitives. It concentrates on the Resource API for data loading tied to signal parameters, computed accessors for value and loading state, and related patterns for stores, forms, and asynchronous work. Install it when you are refactoring components away from ad-hoc subscriptions or when onboarding an agent to write idiomatic @angular/core signal code. The material assumes familiarity with TypeScript components and fits SaaS dashboards or mobile-capable Angular clients. Intermediate complexity: you should already know basic Angular components before adopting resource() and signal stores. Outputs are implementation patterns your agent can paste and adapt—not a full project scaffold.6.4kinstalls3Angular Formsangular-forms is an agent skill from the Analog Angular skills pack that teaches coding agents how to ship maintainable form UIs in modern Angular using reactive forms rather than ad-hoc template-driven snippets. Solo builders reach for it during Build when scaffolding auth screens, settings panels, wizards, or admin CRUD with validation rules, dynamic rows, and clear error messaging. The document walks through FormBuilder groups, strongly typed controls, FormArray for repeating fields, custom validators, and form state conventions—aligned with current standalone-component and inject()-style examples. Complexity is intermediate: you should already have an Angular project and understand TypeScript generics at a basic level. Agents apply the patterns directly into components and templates, producing code that matches production stability expectations called out in the skill. It does not replace backend validation or API design; it ensures the client layer is consistent, testable, and idiomatic for Angular 17+ style projects.5.5kinstalls4Angular RoutingAngular Routing is a frontend agent skill that encodes production Router patterns for standalone and lazy-loaded Angular apps. Solo builders shipping SaaS dashboards or mobile-web shells use it when wiring canActivate and canMatch guards, child routes, named outlets, and data resolvers without re-reading fragmented docs. The readme walks through dynamic title resolvers, complete auth setup sketches, breadcrumb and tab navigation, modal routes, and preloading strategies—ideal when validate-phase prototypes graduate into a real route map. It reduces rework before ship-phase security passes on auth flows and launch-phase SEO when public paths and titles must stay consistent. Treat it as a pattern catalog the agent applies while generating or refactoring route config and guard services.5.4kinstalls5Angular HttpAngular HTTP Patterns is a procedural agent skill for solo and indie builders shipping Angular applications who need consistent, testable ways to talk to REST APIs. It walks through encapsulating endpoints in injectable services, using modern signal-driven httpResource for reactive loads, and covering operational concerns that break naive fetch wrappers: cache strategies, paginated lists, multipart uploads, and aborting in-flight calls when routes or filters change. The skill emphasizes separation of HTTP mechanics from presentation so ViewModels and components stay thin. It is meant to be invoked when scaffolding API modules, refactoring scattered HttpClient calls, or when an agent would otherwise invent one-off subscriptions and duplicate error handling. Compared to generic REST advice, it is Angular-specific—including RxJS/Observable patterns implied by HttpClient—and pairs naturally with Angular routing and state work elsewhere in the same catalog. Intermediate familiarity with Angular DI and TypeScript interfaces is assumed; deliverables are service files, resource wiring, and test setups aligned with the documented patterns.5.1kinstalls6Angular DiAngular-di is an AnalogJS Angular skills module for solo builders shipping Angular applications who want predictable dependency injection. It documents facade services that unify multiple backends behind one API, signal-based state services, abstract class tokens, hierarchical and dynamic providers, and testing patterns that rely on Angular’s inject() model. The table of contents spans service patterns, token strategies, scoped providers, DI-friendly tests, and DestroyRef cleanup—typical needs when a one-person team grows feature modules without turning every component into a god object. Use it during active frontend build work when you are refactoring services, defining shared state, or preparing mock providers for unit tests.4.7kinstalls7Angular TestingAngular Testing Patterns is a reference skill for solo and indie builders shipping Angular apps who want repeatable Vitest and harness-based tests instead of one-off chat snippets. It walks through snapshot checks, table-driven validation cases, timer-controlled async behavior, and structured coverage for routers, forms, directives, and pipes, then ties those unit layers to E2E setup. Install it when you are in the Ship phase and need agent-ready examples that match modern Angular testing stacks rather than legacy Karma-only habits. The skill is procedural knowledge packaged as copy-paste patterns, so your coding agent can extend suites consistently across features. It does not replace your CI matrix or Playwright/Cypress project wiring, but it standardizes how you ask the agent to add tests. Pair it with your app’s existing TestBed configuration and lint rules so generated specs stay aligned with team conventions.4.6kinstalls8Angular DirectivesAngular Directive Patterns is a reference skill for solo builders shipping Angular apps who need battle-tested attribute directives instead of one-off hacks. It walks through six capability areas—DOM manipulation, forms, intersection and resize observers, drag-and-drop, and permission checks—with TypeScript examples using current Angular patterns like inject, signal inputs, and afterNextRender. You reach for it during feature work when you need autofocus, select-all-on-focus, visibility-based loading, or conditional UI by role. The skill does not scaffold a project; it accelerates template-level behavior that otherwise slows polish and accessibility passes. Pair it with your component library and routing work in the Build phase so repetitive UX details stay consistent across pages.4.6kinstalls9Angular Toolingangular-tooling is an agent skill for solo builders maintaining Angular apps who need repeatable generator schematics, sane bundle budgets, and workspace plumbing without copying Stack Overflow fragments. It documents how to scaffold schematic collections with the devkit Rule/Tree APIs, wire local collections via npm link, and run ng generate against custom blueprints. Build optimization sections show angular.json budget entries so agents warn before your main bundle blows past production limits. Multi-project workspace, path alias, proxy, and CI/CD sections help indies keep one repo for app plus libs while local dev hits a backend through proxy config. Point your agent at this skill when you are extending the Angular CLI, tightening production builds, or aligning pipeline steps with ng build and test—not when you only need component UX patterns.4.3kinstalls10Angular SsrAngular-ssr is a patterns skill for solo builders shipping Angular apps that must render on the server for SEO, social previews, or faster first paint. It focuses on the failure modes that only appear when HTML from the server must match what the client hydrates—clock skew in templates, dynamic widgets, and DOM reuse quirks in development. The readme gives concrete TypeScript snippets: moving time-sensitive UI behind `afterNextRender`, using signals instead of one-shot constructor values, and selectively skipping hydration for volatile subtrees. Beyond hydration, it covers SEO optimization, authenticating users in SSR contexts, edge caching, structured error handling, and performance tuning with `provideClientHydration`. Use it when you have chosen Angular SSR and need guardrails before launch regressions show up as blank pages or console hydration errors.3.1kinstalls