angular-component
This skill provides templates and best practices for creating Angular v20+ standalone components using signal-based inputs, outputs, and native control flow.
Is angular-component safe to install?
Safe to install: our audit of angular-component's source files found 0 shell commands, 0 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. This skill provides static code templates and documentation. It does not execute code or perform network requests.
How we audit skills: our security review methodology.
Who is this skill for?
Angular developers building modern UI components.
What can you do with it?
- Creating standalone Angular components
- Refactoring class-based inputs to signals
- Implementing host bindings and content projection
- Building accessible interactive components
- Implementing lifecycle hooks and rendering logic
How good is this skill?
Quality score: 5/10. The skill provides clear, modern, and specific code examples following current Angular best practices.
What does the skill file contain?
# Angular Component
Create standalone components for Angular v20+. Components are standalone by default—do NOT set `standalone: true`.
## Component Structure
```typescript
import { Component, ChangeDetectionStrategy, input, output, computed } from '@angular/core';
@Component({
selector: 'app-user-card',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'class': 'user-card',
'[class.active]': 'isActive()',
'(click)': 'handleClick()',
},
template: `
<img [src]="avatarUrl()" [alt]="name() + ' avatar'" />
<h2>{{ name() }}</h2>
@if (showEmail()) {
...Frequently asked questions
Should I use standalone: true in my component decorator?
No. Components are standalone by default in Angular v20+.
How should I handle conditional rendering in templates?
Use native control flow syntax like @if, @else if, and @else instead of *ngIf.
Are @HostBinding and @HostListener decorators recommended?
No. Use the host object within the @Component decorator instead.
What is the preferred way to handle images?
Use the NgOptimizedImage directive from @angular/common.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
developing-genkit-js
50.1KDevelopers building AI agents, flows, and tools using the Genkit framework in JavaScript or TypeScript environments
This skill provides guidance for developing AI-powered applications using Genkit in Node.js and TypeScript. It enforces a strict troubleshooting protocol that prioritizes reading local documentation via the Genkit CLI over internal knowledge to account for recent breaking API changes.
turborepo
45.6KDevelopers and DevOps engineers managing JavaScript or TypeScript monorepos with Turborepo
The Turborepo skill provides guidance on configuring monorepo build systems, task pipelines, caching strategies, and architectural boundaries using Turborepo.