skills.rest
cromesdk
cromesdkOFFICIAL
Explore all skills by this author →
GitHub

angular-component-rule

Enforce Angular 20 component companion-file and structure rules across src/app/**.

Updated Aug 27, 2026
Search Tags:#code quality#automation#typescript#refactoring#angular#component
One-click install
npx skills add https://github.com/cromesdk/ai-skills --skill angular-component-rule
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-component-rule
Source: https://github.com/cromesdk/ai-skills/tree/main/skills/angular/angular-component-rule
Command: npx skills add https://github.com/cromesdk/ai-skills --skill angular-component-rule

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures your Angular components adhere to best practices for file structure, companion files, and code organization, preventing common maintenance issues and improving developer experience.

Core Features & Use Cases

  • Companion File Enforcement: Guarantees that every .component.ts file has its corresponding .html, .spec.ts, and style file (.scss or .css).
  • Structure Validation: Enforces one component class per file, externalizes inline templates/styles, and manages component variants.
  • Use Case: When creating new components or auditing an existing Angular project, use this Skill to automatically identify and fix missing companion files, enforce coding standards, and ensure a clean, maintainable codebase.

Quick Start

Run the angular-component-rule skill to scan your project for missing component companions and enforce structural rules.

Frequently Asked Questions about angular-component-rule

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

FAQPage Schema
How do I enforce Angular component companion file rules across my project?▼

Enforce Angular component companion-file rules by scanning `src/app/**` to validate that every `.component.ts` has matching `.html`, `.spec.ts`, and `.scss` or `.css` files. This non-destructive automation identifies missing companions and fixes them deterministically.

Can I automatically externalize inline templates and styles in Angular components?▼

Automatically externalize inline templates and styles in Angular components by running a structural validation scan. The automation extracts inline HTML and CSS or SCSS into separate companion files to enforce a one-component-per-file convention and improve maintainability.

What is the best way to audit an Angular project for missing spec files and structural violations?▼

Auditing an Angular project for missing spec files and structural violations requires a CI component-hygiene audit. This process validates component file completeness, enforces one class per file, and standardizes `.component.variants.ts` extraction across the codebase.

How do I remove static host.class styling from Angular components during refactoring?▼

Remove static `host.class` styling from Angular components during refactoring by applying deterministic auto-fix rules. The automation identifies static host class declarations within component decorators and safely strips them to standardize component structure.

Does this Angular component structure validation support Angular 20?▼

Angular component structure validation explicitly supports Angular 20. It checks component file completeness and enforces structural conventions across `src/app/**` without requiring external dependencies or manual configuration setup.

Related Skills

Explore More Software Engineering Skills→
linhlinhlinlinhlinhlin
6

angular-v20-frontend-development

Define Angular v20+ frontend architecture with signals-first state and standalone components.

Community
Advanced
eng-vmessiaheng-vmessiah
2

ai-regression-testing

Automate regression tests validating API response shapes and state integrity.

Community
Intermediate
ehtbantonehtbanton

angular-component-generator

Generate Angular 17+ standalone components with TypeScript, HTML, and SCSS.

Community
Basic
racurryracurry
1

linting

Detect file types and run configured linters across multiple languages.

Community
Advanced