What version of Angular does this skill target?

This skill is specifically designed for Angular 20 and 21+, focusing on modern features like standalone components by default and signal-based reactivity.

How does it handle CSS and styling?

It implements a Tailwind CSS workflow, utilizing the @apply directive for composite styles and supporting dark mode via .dark: variants.

Does it support traditional Angular decorators?

No, the skill prioritizes modern signal-based functions like input() and output() over legacy decorators to ensure forward compatibility and better performance.

Are accessibility standards included in the code generation?

Yes, all components generated or reviewed by this skill must meet WCAG AA standards and pass AXE accessibility checks.

Can I use this for state management?

Yes, it provides patterns for local and global state management using Angular's signal(), computed(), and effect() primitives.

Modern Angular 21 Patterns

Name: Modern Angular 21 Patterns
Author: alysson-souza

byalysson-souza

0•

Design Tools

Implements cutting-edge Angular 21 development standards focusing on signals, modern control flow, and accessible UI patterns.

This skill provides a comprehensive framework for developing with the latest features of Angular 21. It guides the creation and review of components, services, and templates by enforcing signal-based APIs over legacy decorators, utilizing the modern '@' control flow syntax, and integrating Tailwind CSS for styling. By prioritizing ChangeDetectionStrategy.OnPush and WCAG AA accessibility standards, it ensures that your Angular applications are high-performance, maintainable, and inclusive.

Key Features

010 GitHub stars

02Signal-based component architecture using input(), output(), and viewChild()

03Performance optimization via OnPush change detection and signal-based state management

04Modern control flow implementation using @if, @for, and @switch syntax

05Accessibility-first development meeting WCAG AA and AXE check standards

06Tailwind CSS integration with dark mode support and @apply directives

Use Cases

01Refactoring legacy Angular components to use modern signal-based patterns and standalone architecture

02Generating performant and accessible UI components with Tailwind CSS and Angular 21 syntax

03Conducting code reviews to ensure adherence to Angular 21 best practices and optimized testing patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add alysson-souza/hnews angular-patterns

For use in Claude.ai and ChatGPT

Key Features

010 GitHub stars

02Signal-based component architecture using input(), output(), and viewChild()

03Performance optimization via OnPush change detection and signal-based state management

04Modern control flow implementation using @if, @for, and @switch syntax

05Accessibility-first development meeting WCAG AA and AXE check standards

06Tailwind CSS integration with dark mode support and @apply directives

Use Cases

01Refactoring legacy Angular components to use modern signal-based patterns and standalone architecture

02Generating performant and accessible UI components with Tailwind CSS and Angular 21 syntax

03Conducting code reviews to ensure adherence to Angular 21 best practices and optimized testing patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add alysson-souza/hnews angular-patterns

For use in Claude.ai and ChatGPT