home / skills / ehtbanton / claudeskillsrepo / angular-component-generator

angular-component-generator skill

safe

This skill generates a complete Angular standalone component with TypeScript, HTML template, and SCSS styles for Angular 17+ projects.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill angular-component-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

719 B

---
name: angular-component-generator
description: Generate Angular components with TypeScript, templates, and styles. Triggers on "create angular component", "generate ng component", "angular module", "ng generate".
---

# Angular Component Generator

Generate Angular components with TypeScript, templates, and SCSS styles.

## Output Requirements

**File Output:** `*.component.ts`, `*.component.html`, `*.component.scss`
**Format:** Valid Angular 17+
**Standards:** Angular standalone components

## When Invoked

Immediately generate a complete Angular component with template and styles.

## Example Invocations

**Prompt:** "Create Angular button component"
**Output:** Complete button component with all files.

Overview

This skill generates complete Angular standalone components (TypeScript, HTML template, and SCSS) ready for Angular 17+. It produces three files per component (*.component.ts, *.component.html, *.component.scss) following Angular conventions. Use simple prompts like "create angular component" or "generate ng component" to trigger generation.

How this skill works

When invoked, the skill creates a valid Angular standalone component with a typed TypeScript class, a semantic HTML template, and SCSS styles. It respects Angular 17+ APIs, uses standalone: true, and includes common decorators, Inputs/Outputs, and accessibility attributes when relevant. The output is ready to drop into an Angular project and import into other components or routes.

When to use it

You need a ready-to-use UI component (button, card, list, form control).
You want Angular 17+ standalone components generated quickly.
You need consistent file structure and naming for components.
You want a scaffold that includes inputs, outputs, and basic accessibility.
You need templates and SCSS styles alongside typed component code.

Best practices

Use descriptive, kebab-case filenames that match Angular conventions (e.g., my-button.component.ts).
Prefer Inputs and Outputs for component APIs and keep state lifting to parents.
Use OnPush change detection for performance unless two-way binding is required.
Keep templates semantic and accessible: aria attributes, role, and keyboard support.
Scope styles with component selectors and avoid global style leaks.

Example use cases

Create a reusable primary button component with size and disabled inputs.
Generate a form-field component with label, validation messages, and ARIA attributes.
Scaffold a modal/dialog component with open/close outputs and focus trapping notes.
Produce a paginated list component with item input and event outputs for actions.
Create a header/navigation component with responsive template and SCSS.

FAQ

Which Angular versions are supported?

This skill targets Angular 17+ and generates standalone component APIs compatible with those versions.

What files are produced?

It produces three files per component: *.component.ts, *.component.html, and *.component.scss.

Can I request Inputs, Outputs, or services in the generated component?

Yes—include details in the prompt (e.g., inputs, outputs, injected services) and the scaffold will include typed definitions and examples.