angular-awesome-new-component

Scaffold Angular wrapper directives for Web Awesome components from llms.txt.

2|1|Updated Jun 4, 2025
One-click install
npx skills add https://github.com/GedMarc/angular-awesome --skill angular-awesome-new-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-awesome-new-component
Source: https://github.com/GedMarc/angular-awesome/tree/main/skills/angular-awesome-new-component
Command: npx skills add https://github.com/GedMarc/angular-awesome --skill angular-awesome-new-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many Web Awesome components require manual, repetitive work to add first-class Angular wrapper directives, including mapping component APIs to Angular inputs/outputs, creating tests, documentation, and wiring exports; this Skill codifies that end-to-end process to reduce errors and speed development.

Core Features & Use Cases

  • API Extraction: Translate component API details into Angular Inputs, Outputs, slots, and methods by extracting details from llms.txt.
  • Scaffolding & Tests: Generate a directive file, a spec file with common tests, a rules markdown, and an examples markdown to maintain consistency across the library.
  • Integration & Verification: Add exports to src/public-api.ts, ensure the project builds and tests pass, regenerate docs, and update the changelog for release readiness.
  • Use Case: When adding a new wa-* component to the angular-awesome library, use this workflow to produce a tested, documented, and exported Angular wrapper ready for publishing.

Quick Start

Create a new wa-xyz wrapper by extracting its API from llms.txt, scaffolding the directive, spec, rules, and example files, exporting it in src/public-api.ts, running the Angular build and headless tests, regenerating docs, and updating CHANGELOG.md.

Frequently Asked Questions about angular-awesome-new-component

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

FAQPage Schema
How do I scaffold an Angular wrapper directive for a Web Awesome component?▼

Scaffolding an Angular wrapper directive involves extracting the component API from llms.txt, generating directive and spec files, creating rules and examples markdown, updating public-api.ts exports, and running the Angular build with headless tests.

What is the process for adding wa-* wrappers to the angular-awesome library?▼

The process for adding wa-* wrappers to the angular-awesome library includes extracting component APIs from llms.txt, generating directive and spec files, updating src/public-api.ts exports, regenerating documentation, and updating the CHANGELOG.md.

How do I generate unit tests for Angular web component wrappers?▼

Generating unit tests for Angular web component wrappers involves creating a spec file with common tests alongside the directive file to maintain consistency, followed by running headless tests to verify functionality.

Do I need to manually update the public API exports when adding new Angular directives?▼

You do not need to manually update public API exports when adding new Angular directives, as the Skill automatically adds exports to src/public-api.ts during the scaffolding workflow to ensure the project builds correctly.

What's the best way to keep Angular wrapper documentation and changelogs consistent?▼

The best way to keep Angular wrapper documentation and changelogs consistent is to regenerate docs using node docs/generate-docs.js and update CHANGELOG.md after scaffolding the directive and verifying the build passes.

When do I need to extract component APIs from llms.txt for Angular wrapper development?▼

You need to extract component APIs from llms.txt when adding a new wa-* component to the angular-awesome library, using the extracted details to map component APIs into Angular Inputs, Outputs, slots, and methods.