angular-component-generator

Generate Angular components with TypeScript, templates, and styles. Triggers on "create angular component", "generate ng component", "angular module", "ng generate".

16 stars

Best use case

angular-component-generator is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Generate Angular components with TypeScript, templates, and styles. Triggers on "create angular component", "generate ng component", "angular module", "ng generate".

Teams using angular-component-generator should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/angular-component-generator/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/frontend/angular-component-generator/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/angular-component-generator/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How angular-component-generator Compares

Feature / Agentangular-component-generatorStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Generate Angular components with TypeScript, templates, and styles. Triggers on "create angular component", "generate ng component", "angular module", "ng generate".

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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.

Related Skills

pcf-code-components

16
from diegosouzapw/awesome-omni-skill

Understanding code components structure and implementation Triggers on: **/*.{ts,tsx,js,json,xml,pcfproj,csproj}

Next.js App Router & Server Components

16
from diegosouzapw/awesome-omni-skill

Build Next.js 15 applications using App Router, Server Components, Client Components, Server Actions, and streaming. Apply when creating pages, handling data fetching, implementing routes, or optimizing performance.

hig-components-system

16
from diegosouzapw/awesome-omni-skill

Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts.

hig-components-status

16
from diegosouzapw/awesome-omni-skill

Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.

hig-components-search

16
from diegosouzapw/awesome-omni-skill

Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.

hig-components-menus

16
from diegosouzapw/awesome-omni-skill

Apple HIG guidance for menu and button components including menus, context menus, dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons, pull-down buttons, disclosure...

hig-components-layout

16
from diegosouzapw/awesome-omni-skill

Apple Human Interface Guidelines for layout and navigation components.

hig-components-dialogs

16
from diegosouzapw/awesome-omni-skill

Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views.

hig-components-content

16
from diegosouzapw/awesome-omni-skill

Apple Human Interface Guidelines for content display components.

frontend-angular-store

16
from diegosouzapw/awesome-omni-skill

Use when implementing state management with PlatformVmStore for complex components requiring reactive state, effects, and selectors.

frontend-angular-form

16
from diegosouzapw/awesome-omni-skill

Use when creating reactive forms with validation, async validators, dependent validation, and FormArrays using platform patterns.

frontend-angular-api-service

16
from diegosouzapw/awesome-omni-skill

Use when creating API services for backend communication with proper patterns for caching, error handling, and type safety.