Agent skill · software engineering · aiskillstore
angular-ui-patterns
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.
Why this skill is useful
Provides specific Angular UI patterns for handling loading states, errors, and data display that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Angular UI Patterns Core Principles 1. Never show stale UI - Loading states only when actually loading 2. Always surface errors - Users must know when something fails 3. Optimistic updates - Make the UI feel instant 4. Progressive disclosure - Use @defer to show content as available 5. Graceful degradation - Partial data is better than no data --- Loading State Patterns The Golden Rule Show loading indicator ONLY when there's no data to display. Loading State Decision Tree Skeleton vs Spinner Use Skeleton When Use Spinner When -------------------- --------------------- Known content shape Unknown content shape List/card layouts Modal actions Initial page load Button submissions Content placeholders Inline operations --- Control Flow Patterns @if/@else for Conditional Rendering @for with Track @defer for Progressive Loading --- Error Handling Patterns Error Handling Hierarchy Always Show Errors CRITICAL: Never swallow errors silently. Error State Component Pattern --- Button State Patterns Button Loading State Disable During Operations CRITICAL: Always disable triggers during async operations. --- Empty States Empty State Requirements Every list/collection MUST have an empty state: Contextual Empty States --- Form Patterns Form with Loading and Validation --- Dialog/Modal Patterns Confirmation Dialog --- Anti-Patterns Loading States Error Handling Button States --- UI State Checklist Before completing any UI component: UI States [ ] Error state handled and shown to user [ ] Loading state shown only when no data exists [ ] Empty state provided for collections (@empty block) [ ] Buttons disabled during async operations [ ] Buttons show loading indicator when appropriate Data & Mutations [ ] All async operations have error handling [ ] All user actions have feedback (toast/visual) [ ] Optimistic updates rollback on failure Accessibility [ ] Loading states announced to screen readers [ ] Error messages linked to form fields [ ] Focus management after state changes --- In …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/angular-ui-patterns