Habilidades angular-ui-patterns
📦

angular-ui-patterns

Seguro

Build Robust Angular UIs with Proven Patterns

Creating reliable Angular interfaces requires consistent handling of loading states, errors, and empty states. This skill provides battle-tested patterns that ensure users always understand what is happening in your application.

Soporta: Claude Codex Code(CC)
🥉 75 Bronce
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "angular-ui-patterns". A component that fetches and displays user posts

Resultado esperado:

  • Component shows skeleton loader on initial load (no data exists yet)
  • When data arrives empty, displays empty state with 'Create Post' button
  • When API returns error, shows error banner with retry option while keeping cached data visible
  • On successful load, renders the full post list with proper accessibility attributes

Usando "angular-ui-patterns". A save button in a settings form

Resultado esperado:

  • Button is enabled only when form is valid
  • On click, button becomes disabled and shows spinner with 'Saving...' text
  • On success, shows green checkmark with 'Saved!' then reverts after 2 seconds
  • On error, shows red X with error message and re-enables button for retry

Auditoría de seguridad

Seguro
v1 • 2/24/2026

Documentation-only skill containing Angular UI pattern guidance. All 63 static analysis findings are false positives: URLs are documentation references (not network calls), backticks are markdown code fencing (not shell execution), and crypto detections are text pattern misidentifications. No executable code, network requests, or command execution present.

3
Archivos escaneados
581
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
50
Comunidad
100
Seguridad
96
Cumplimiento de la especificación

Lo que puedes crear

Frontend Developer Building Data-Driven Dashboards

Implement consistent loading, error, and empty states across dashboard widgets that fetch data from multiple APIs with varying latencies.

Team Lead Establishing UI Standards

Define organization-wide patterns for state management, error handling, and user feedback to ensure consistent user experience across teams.

AI Assistant Generating Angular Components

Guide Claude or Codex to generate Angular components that follow proven patterns for state handling, avoiding common pitfalls like silent errors or missing loading states.

Prueba estos prompts

Basic Loading State Pattern 
Create an Angular component that displays a list of items. Show a skeleton loader when loading with no data, an empty state when the list is empty, an error state with retry when loading fails, and the actual data when available. Use Angular Signals and modern control flow.
Form with Validation and Submission States 
Build an Angular form component with reactive forms validation. Show inline error messages for invalid fields, disable the submit button during form submission, display a loading indicator on the button, and show success or error toast notifications after the async operation completes.
Progressive Content Loading with @defer 
Implement an Angular page that loads critical content immediately and defers non-critical sections like comments, related items, or analytics using @defer. Include placeholder, loading, and error states for each deferred block with appropriate minimum loading times.
Confirmation Dialog with Optimistic Updates 
Create a delete confirmation dialog pattern that shows a modal asking for confirmation, applies optimistic UI updates when confirmed, rolls back changes if the server request fails, and displays appropriate feedback to the user throughout the process.

Mejores prácticas

  • Always show errors to users - never silently catch exceptions without feedback
  • Display loading indicators only when there is no existing data to prevent content flash
  • Disable action buttons during async operations to prevent duplicate submissions

Evitar

  • Showing spinner while cached data exists - causes unnecessary visual flash during refetch
  • Swallowing errors in catch blocks without informing the user of failures
  • Allowing multiple rapid clicks on submit buttons by not disabling during processing

Preguntas frecuentes

When should I use a skeleton loader versus a spinner?
Use skeleton loaders for initial page loads and list layouts where the content shape is known. Use spinners for modal actions, button submissions, and inline operations where the content shape is unknown or the area is small.
How do I handle errors when I have partial data available?
Show the existing data and display an error banner at the top or bottom of the affected section. This graceful degradation approach keeps the UI functional while informing users about partial failures.
What is the minimum loading time for spinners?
Use a minimum of 200ms for loading states to prevent flickering. If an operation completes faster than 200ms, still show the loading state for the full duration to avoid jarring visual transitions.
How should I handle form validation errors?
Show validation errors inline next to the affected fields only after the user has touched the field. Use clear, actionable messages that explain what is wrong and how to fix it.
When should I use optimistic updates?
Use optimistic updates for non-critical actions where a rollback is acceptable, such as likes, follows, or non-destructive edits. Always implement rollback logic in case the server request fails.
How do I make loading states accessible?
Use aria-live regions to announce loading state changes to screen readers. Ensure focus is managed appropriately after state changes, and provide text alternatives for visual loading indicators.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Repositorio

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/angular-ui-patterns

Ref.

main

Estructura de archivos

📄 metadata.json

📄 README.md

📄 SKILL.md