angular.love
11 lut 2026
9 min

Agent Skills w Claude – Praktyczny przewodnik dla Angular developerów

Jeśli korzystasz z Claude Code na co dzień przy pracy z Angularem – scaffoldujesz komponenty, debugujesz łańcuchy RxJS, refactorujesz serwisy – pewnie zauważyłeś, że czasem generuje przestarzałe wzorce. NgModules zamiast standalone komponentów. Dekoratory @Input() zamiast signal inputs. Constructor injection zamiast inject(). Model był trenowany na kodzie z konkretnego momentu czasu, a Angular ewoluuje szybko.

Skills rozwiązują ten problem. To ustrukturyzowane pliki z instrukcjami, które uczą Claude’a, jak pisać kod tak, jak Twój projekt tego wymaga. Poniżej opiszę czym są Skills, jak działają w Claude Code, jak pisać efektywne Skille i jakie zasoby community już istnieją dla Angular developerów.

Czym są Skills?

Skill to katalog zawierający plik SKILL.md – dokument markdown z frontmatterem YAML i instrukcjami, które Claude czyta przed wykonaniem zadania. Wyobraź sobie kartę z przepisem, którą dajesz kucharzowi. Kucharz już umie gotować, ale przepis mówi mu dokładnie, jak chcesz przyrządzone swoje danie.

angular-component/
├── SKILL.md                    # Główne instrukcje (ładowane przy triggerze)
└── references/
    └── component-patterns.md   # Zaawansowane wzorce (ładowane w razie potrzeby)

SKILL.md ma prosty format:

---
name: angular-component
description: "Generuje standalone komponenty Angular z signal 
  inputs/outputs, OnPush change detection i funkcją inject(). 
  Użyj przy tworzeniu komponentów, stron lub feature'ów."
---

# Wzorce komponentów Angular

## Struktura komponentu

Zawsze używaj standalone komponentów z OnPush:

@Component({

  selector: 'app-user-list’,

  changeDetection: ChangeDetectionStrategy.OnPush,

  template: `…`

})

export class UserListComponent {

  private readonly userService = inject(UserService);

  readonly users = input.required<User[]>();

  readonly selected = output<User>();

}

Dwa pola frontmattera są kluczowe: name (małe litery, myślniki, max 64 znaki) i description (max 1024 znaki). Description decyduje, czy Claude w ogóle sięgnie po dany Skill – to właśnie to pole skanuje, żeby ocenić relevantność.

Jak Skills działają w Claude Code

Gdy korzystasz z Claude Code w terminalu, Skills integrują się na trzech poziomach:

CLAUDE.md leży w korzeniu projektu i ładuje się automatycznie przy każdej rozmowie. Zawiera kontekst specyficzny dla projektu – tech stack, konwencje, komendy. To odpowiednik onboardingu nowego członka zespołu przez wręczenie mu README.

Skills żyją w .claude/skills/ (lub gdziekolwiek Twój agent je przechowuje) i aktywują się w zależności od zadania. Gdy prosisz Claude’a o stworzenie komponentu, przegląda on dostępne opisy Skilli, znajduje właściwy, czyta jego SKILL.md i podąża za instrukcjami. Kilka Skilli może aktywować się jednocześnie dla jednego zadania.

Wbudowane Skills obsługują tworzenie plików – dokumenty Word, arkusze kalkulacyjne, prezentacje. Mniej relevantne dla workflow’ów z Claude Code, gdzie fokus jest na generowaniu i edytowaniu kodu źródłowego.

Ładowanie jest progresywne. Przy starcie do kontekstu trafiają tylko name i description wszystkich Skilli. Claude czyta pełny SKILL.md dopiero gdy Skill staje się relevantny, a pliki referencyjne (jak references/component-patterns.md) tylko gdy są potrzebne. Dzięki temu możesz pakować obszerne materiały referencyjne bez płacenia kosztu okna kontekstowego z góry.

Angular Skills od AnalogJS

Zanim zaczniesz pisać własne Skills od zera, sprawdź co już istnieje. Brandon Roberts (maintainer NgRx, twórca AnalogJS, Angular GDE) opublikował kolekcję Angular Skills celujących w wzorce v20+:

# Instalacja wszystkich Angular Skills
npx skills add analogjs/angular-skills

# Albo pojedynczo
npx skills add analogjs/angular-skills/skills/angular-component
npx skills add analogjs/angular-skills/skills/angular-signals
npx skills add analogjs/angular-skills/skills/angular-forms

Kolekcja obejmuje dziesięć obszarów, każdy z SKILL.md i katalogiem references/ na zaawansowane wzorce:

  • angular-component – standalone komponenty z signal inputs/outputs, OnPush, host bindings, content projection
  • angular-signals – signal(), computed(), linkedSignal(), effect(), interop RxJS z toSignal() i toObservable()
  • angular-di – funkcja inject(), injection tokens, konfiguracja providerów, hierarchiczne DI
  • angular-forms – Signal Forms ze schematową walidacją i zarządzaniem stanem pól
  • angular-http – httpResource(), resource(), HttpClient, funkcyjne interceptory
  • angular-routing – lazy loading, funkcyjne guardy/resolvery, input.fromRoute()
  • angular-directives – dyrektywy atrybutowe/strukturalne, kompozycja host directive
  • angular-ssr – SSR, inkrementalna hydratacja, prerendering
  • angular-testing – TestBed, component harnesses, testowanie signali, wsparcie Vitest dla v21+
  • angular-tooling – komendy CLI, schematics, konfiguracja builda

Repozytorium trzyma się dobrych praktyk tworzenia Skilli. Każdy Skill używa dwupoziomowej struktury: SKILL.md dla core wzorców i katalog references/ dla zaawansowanych przykładów. Opisy są na tyle konkretne, żeby agenci triggerowali poprawnie. A treść celuje w domyślne ustawienia Angular v20+ – żadnego standalone: true (to teraz domyślne), wszędzie signal-based API, wzorce funkcyjne zamiast class-based.

Jedna rzecz do zapamiętania: te Skills są zaprojektowane jako generalna wiedza o Angularze, nie konwencje specyficzne dla projektu. Uczą Claude’a nowoczesnych wzorców Angular, ale nie wymuszą Twojej struktury folderów, konwencji nazewnictwa ani wyborów dotyczących state managementu. Do tego będziesz chciał warstwować własne Skills na wierzchu – co dokładnie opisuję w kolejnych sekcjach.

CLI npx skills instaluje Skills we właściwym miejscu dla Twojego agenta (Claude Code, Cursor, Codex i inne). Jest agnostyczne wobec agenta z założenia. Skills podążają za otwartym formatem opracowanym przez Anthropic, ale działają w wielu narzędziach AI do kodowania.

Pisanie efektywnych Skills – najlepsze praktyki

Oficjalna dokumentacja Anthropic dotycząca tworzenia Skilli sprowadza się do kilku zasad, które mają największe znaczenie w codziennej pracy z Angularem.

Zwięzłość jest kluczowa

Okno kontekstowe to wspólny zasób. Twój Skill konkuruje z promptem systemowym, historią rozmowy, innymi Skillami i Twoim aktualnym zapytaniem. Każda linia musi uzasadniać swój koszt tokenowy.

Domyślne założenie: Claude jest już bardzo inteligentny. Dodawaj tylko kontekst, którego Claude nie ma. Nie wyjaśniaj czym jest dependency injection. Nie opisuj koncepcyjnie jak działają signale. Skup się na konkretnych decyzjach i wzorcach Twojego projektu.

<!-- ❌ Zbyt rozwlekłe -->
## Dependency Injection

Angular używa dependency injection (DI) do dostarczania komponentom
potrzebnych serwisów. DI to wzorzec projektowy, gdzie klasa otrzymuje
swoje zależności ze zewnętrznego źródła zamiast tworzyć je samodzielnie.
W Angularze możesz użyć funkcji inject() do żądania zależności...

<!-- ✅ Zwięzłe – Claude wie czym jest DI -->
## Konwencje DI

Używaj wyłącznie funkcji `inject()`. Nigdy nie używaj constructor injection.
Dostarczaj serwisy w `root` chyba że potrzebujesz stanu scoped do feature'u.

Kwestionuj każdy akapit: „Czy Claude naprawdę potrzebuje tego wyjaśnienia?” Jeśli nie – wytnij.

Dopasuj swobodę do kruchości

Nie każda instrukcja wymaga tego samego poziomu precyzji. Dopasuj go do tego, jak krucha jest dana operacja.

Wysoka swoboda – gdy wiele podejść jest prawidłowych i kontekst determinuje najlepsze:

## Obszary code review
1. Sprawdź poprawne użycie signali i unikanie zbędnych subskrypcji
2. Zweryfikuj kompatybilność z OnPush  
3. Szukaj brakujących wzorców unsubscribe w pozostałym użyciu RxJS
4. Potwierdź spójność barrel exportów

Niska swoboda – gdy konkretna sekwencja musi być zachowana lub spójność jest krytyczna:

## Setup state managementu
Używaj dokładnie tego wzorca NgRx Signal Store:

export const UsersStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
  withComputed(({ users }) => ({
    activeUsers: computed(() => users().filter(u => u.active))
  })),
  withMethods((store, usersService = inject(UsersService)) => ({
    loadUsers: rxMethod<void>(
      pipe(
        switchMap(() => usersService.getAll()),
        tapResponse({
          next: users => patchState(store, { users }),
          error: console.error
        })
      )
    )
  }))
);

Nie używaj class-based stores ani @ngrx/store dla nowych feature'ów.

Pomyśl o tym tak: jeśli jest tylko jedna bezpieczna ścieżka do przodu (setup store’a, skrypty migracyjne), daj dokładne instrukcje. Jeśli teren jest otwarty (code review, sugestie refactoringu), wskaż kierunek i pozwól Claude’owi nawigować.

Pisz opisy, które triggerują poprawnie

Pole description to to, czego Claude używa do wyboru Twojego Skilla spośród potencjalnie dziesiątek dostępnych. Bądź konkretny i uwzględniaj słowa kluczowe triggerujące.

# ❌ Zbyt ogólne – Claude nie będzie wiedział kiedy aktywować
description: "Pomaga z rzeczami Angular"
# ✅ Konkretne triggery i zakres
description: "Generuje standalone komponenty Angular z signal 
  inputs/outputs, OnPush change detection, host bindings i 
  funkcją inject(). Używaj przy tworzeniu komponentów, stron lub 
  feature'ów w projektach Angular 20+."

Zawsze pisz opisy w trzeciej osobie. Opis jest wstrzykiwany do system promptu, a niespójny punkt widzenia powoduje problemy z odkrywalnością.

Używaj progressive disclosure

Trzymaj główny SKILL.md poniżej 5000 słów. Przenoś szczegółowe treści do osobnych plików, które Claude ładuje tylko gdy są relevantne:

ngrx-signal-store/
├── SKILL.md                        # Core wzorce (~200 linii)
└── references/
    ├── entity-management.md        # Wzorce withEntities()
    ├── rxjs-integration.md         # rxMethod, tapResponse
    └── testing-patterns.md         # Narzędzia do testowania Store'a

W SKILL.md wskazuj na te pliki:

## Zaawansowane wzorce

**Kolekcje encji**: Zobacz [references/entity-management.md](references/entity-management.md)
**Integracja RxJS**: Zobacz [references/rxjs-integration.md](references/rxjs-integration.md)
**Testowanie store'ów**: Zobacz [references/testing-patterns.md](references/testing-patterns.md)

Trzymaj referencje na jednym poziomie głębokości. Jeśli entity-management.md sam referencjonuje inny plik, Claude może przeczytać zagnieżdżony plik tylko częściowo używając head -100 zamiast załadować go w całości.

Uwzględniaj anty-wzorce

Mówienie Claude’owi czego nie robić jest często cenniejsze niż mówienie co robić. Jeśli widziałeś już, że Claude generuje złe wzorce dla Twojego projektu, zapisz je wprost:

## Unikaj

- Nigdy nie używaj `subscribe()` w komponentach – używaj `toSignal()` lub async pipe
- Nigdy nie używaj constructor injection – zawsze `inject()`
- Nigdy nie importuj `CommonModule` – używaj standalone importów (`NgIf`, `NgFor`) 
  lub najlepiej blokowej składni kontroli przepływu `@if` / `@for`
- Nigdy nie używaj `*ngIf` / `*ngFor` – używaj blokowej składni `@if` / `@for`
- Nigdy nie twórz NgModules – cały nowy kod jest standalone

Dostarczaj kompletne przykłady, nie fragmenty

Claude podąża za przykładami znacznie wiarygodniej niż za abstrakcyjnymi opisami. Pokaż cały plik:

import { Component, ChangeDetectionStrategy, inject, input, output } from '@angular/core';
import { UsersStore } from './users.store';
import { User } from './user.model';

@Component({
  selector: 'app-user-list',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (store.loading()) {
      <app-spinner />
    } @else {
      @for (user of store.activeUsers(); track user.id) {
        <app-user-card 
          [user]="user" 
          (selected)="onSelect($event)" />
      }
    }
  `
})
export class UserListComponent {
  protected readonly store = inject(UsersStore);
  readonly filter = input<string>('');
  readonly selected = output<User>();

  onSelect(user: User) {
    this.selected.emit(user);
  }
}

Ten jeden przykład uczy Claude’a Twojego stylu importów, konfiguracji dekoratora, użycia signali, składni kontroli przepływu, wzorca injectowania store’a i modyfikatorów dostępu – bez ani jednej linii wyjaśnienia w prozie.

Używaj spójnej terminologii

Wybierz jedno określenie i trzymaj się go przez cały Skill. Jeśli w sekcji pierwszej nazywasz to „feature folder”, nie przełączaj się na „domain module” w sekcji trzeciej. Niespójne nazewnictwo dezorientuje Claude’a tak samo jak dezorientuje ludzi podczas code review.

Unikaj informacji wrażliwych na czas

Nie pisz „jeśli jesteś na Angular 19 rób X, ale na Angular 20 rób Y”. Zamiast tego dokumentuj aktualne podejście i opcjonalnie chowaj stary wzorzec w sekcji zwijanej:

## Aktualne podejście

Używaj blokowej składni `@if` / `@for` do całej kontroli przepływu.

<details>

<summary>Stary wzorzec (Angular < 17)</summary>

Poprzednio używano dyrektyw strukturalnych `*ngIf` i `*ngFor`.

Nie są już rekomendowane.

</details>

Iterowanie nad Skills z Claude

Najbardziej efektywny proces development jest zaskakująco meta: użyj jednej instancji Claude’a do napisania Skilla, przetestuj go drugą.

Krok 1: Przeprowadź prawdziwe zadanie z Claude Code bez żadnych Skills. Zauważ co powtarzasz – „użyj standalone”, „użyj inject()”, „przestrzegaj tej struktury folderów”. Ta repetycja to treść Twojego Skilla.

Krok 2: Poproś Claude’a o wygenerowanie SKILL.md z Twoich konwencji. Claude rozumie format natywnie. Potem przeglądaj pod kątem zwięzłości – Claude ma tendencję do nadmiernych wyjaśnień. Wytnij wszystko co Claude już wie.

Krok 3: Przetestuj Skill na prawdziwych zadaniach w świeżej sesji Claude Code. Poproś go o stworzenie feature’u, wygenerowanie testów, refactoring serwisu. Obserwuj gdzie podąża za Skillem poprawnie, a gdzie dryfuje.

Krok 4: Gdy zauważysz luki – dopracuj. Jeśli Claude zapomniał używać track w pętlach @for, uczyń tę regułę bardziej prominentną. Jeśli użył złego wzorca state managementu, dodaj mocniejsze ograniczenie. Każda iteracja poprawia Skill w oparciu o obserwowane zachowanie, nie założenia.

Ten cykl obserwuj-dopracuj-testuj to jak buduje się dobre Skills. Repozytorium angular-skills AnalogJS przeszło dokładnie przez ten proces – i widać to w jakości outputu.

CLAUDE.md – warstwa projektu

Skills dostarczają wielokrotnie używalnych wzorców między projektami. CLAUDE.md dostarcza kontekstu specyficznego dla projektu. Uzupełniają się nawzajem.

Praktyczny CLAUDE.md dla projektu Angular:

# CLAUDE.md

## Projekt
- Angular 21 ze standalone komponentami
- State management: NgRx Signal Store  
- UI: Angular Material z custom theme
- API: REST z HttpClient + httpResource()
- Testy: Vitest (unit), Playwright (e2e)

## Konwencje
- Feature-based folder structure: feature-name/{component,service,store,model,routes}
- Wszystkie komponenty używają OnPush change detection
- Wywołania API przez serwisy, nigdy bezpośrednio w komponentach
- Barrel exports (index.ts) dla każdego folderu feature

## Komendy
- `npm run test` – Uruchom Vitest
- `npm run e2e` – Uruchom Playwright  
- `npm run lint` – Sprawdzenie ESLint
- `npm run build` – Build produkcyjny

## Unikaj
- Żadnych NgModules, żadnych importów CommonModule
- Żadnego constructor injection
- Żadnego *ngIf/*ngFor (używaj @if/@for)
- Żadnego subscribe() w komponentach

Gdy Claude Code czyta Twój projekt, ładuje CLAUDE.md automatycznie, a następnie aktywuje relevantne Skills w oparciu o zadanie. Trzy warstwy się nakładają: wbudowana wiedza → Skills → kontekst projektu.

Praktyczne wnioski

Jeśli korzystasz z Claude Code do Angular developmentu, oto co zrobić w tym tygodniu:

Zainstaluj Skills AnalogJS. Jedna komenda daje Ci dziesięć dobrze ustrukturyzowanych Skills pokrywających nowoczesne wzorce Angular. Nawet jeśli Twój projekt ma własne konwencje, stanowią solidną bazę, która zapobiega sugerowaniu przez Claude’a przestarzałych API.

npx skills add analogjs/angular-skills

Dodaj CLAUDE.md do korzenia projektu. Udokumentuj swój tech stack, konwencje i komendy. Każda sesja Claude Code dotykająca Twojego codebase’u skorzysta na tym kontekście. Trzymaj to krótko – 30-50 linii pokrywających to co ważne.

Stwórz jeden custom Skill. Wybierz najbardziej powtarzaną konwencję swojego zespołu – wzorzec setupu store’a, template komponentu, strukturę testów. Napisz dla niego SKILL.md. Przetestuj na prawdziwym zadaniu. Dopracuj w oparciu o to, co faktycznie generuje Claude.

Trzymaj Skills zwięzłe. Kwestionuj każdą linię. Claude już zna Angular – Twój Skill musi uchwycić tylko to, co jest specyficzne dla Twojego projektu lub co zmieniło się po jego danych treningowych.

Skills transformują Claude Code z agenta ogólnego przeznaczenia w takiego, który zna Twoje konwencje, Twój stack i Twoją architekturę od pierwszego promptu. Dla Angular developerów pracujących w środowiskach enterprise z dużymi codebase’ami i rygorystycznymi wzorcami – różnica między generycznymi sugestiami a outputem dopasowanym do konwencji projektu jest mierzona w zaoszczędzonych godzinach tygodniowo.

Podziel się artykułem

Zapisz się na nasz newsletter

Dołącz do community Angular.love i bądź na bieżąco z trendami.