Skip to main content
affpapa.org
RU EN
skill

angular · davila7 — Claude Code skill: what it does, how to install

This skill guides Angular v20+ work with Signals, standalone components, zoneless setup, SSR, and reactive code. Use it for new apps or staged upgrades.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill development/angular
Open on GitHub

What angular does

The skill is aimed at Angular v20+ projects. It first considers the Angular version and project layout, then guides the agent toward Signals, standalone components, zoneless change detection, SSR, prerendering, and hydration. It also covers reactive design choices.

Its workflow keeps typing and reactivity in view, then asks for a build and test check. Signals fit local state and derived values, while the source assigns HTTP requests and more involved asynchronous flows to RxJS. That distinction helps keep each tool in its intended role.

A project that cannot move to Angular v20+ falls outside this skill’s intended use. AngularJS migrations should use angular-migration, and an existing app should be refactored in stages rather than through one large rewrite.

What it helps with

  • start an Angular v20+ application
  • move component state to Signals
  • replace NgModules with standalone components
  • configure SSR, prerendering, or hydration

Example prompts for the agent

  • Build an Angular v20+ profile component with Signals and the standalone API.
  • Migrate this Angular feature from NgModules to standalone components without losing types.
  • Review this project for zoneless change detection, then validate it with a build and tests.

How to install angular

1claude-code-templates

npx claude-code-templates@latest --skill development/angular

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill angular -a claude-code

3Manually: put the files in place

~/.claude/skills/angular/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/angular/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about angular

How do I install angular in Claude Code?

Run npx claude-code-templates@latest --skill development/angular.

What does the angular skill do?

It guides Claude Code through Angular v20+ work involving Signals, standalone components, zoneless applications, SSR, and reactive patterns. It also includes a build-and-test validation step.

Can I use angular to migrate from AngularJS?

No. The description directs AngularJS migration work to the separate angular-migration skill.

Similar skills

All skills for Frontend and UI →

angular by other authors comes first.

angular Mindrally Configures your AI agent to follow official Angular and TypeScript conventions with standalone components, reactive signals, and strict interfaces. CX Codex +1 816installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set495

The whole set →
game-testing-framework This command plans a testing setup for a game project, from gameplay checks to performance benchmarks and CI integration. Use it when tests need a shared structure. 219installs setup-cdn-optimization A slash command that walks your agent through CDN configuration: caching, compression, image formats and cache invalidation. 218installs marp-slide Turns a rough outline into a Marp slide file and picks a fitting look along the way. Handy when you need a deck, not markup. 217installs discord-notifications Posts a Discord message when Claude stops working or a subagent finishes. Useful when you step away from the terminal and want a ping on completion. 217installs bash-linux A Bash reference skill for macOS and Linux: command chaining, files, processes, error handling. Useful when the agent edits shell scripts or digs through logs. 215installs spreadsheet A skill for spreadsheet tasks: build workbooks with formulas, edit existing files, compute metrics and add charts. Useful when formulas and styling must survive the edit. 214installs game-analytics-integration Plan game analytics for player activity, technical performance, and business metrics. Run the command when you need to map out an analytics system for a game project. 214installs implement-graphql-api A slash command that builds a GraphQL API: schema, resolvers, subscriptions and N+1 protection. Useful when you need a real backend, not a sketch. 212installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor