angular-component

Generate Angular components, pages, and services with co-located SCSS and route updates.

Updated Mar 8, 2026
One-click install
npx skills add https://github.com/AisleiAvila/loja --skill angular-component-aisleiavila
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-component
Source: https://github.com/AisleiAvila/loja/tree/main/.github/skills/angular-component
Command: npx skills add https://github.com/AisleiAvila/loja --skill angular-component-aisleiavila

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the creation of Angular components, pages, and services that adhere to the Loja Luz do Atlântico project's conventions (standalone components, signals, inject(), strict TypeScript, and co-located SCSS).

Core Features & Use Cases

  • Generates a complete set of files for a new component or page: <name>-page.component.ts, <name>-page.component.html, and <name>-page.component.scss, plus a corresponding service if needed.
  • Enforces the project's Angular conventions (standalone: true, inject() usage, typed signals, and minimal imports).
  • Provides a ready-to-ship file structure and a route update template to integrate the new component into frontend routes.

Quick Start

Create a new page component following the standalone pattern with a matching route and co-located .ts/.html/.scss files.

Frequently Asked Questions about angular-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold Angular standalone components with co-located SCSS and typed signals?

To scaffold Angular standalone components with co-located SCSS, you generate a complete file set including .ts, .html, and .scss files. This enforces strict TypeScript, explicit signal typing, and inject() patterns for consistent component creation.

What is the best way to generate Angular pages and services following strict TypeScript conventions?

Generating Angular pages and services following strict TypeScript conventions requires enforcing isolated modules and dependency injection via inject(). This approach yields a ready-to-ship file structure with minimal imports and a route update template for integration.

Can I use Angular inject() and signals in a newly scaffolded component file structure?

Yes, newly scaffolded Angular components enforce dependency injection via inject() and explicit typing for signals. This ensures isolated modules within standalone components, applying strict TypeScript and co-located SCSS for ready-to-build frontend routes.

How do I create a new Angular route with standalone components and a matching service?

Creating a new Angular route with standalone components involves generating the page files and a corresponding service if needed. This provides a ready-to-ship file structure alongside a route update template to integrate the new component into frontend routes.

Does Angular scaffolding enforce standalone: true and minimal imports for frontend development?

Angular scaffolding enforces the standalone: true pattern with minimal imports for frontend development. It applies strict TypeScript and co-located SCSS, ensuring isolated modules and explicit signal typing when creating new routes or services.

What file structure do I get when scaffolding Angular components for a new page?

Scaffolding Angular components for a new page generates a complete file set: a .ts component file, a .html template, and a co-located .scss stylesheet. This structure enforces project conventions and provides a route update template for quick integration.