angular-components

Create and modify Angular UI components with tests, Storybook stories, and docs.

1|Updated Sep 15, 2023

Search Tags:#typescript #testing #components #angular #storybook #workflows #ui-library

Ready to run

npx skills add https://github.com/emiljuchnikowski/smartsoft001 --skill angular-components-emiljuchnikowski

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-components
Source: https://github.com/emiljuchnikowski/smartsoft001/tree/main/.claude/skills/angular-components
Command: npx skills add https://github.com/emiljuchnikowski/smartsoft001 --skill angular-components-emiljuchnikowski

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Angular UI component libraries often lack a cohesive pattern and tooling for creating and modifying components across a large Angular project. This skill provides a structured blueprint to implement UI components following the 3-layer pattern (base, standard, wrapper), ensuring consistency, testability, and Storybook integration.

Core Features & Use Cases

Provides a standardized 3-layer component architecture (base, standard, wrapper) with predictable file layout and exports.
Enforces OnPush change detection, signal-based state, CreateDynamicComponent integration, and Tailwind utility classes with a smart: prefix.
Supports automated documentation, tests, and Storybook stories aligned with the project's conventions.

Quick Start

Create and implement a new Angular UI component in packages/shared/angular following the documented folder structure and plugin metadata requirements.

Frequently Asked Questions about angular-components

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

FAQPage Schema

How do I build Angular UI components with a 3-layer architecture pattern?▼

To build Angular UI components with a 3-layer architecture, you structure them into base, standard, and wrapper layers. This approach enforces predictable file layouts, OnPush change detection, and consistency across your project's shared packages.

How do I generate Storybook stories and tests for Angular components?▼

You generate Storybook stories and tests for Angular components by automating their creation alongside the component logic. This ensures automated documentation, testing, and Storybook integration align with your project's existing conventions.

Does this Angular component workflow support OnPush change detection and signals?▼

Yes, this Angular component workflow supports OnPush change detection and signals. It enforces signal-based state management and integrates CreateDynamicComponent to maintain high-performance UI updates within your shared library.

What is the best way to enforce consistent conventions across a shared Angular UI library?▼

The best way to enforce consistent conventions across a shared Angular UI library is using a structured blueprint for component creation. It standardizes folder structures, plugin metadata, Tailwind utility prefixes, and exports.

Can I use Tailwind utility classes with a smart prefix in Angular component generation?▼

Yes, you can use Tailwind utility classes with a smart prefix in Angular component generation. The workflow enforces this smart prefix convention to maintain styling consistency across all dynamically created and modified UI components.