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.