feat(angular): Add metadata.json and README.md to all Angular skills

- Add metadata.json with version tracking, organization, and references
- Add README.md with skill overviews, usage guides, and quick references
- Brings Angular skills to parity with React Best Practices infrastructure
- Covers: angular, angular-state-management, angular-ui-patterns, angular-best-practices
This commit is contained in:
Chau (Joe) Nguyen
2026-02-04 00:48:55 -06:00
parent 5ba1fe9a97
commit b46e45fb4d
8 changed files with 241 additions and 0 deletions

View File

@@ -0,0 +1,50 @@
# Angular UI Patterns
Modern UI patterns for building robust Angular applications optimized for AI agents and LLMs.
## Overview
This skill covers essential UI patterns for:
- **Loading States** - Skeleton vs spinner decision trees
- **Error Handling** - Error boundary hierarchy and recovery
- **Progressive Disclosure** - Using `@defer` for lazy rendering
- **Data Display** - Handling empty, loading, and error states
- **Form Patterns** - Submission states and validation feedback
- **Dialog/Modal Patterns** - Proper dialog lifecycle management
## Core Principles
1. **Never show stale UI** - Only show loading when no data exists
2. **Surface all errors** - Never silently fail
3. **Optimistic updates** - Update UI before server confirms
4. **Progressive disclosure** - Use `@defer` to load non-critical content
5. **Graceful degradation** - Fallback for failed features
## Structure
The `SKILL.md` file includes:
1. **Golden Rules** - Non-negotiable patterns to follow
2. **Decision Trees** - When to use skeleton vs spinner
3. **Code Examples** - Correct vs incorrect implementations
4. **Anti-patterns** - Common mistakes to avoid
## Quick Reference
```typescript
// Only show loading without data
if (error()) return <ErrorState />
if (loading() && !data()) return <SkeletonState />
if (!data()?.length) return <EmptyState />
return <DataDisplay data={data()} />
```
## Version
Current version: 1.0.0 (February 2026)
## References
- [Angular @defer](https://angular.dev/guide/defer)
- [Angular Templates](https://angular.dev/guide/templates)

View File

@@ -0,0 +1,12 @@
{
"version": "1.0.0",
"organization": "Antigravity Awesome Skills",
"date": "February 2026",
"abstract": "Modern UI patterns for Angular applications designed for AI agents and LLMs. Covers loading states, error handling, progressive disclosure, and data display patterns. Emphasizes showing loading only without data, surfacing all errors, optimistic updates, and graceful degradation using @defer. Includes decision trees and anti-patterns to avoid.",
"references": [
"https://angular.dev/guide/defer",
"https://angular.dev/guide/templates",
"https://material.angular.io",
"https://ng-spartan.com"
]
}