angular/angular-developer

¿Qué hace angular-developer?

Genera código Angular y proporciona orientación arquitectónica. Actívalo al crear proyectos, componentes o servicios, o para mejores prácticas sobre reactividad (signals, linkedSignal, resource), formularios, inyección de dependencias, enrutamiento, SSR, accesibilidad (ARIA), animaciones, estilos (estilos de componentes, Tailwind CSS), pruebas o herramientas CLI.

¿Por qué usar esta skill?

Esta skill te ayuda a:

• Crear proyectos Angular con la estructura recomendada y configuraciones modernas.
• Generar componentes y servicios siguiendo las mejores prácticas de Angular, incluyendo señales (signal, linkedSignal, resource) y estilos con Tailwind CSS.
• Implementar reactividad de forma eficiente con las nuevas señales de Angular 17+.
• Manejar formularios de manera avanzada, tanto reactivos como basados en plantillas, con validación personalizada.
• Configurar enrutamiento con Lazy Loading, Guards y Resolvers.
• Optimizar el SSR con Angular Universal y manejo de hidratación.
• Asegurar la accesibilidad con roles ARIA y atributos aria-*.
• Añadir animaciones suaves con el módulo @angular/animations.
• Ejecutar pruebas unitarias con Jasmine/Karma o Jest, y pruebas de integración con Cypress.
• Automatizar tareas con la CLI de Angular (schematics, builders).

Plataformas soportadas

• Claude Code
• Cursor
• Codex

Cómo funciona

La skill se activa mediante comandos naturales o palabras clave relacionadas con Angular. Por ejemplo:

• "Crea un nuevo componente de login"
• "Genera un servicio para manejar autenticación"
• "Agrega un signal para un contador con linkedSignal"
• "Configura Tailwind CSS en un proyecto Angular"
• "Añade animación de fade in a un componente"
• "Escribe una prueba unitaria para el componente de login"

La skill interpreta la solicitud y genera código Angular optimizado, incluyendo importaciones, decoradores, templates y estilos según sea necesario.

Ejemplos de uso

Crear un nuevo componente con signals

generate component profile --style=scss

Luego puedes pedir: "Agrega una signal para el nombre de usuario y un linkedSignal para la edad del perfil."

Configurar enrutamiento con lazy loading

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canActivate: [AuthGuard]
  }
];

Formulario reactivo con validación

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  template: `
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <input formControlName="email" type="email" />
      <input formControlName="password" type="password" />
      <button type="submit">Iniciar sesión</button>
    </form>
  `
})
export class LoginComponent {
  loginForm = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]]
  });

  constructor(private fb: FormBuilder) {}

  onSubmit() {
    if (this.loginForm.valid) {
      // Lógica de autenticación
    }
  }
}

Prueba unitaria con Jasmine

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [LoginComponent]
    }).compileComponents();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have invalid form when empty', () => {
    expect(component.loginForm.valid).toBeFalsy();
  });
});

Notas adicionales

• Asegúrate de tener instalada la CLI de Angular (ng) y Node.js 18.x o superior.
• Para proyectos con Tailwind CSS, instala npm install -D tailwindcss postcss autoprefixer y configura tailwind.config.js.
• La skill sigue las convenciones de Angular Style Guide (angular.io/guide/styleguide).
• Los ejemplos asumen Angular 17+ y TypeScript 5.x.