New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Angular Modern

by WrongStack in WrongStack/WrongStack

Build and upgrade Angular applications with typed components, reactive state, dependency injection and verified routing.

MITAuto-check passedDevelopment

Install Angular Modern

skills CLI
$ npx skills add WrongStack/WrongStack --skill angular-modern -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install WrongStack/WrongStack angular-modern --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/core/skills/angular-modern .claude/skills/angular-modern && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
angular-modern
GitHub stars
371
Token cost
~801 tokens
SKILL.md length
288 words
Files
1
Skills in repo
100
Repo updated
First seen
Licence
MIT

At a glance

Build and upgrade Angular applications with typed components, reactive state, dependency injection and verified routing.

  • Works in 6 steps: Identify bootstrap, standalone/module… → Keep derivation in computed state and… → Clean up observable subscriptions, async… → …
  • Working on Angular forms
  • SKILL.md covers Selection card, Overview, Rules and Workflow, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Angular Modern is an agent skill from WrongStack/WrongStack. Build and upgrade Angular applications with typed components, reactive state, dependency injection and verified routing. Use when working on Angular forms, signals, rendering or migration; inspect zoneless/zone-based behavior rather than assuming either mode.

Its SKILL.md is about 800 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Design patterns. It works with Angular and TypeScript. The repository describes itself as: An AI coding agent that reads your code, edits files, runs commands, and reasons through bugs — across a terminal REPL, a full-screen TUI, and a browser UI, while you keep your… The licence is MIT.

When your agent uses it

  • Working on Angular forms
  • Inspect zoneless/zone-based behavior rather than assuming either mode

Example prompts

  • “/angular-modern”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Identify bootstrap, standalone/module conventions and change-detection mode.
  2. Keep derivation in computed state and side effects at intentional boundaries; do not create circular effect synchronization.
  3. Clean up observable subscriptions, async work and component resources using supported ownership/lifecycle APIs.
  4. Treat route guards and UI controls as navigation policy, not server authorization.
  5. Use typed forms and explicit pending/error states; validation semantics must match the server.
  6. Check SSR/hydration and browser-only APIs in the configured rendering mode.

What it can do on your machine

Read from SKILL.md and the folder at commit a744bdc. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • angular.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Angular Modern loads about 801 tokens when it runs. Until then it costs about 69 tokens; SKILL.md has 288 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~69
When it runs · the whole SKILL.md, loaded when a task matches
~801

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from WrongStack/WrongStack at commit a744bdc, republished under its MIT licence (© WrongStack). 288 words, ~801 tokens.

Download SKILL.mdSave it as .claude/skills/angular-modern/SKILL.md (or your agent's skills folder).
name
angular-modern
description
Build and upgrade Angular applications with typed components, reactive state, dependency injection and verified routing. Use when working on Angular forms, signals, rendering or migration; inspect zoneless/zone-based behavior rather than assuming either mode.
trigger
Build and upgrade Angular applications with typed components, reactive state, dependency injection and verified routing. Use when working on Angular forms…
version
1.0.1
required-capabilities
filesystem.read
optional-capabilities
filesystem.write, execution.shell, verification.run, web.research
metadata.routing-group
frontend
metadata.domain
web

Angular Modern

Selection card

  • Task: Angular signals and standalone components. / TR: Angular signals ve standalone bileşenler.
  • Start: Locate the affected route/component and its runtime/lockfile.
  • Finish: apply the acceptance checks below; report observed results and unresolved constraints.

Overview

Build and upgrade Angular applications with typed components, reactive state, dependency injection and verified routing.

Checked 2026-10-09: Angular core/CLI 22.2.2. Coordinate framework/compiler/CLI packages. Compiler-cli 22.2.2 declares TypeScript >=6.0 <6.1, so current TypeScript 7.0.2 is outside its supported range. Report this blocker; do not force the peer combination.

Rules

  1. Identify bootstrap, standalone/module conventions and change-detection mode.
  2. Keep derivation in computed state and side effects at intentional boundaries; do not create circular effect synchronization.
  3. Clean up observable subscriptions, async work and component resources using supported ownership/lifecycle APIs.
  4. Treat route guards and UI controls as navigation policy, not server authorization.
  5. Use typed forms and explicit pending/error states; validation semantics must match the server.
  6. Check SSR/hydration and browser-only APIs in the configured rendering mode.

Workflow

  1. Inspect project config, component/data conventions and supported version matrix.
  2. Upgrade through official migrations when requested and review generated changes.
  3. Implement the narrow feature with existing dependency and state boundaries.
  4. Test navigation, forms, change-detection notifications, lifecycle and SSR as applicable.
  5. Run configured type/lint/tests and production build.

Before returning

Version matrix and detection mode recorded; async cleanup and form behavior verified; SSR and build gaps stated.

Sources

Versioned facts checked 2026-10-09; refresh authoritative sources before new installs/upgrades. Angular compatibility, Zoneless.

Skills in scope

  • typescript-strict — typescript strict contracts and verification.
  • api-design — api design contracts and verification.
  • testing — testing contracts and verification.
  • design-system — create and maintain coherent visual tokens, themes and shared component states using the existing project system or WrongStack Design Studio.

© WrongStack, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in packages/core/skills/angular-modern of WrongStack/WrongStack.

Open the folder on GitHubat commit a744bdc

Compare with similar skills

Angular Modern next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Angular Modern compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Angular Modern this skillWrongStack/WrongStack371—~801Automated safety check: PassMIT
Angular Copfmflurry/settings-opencode171—~1.4kAutomated safety check: PassMIT
AST Visitor Pattern for Unionsprisma/orm48k—~830Automated safety check: PassApache-2.0
Effect TSmattiacerutti/supernova185—~2.8kAutomated safety check: PassMIT
Igniteui Angular LintingIgniteUI/igniteui-angular599—~614Automated safety check: PassCustom licence
Ng Forge Dynamic Formsng-forge/ng-forge101—~1.1kAutomated safety check: PassMIT

Similar skills

  • Angular Cop

    fmflurry/settings-opencode

    Pre-merge code review for Angular + TypeScript pull requests.

    171 GitHub stars~1.4k tokensUpdated 3 days ago
    DevelopmentAuto-check passed

  • AST Visitor Pattern for Unions

    prisma/orm

    Official

    Replaces a plain TypeScript union plus switch statements with frozen subclasses and a visitor interface when several places dispatch on the same variants.

    48k GitHub stars~830 tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Effect TS

    mattiacerutti/supernova

    Write idiomatic Effect v4 TypeScript following official best practices from effect-solutions and the Effect source.

    185 GitHub stars~2.8k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Igniteui Angular Linting

    IgniteUI/igniteui-angular

    Quick-reference for linting the core Ignite UI for Angular library.

    599 GitHub stars~614 tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Ng Forge Dynamic Forms

    ng-forge/ng-forge

    Write and validate @ng-forge/dynamic-forms FormConfig objects for Angular.

    101 GitHub stars~1.1k tokensUpdated 5 days ago
    DevelopmentAuto-check passed

  • AngularJS to Angular Migration

    wshobson/agents

    Guides migrating AngularJS 1.x apps to modern Angular: choosing a strategy, running a hybrid app with ngUpgrade, and converting controllers, directives and services.

    40k GitHub starsUsed in 11 repos~1.8k tokens
    DevelopmentAuto-check passed

More from WrongStack/WrongStack

All 100 skills in this repo

  • Tech Stack

    WrongStack/WrongStack

    Validate and upgrade dependencies against live registries and official migration guides in any ecosystem.

    371 GitHub stars~1.5k tokensUpdated yesterday
    Auto-check passed

  • Skill Creator

    WrongStack/WrongStack

    Create, improve and validate WrongStack SKILL.md bundles with precise discovery, progressive resources and current runtime contracts.

    371 GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed

  • Bug Hunter

    WrongStack/WrongStack

    A skill your agent uses when scanning source code for bugs, anti-patterns, code smells, or quality issues in a codebase, or when running a proof-driven bug hunt that must find, prove, fix, and…

    371 GitHub stars~2.4k tokensUpdated yesterday
    Auto-check passed

  • Design Craft

    WrongStack/WrongStack

    Design or substantially improve user-facing interfaces with a product-specific visual direction, content hierarchy, and rendered critique.

    371 GitHub stars~2.3k tokensUpdated yesterday
    Auto-check passed

  • Design Critique

    WrongStack/WrongStack

    A skill your agent uses to audit an interface that already exists and say precisely why it looks generated, templated, or unfinished — a scored rubric across composition, typography, color, states…

    371 GitHub stars~2.5k tokensUpdated yesterday
    Auto-check passed

  • Mailbox Bridge

    WrongStack/WrongStack

    A skill your agent uses when external coding agents (Claude Code, Aider, custom scripts) need to participate in the project's shared WrongStack mailbox, or when a user asks to "expose the mailbox"…

    371 GitHub stars~2.6k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Angular Modern

What does Angular Modern do?

Build and upgrade Angular applications with typed components, reactive state, dependency injection and verified routing. Angular Modern is an agent skill from WrongStack/WrongStack. Build and upgrade Angular applications with typed components, reactive state, dependency injection and verified routing.

When should I use Angular Modern?

Angular Modern fits situations like: working on Angular forms; inspect zoneless/zone-based behavior rather than assuming either mode.

How do I install Angular Modern in Claude Code?

Run `npx skills add WrongStack/WrongStack --skill angular-modern -a claude-code`. Or copy the skill folder (packages/core/skills/angular-modern in WrongStack/WrongStack) into .claude/skills/angular-modern in your project. Claude Code loads it when a task matches its description.

How do I install Angular Modern in Codex?

Run `npx skills add WrongStack/WrongStack --skill angular-modern -a codex`. Or copy the skill folder (packages/core/skills/angular-modern in WrongStack/WrongStack) into .agents/skills/angular-modern in your project. Codex loads it when a task matches its description.

Can I use Angular Modern in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add WrongStack/WrongStack --skill angular-modern -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/angular-modern, .gemini/skills/angular-modern, .github/skills/angular-modern and .opencode/skills/angular-modern in your project.

What does Angular Modern need to run?

SKILL.md names no scripts, command-line tools or credentials: Angular Modern is instructions for the agent only.

Does Angular Modern access the network?

SKILL.md names 1 domain. As links in the text: angular.dev. This is read from the text; nothing was executed.

Is Angular Modern safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Angular Modern use?

Angular Modern is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Angular Modern use?

About 801 tokens (SKILL.md is roughly 3.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Angular Modern?

Skills that share tags, products or a category with Angular Modern: Angular Cop (fmflurry/settings-opencode, 171 stars), AST Visitor Pattern for Unions (prisma/orm, 48k stars), Effect TS (mattiacerutti/supernova, 185 stars) and Igniteui Angular Linting (IgniteUI/igniteui-angular, 599 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Angular Modern?

WrongStack (a GitHub organization) maintains it in WrongStack/WrongStack, which has 371 GitHub stars. The repository holds 100 skills in this directory. The repository was last updated on October 10, 2026.

Source: WrongStack/WrongStack on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.