New: 97,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 Core

by Gentleman-Programming in Gentleman-Programming/Gentleman-Skills

Angular core patterns: standalone components, signals, inject, control flow, zoneless.

MITAuto-check passed

Install Angular Core

skills CLI
$ npx skills add Gentleman-Programming/Gentleman-Skills --skill angular-core -a claude-code

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

GitHub CLI
$ gh skill install Gentleman-Programming/Gentleman-Skills angular-core --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/Gentleman-Programming/Gentleman-Skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/curated/angular/core .claude/skills/angular-core && 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-core
GitHub stars
657
Token cost
~1.1k tokens
SKILL.md length
153 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
MIT

At a glance

Angular core patterns: standalone components, signals, inject, control flow, zoneless.

  • SKILL.md covers Standalone Components (REQUIRED), Input/Output Functions…, Signals for State (REQUIRED) and NO Lifecycle Hooks (REQUIRED), plus 5 more sections
  • Calls npm

What it does

Angular Core is an agent skill from Gentleman-Programming/Gentleman-Skills. Angular core patterns: standalone components, signals, inject, control flow, zoneless. Trigger: When creating Angular components, using signals, or setting up zoneless.

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

It works with Angular and RxJS. The repository describes itself as: Community-driven AI agent skills for Claude Code, OpenCode, and other AI assistants. Curated patterns and community contributions. The licence is MIT.

Example prompts

  • “/angular-core”

What it can do on your machine

Read from SKILL.md and the folder at commit c8036a3. 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

    Shell commands in SKILL.md call:

    • npm

    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 Core loads about 1.1k tokens when it runs. Until then it costs about 45 tokens; SKILL.md has 153 words of instructions outside code blocks.

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

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 Gentleman-Programming/Gentleman-Skills at commit c8036a3, republished under its MIT licence (© Gentleman-Programming). 153 words, ~1,116 tokens.

Download SKILL.mdSave it as .claude/skills/angular-core/SKILL.md (or your agent's skills folder).
name
angular-core
description
Angular core patterns: standalone components, signals, inject, control flow, zoneless. Trigger: When creating Angular components, using signals, or setting up zoneless.
metadata.author
gentleman-programming
metadata.version
1.0

Standalone Components (REQUIRED)

Components are standalone by default. Do NOT set standalone: true.

typescript
@Component({
  selector: 'app-user',
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `...`
})
export class UserComponent {}

Input/Output Functions (REQUIRED)

typescript
// ✅ ALWAYS: Function-based
readonly user = input.required<User>();
readonly disabled = input(false);
readonly selected = output<User>();
readonly checked = model(false);  // Two-way binding

// ❌ NEVER: Decorators
@Input() user: User;
@Output() selected = new EventEmitter<User>();

Signals for State (REQUIRED)

typescript
readonly count = signal(0);
readonly doubled = computed(() => this.count() * 2);

// Update
this.count.set(5);
this.count.update(prev => prev + 1);

// Side effects
effect(() => localStorage.setItem('count', this.count().toString()));

NO Lifecycle Hooks (REQUIRED)

Signals replace lifecycle hooks. Do NOT use ngOnInit, ngOnChanges, ngOnDestroy.

typescript
// ❌ NEVER: Lifecycle hooks
ngOnInit() {
  this.loadUser();
}

ngOnChanges(changes: SimpleChanges) {
  if (changes['userId']) {
    this.loadUser();
  }
}

// ✅ ALWAYS: Signals + effect
readonly userId = input.required<string>();
readonly user = signal<User | null>(null);

private userEffect = effect(() => {
  // Runs automatically when userId() changes
  this.loadUser(this.userId());
});

// ✅ For derived data, use computed
readonly displayName = computed(() => this.user()?.name ?? 'Guest');
When to Use What
NeedUse
React to input changeseffect() watching the input signal
Derived/computed statecomputed()
Side effects (API calls, localStorage)effect()
Cleanup on destroyDestroyRef + inject()
typescript
// Cleanup example
private readonly destroyRef = inject(DestroyRef);

constructor() {
  const subscription = someObservable$.subscribe();
  this.destroyRef.onDestroy(() => subscription.unsubscribe());
}

inject() Over Constructor (REQUIRED)

typescript
// ✅ ALWAYS
private readonly http = inject(HttpClient);

// ❌ NEVER
constructor(private http: HttpClient) {}

Native Control Flow (REQUIRED)

html
@if (loading()) {
  <spinner />
} @else {
  @for (item of items(); track item.id) {
    <item-card [data]="item" />
  } @empty {
    <p>No items</p>
  }
}

@switch (status()) {
  @case ('active') { <span>Active</span> }
  @default { <span>Unknown</span> }
}

RxJS - Only When Needed

Signals are the default. Use RxJS ONLY for complex async operations.

Use SignalsUse RxJS
Component stateCombining multiple streams
Derived valuesDebounce/throttle
Simple async (single API call)Race conditions
Input/OutputWebSockets, real-time
Complex error retry logic
typescript
// ✅ Simple API call - use signals
readonly user = signal<User | null>(null);
readonly loading = signal(false);

async loadUser(id: string) {
  this.loading.set(true);
  this.user.set(await firstValueFrom(this.http.get<User>(`/api/users/${id}`)));
  this.loading.set(false);
}

// ✅ Complex stream - use RxJS
readonly searchResults$ = this.searchTerm$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => this.http.get<Results>(`/api/search?q=${term}`))
);

// Convert to signal when needed in template
readonly searchResults = toSignal(this.searchResults$, { initialValue: [] });

Zoneless Angular (REQUIRED)

Angular is zoneless. Use provideZonelessChangeDetection().

typescript
bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()]
});

Remove ZoneJS:

bash
npm uninstall zone.js

Remove from angular.json polyfills: zone.js and zone.js/testing.

Zoneless Requirements
  • Use OnPush change detection
  • Use signals for state (auto-notifies Angular)
  • Use AsyncPipe for observables
  • Use markForCheck() when needed

Resources

© Gentleman-Programming, 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 curated/angular/core of Gentleman-Programming/Gentleman-Skills.

Open the folder on GitHubat commit c8036a3

Compare with similar skills

Angular Core 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 Core compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Angular Core this skillGentleman-Programming/Gentleman-Skills657—~1.1kAutomated safety check: PassMIT
Angular Idioms and Patternsirahardianto/awesome-agv157—~3.8kAutomated safety check: PassMIT
Angular ArchitectJeffallan/claude-skills12k—~1.5kAutomated safety check: PassMIT
Angular Copfmflurry/settings-opencode171—~1.4kAutomated safety check: PassMIT
Angularkid-sid/claude-spellbook189—~5kAutomated safety check: PassMIT
Angularericrisco/rsc-harness156—~3.4kAutomated safety check: PassMIT

Similar skills

  • Angular Idioms and Patterns

    irahardianto/awesome-agv

    Coding conventions for Angular 19 and later: standalone components, signals, OnPush change detection, lazy routes and where RxJS still belongs.

    157 GitHub stars~3.8k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Angular Architect

    Jeffallan/claude-skills

    Builds Angular 17+ features with standalone components, signals, NgRx state, RxJS patterns and lazy-loaded routing, then checks bundle size and test coverage.

    12k GitHub stars~1.5k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Angular Cop

    fmflurry/settings-opencode

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

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

  • Angular

    kid-sid/claude-spellbook

    A skill your agent uses when building or refactoring Angular applications — choosing between signals, RxJS, and NgRx for state, configuring routing with guards and lazy loading, optimizing change…

    189 GitHub stars~5k tokensUpdated 2 mo ago
    DevelopmentAuto-check passed

  • Angular

    ericrisco/rsc-harness

    A skill your agent uses when building, refactoring, or debugging Angular (v20/21+): standalone components, signals, zoneless change detection, @if/@for/@defer control flow, inject() DI…

    156 GitHub stars~3.4k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Angular State Management

    aiskillstore/marketplace

    Master modern Angular state management with Signals, NgRx, and RxJS.

    430 GitHub starsUsed in 5 repos~3.9k tokens
    Frontend & DesignAuto-check passed

More from Gentleman-Programming/Gentleman-Skills

All 23 skills in this repo

  • Elixir Antipatterns

    Gentleman-Programming/Gentleman-Skills

    Core catalog of 8 critical Elixir/Phoenix anti-patterns covering error handling, separation of concerns, Ecto queries, and testing.

    657 GitHub stars~2.1k tokensUpdated 6 mo ago
    Auto-check passed

  • Skill Creator

    Gentleman-Programming/Gentleman-Skills

    Creates new AI agent skills following the Agent Skills spec.

    657 GitHub stars~1.1k tokensUpdated 6 mo ago
    Auto-check: notes

  • Angular Architecture

    Gentleman-Programming/Gentleman-Skills

    Angular architecture: Scope Rule, project structure, file naming, style guide.

    657 GitHub stars~823 tokensUpdated 6 mo ago
    Auto-check passed

  • Angular Forms

    Gentleman-Programming/Gentleman-Skills

    Angular forms: Signal Forms (experimental) and Reactive Forms.

    657 GitHub stars~687 tokensUpdated 6 mo ago
    Auto-check passed

  • Angular Performance

    Gentleman-Programming/Gentleman-Skills

    Angular performance: NgOptimizedImage, @defer, lazy loading, SSR.

    657 GitHub stars~703 tokensUpdated 6 mo ago
    Auto-check passed

  • Django Drf

    Gentleman-Programming/Gentleman-Skills

    Django REST Framework patterns. An agent skill from Gentleman-Programming/Gentleman-Skills.

    657 GitHub stars~1.2k tokensUpdated 6 mo ago
    Auto-check passed

Works with

Questions about Angular Core

What does Angular Core do?

Angular core patterns: standalone components, signals, inject, control flow, zoneless. Angular Core is an agent skill from Gentleman-Programming/Gentleman-Skills. Angular core patterns: standalone components, signals, inject, control flow, zoneless.

How do I install Angular Core in Claude Code?

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

How do I install Angular Core in Codex?

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

Can I use Angular Core 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 Gentleman-Programming/Gentleman-Skills --skill angular-core -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-core, .gemini/skills/angular-core, .github/skills/angular-core and .opencode/skills/angular-core in your project.

What does Angular Core need to run?

Going by SKILL.md and its folder, Angular Core needs the command-line tools its instructions call (npm).

Does Angular Core 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 Core 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 Core use?

Angular Core 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 Core use?

About 1.1k tokens (SKILL.md is roughly 4.5k 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 Core?

Skills that share tags, products or a category with Angular Core: Angular Idioms and Patterns (irahardianto/awesome-agv, 157 stars), Angular Architect (Jeffallan/claude-skills, 12k stars), Angular Cop (fmflurry/settings-opencode, 171 stars) and Angular (kid-sid/claude-spellbook, 189 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Angular Core?

Gentleman-Programming (a GitHub organization) maintains it in Gentleman-Programming/Gentleman-Skills, which has 657 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on March 28, 2026.

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