angular-ui-patterns
Provides best practices for Angular UI loading states, error handling, and async content display.
Install
mkdir -p .claude/skills/angular-ui-patterns && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1060" && unzip -o skill.zip -d .claude/skills/angular-ui-patterns && rm skill.zipInstalls to .claude/skills/angular-ui-patterns
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.Key capabilities
- →Implements skeleton-based loading UI for async data
- →Handles error state surfacing in reactive components
- →Supports optimistic update patterns for UI responsiveness
- →Decomposes component display logic into conditional patterns
- →Integrates progressive data disclosure using @defer
How it works
It provides a framework of Angular conditional control flow patterns that ensure users always receive feedback during asynchronous operations.
Inputs & outputs
When to use angular-ui-patterns
- →Add a skeleton loader for async data
- →Implement a robust error handling UI
- →Build an empty state component
About this skill
Angular UI Patterns
Detailed Guide
Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
When not to use it
- →In backend-only application logic
- →When the UI requirements are strictly static and non-interactive
Limitations
- →Requires adoption of modern Angular control flow syntax
- →UI patterns depend on consistent component styling architecture
- →Skeleton design must be manual for each component type
How it compares
It moves beyond basic spinner usage to standardized, semantic UI patterns for data-heavy applications.
Compared to similar skills
angular-ui-patterns side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| angular-ui-patterns (this skill) | 4 | 5mo | No flags | Beginner |
| angular | 100 | 5mo | Review | Advanced |
| angular-state-management | 8 | 5mo | No flags | Intermediate |
| angular-modernization | 4 | 10mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by sickn33
View all by sickn33 →You might also like
angular
sickn33
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.
angular-state-management
sickn33
Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
angular-modernization
bitwarden
Modernizes Angular code such as components and directives to follow best practices using both automatic CLI migrations and Bitwarden-specific patterns. YOU must use this skill when someone requests modernizing Angular code. DO NOT invoke for general Angular discussions unrelated to modernization.
angular-routing
analogjs
Implement routing in Angular v20+ applications with lazy loading, functional guards, resolvers, and route parameters. Use for navigation setup, protected routes, route-based data loading, and nested routing. Triggers on route configuration, adding authentication guards, implementing lazy loading, or reading route parameters with signals.
igniteui-angular-grids
igniteui
Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data.
igniteui-angular-components
igniteui
Provides guidance on all non-grid Ignite UI for Angular UI components including application setup and architecture, form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, reactive forms), layout (Tabs, Bottom Navigation, Stepper, Accordion, Splitter, Navigation Drawer, Layout Manager), data display (List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Bar, Linear Progress Bar, Circular Progress Bar, Chat), feedback/overlays (Dialog, Snackbar, Toast, Banner), directives (Button, Ripple, Tooltip, Drag and Drop), Dock Manager, and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart, IgxCategoryChart, IgxFinancialChart, IgxDataChart, IgxPieChart). Use when users ask about any Ignite UI Angular component that is not a data grid, such as forms, inputs, dropdowns, date pickers, dialogs, navigation, lists, trees, cards, charts, or application scaffolding and setup.