angular-component
Crear componentes Angular con señales
Los componentes Angular modernos requieren APIs de señales, plantillas accesibles y patrones standalone actuales. Esta skill guía a Claude, Codex y Claude Code para crear o refactorizar componentes Angular v20+ de forma consistente.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Recursos legibles por agentes
Usa estos enlaces cuando un AI Agent, crawler o script necesite contexto limpio en lugar de leer toda la página.
Pruébalo
Usando "angular-component". Solicitud de un componente de tarjeta de perfil standalone con nombre, correo electrónico y comportamiento de selección.
Resultado esperado:
Un plan de componente y esquema de implementación usando entradas de señal, un evento de salida tipado, detección de cambios OnPush, clases del host y texto de imagen accesible.
Usando "angular-component". Solicitud para modernizar un componente de botón Angular antiguo.
Resultado esperado:
Un resumen de refactorización que reemplaza entradas con decoradores, HostBinding y ngClass por entradas de señal, metadatos de host, enlaces directos de clases y compatibilidad con teclado.
Usando "angular-component". Solicitud de un componente de pestañas con contenido de pestaña proyectado.
Resultado esperado:
Un diseño de componente estructurado usando consultas de contenido, estado de señal de pestaña activa, roles ARIA, navegación por teclado y comunicación clara entre padre e hijo.
Auditoría de seguridad
SeguroStatic analysis reported many high and medium indicators, but review found they are false positives in Markdown documentation and TypeScript examples. The files do not define executable scripts, shell commands, credential access, data exfiltration, or prompt injection attempts, so the skill is safe to publish.
Problemas de riesgo bajo (4)
Puntuación de calidad
Lo que puedes crear
Crear nuevos componentes de UI
Genera componentes standalone con entradas de señal, salidas, host bindings y una estructura de plantilla accesible.
Modernizar componentes existentes
Refactoriza patrones de componentes Angular antiguos hacia señales, control de flujo nativo y estado compatible con OnPush.
Estandarizar patrones de equipo
Mantiene los ejemplos de componentes consistentes en proyección de contenido, consultas, inyección de dependencias y renderizado diferido.
Prueba estos prompts
Crea un componente Angular v20 standalone de tarjeta de usuario con entradas de señal para nombre, URL del avatar y estado activo. Incluye marcado accesible y host bindings.
Construye un componente toggle standalone de Angular usando entradas y salidas de señal. Agrega host bindings para estado ARIA, manejo de clics y activación por teclado.
Refactoriza este componente Angular de entradas y salidas con decoradores a APIs de signal input y output. Usa control de flujo nativo y evita ngClass y ngStyle.
Diseña un componente de pestañas Angular usando consultas de contenido, paneles de pestañas proyectados, estado de señal, roles accesibles y la sintaxis de plantillas actual de Angular v20.
Mejores prácticas
- Proporciona la versión objetivo de Angular y las convenciones de componentes existentes antes de solicitar código.
- Pide el comportamiento de accesibilidad cuando el componente sea interactivo.
- Revisa los ejemplos generados dentro de la compilación y configuración de pruebas de tu proyecto.
Evitar
- No lo uses para frameworks que no sean Angular ni para sintaxis exclusiva de Angular heredado.
- No solicites componentes generados sin describir entradas, salidas e interacciones de usuario.
- No omitas la revisión específica del proyecto para restricciones de estilo, pruebas y dependencias.