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)