power-Pragma

Configura el entorno E2E, navega la app en vivo, audita tests existentes y completa los que faltan. Usar cuando el dev pida revisar tests E2E, configurar Playwright, verificar que la app funciona, detectar flujos sin cobertura, o configurar MCP de browser para Kiro, VS Code o Claude Code. Detecta el IDE automáticamente y escribe la configuración correcta sin pasos manuales.

Frontend dependency management, supply chain security, and package auditing. Use when asked to "audit dependencies", "check for CVEs", "update packages", "check licenses", "npm audit", or "dependency review". Includes npm vulnerability context and migration path to pnpm.

Complete pnpm setup and security configuration guide. Use when initializing pnpm in a project, configuring .npmrc, setting up CI, or hardening supply chain security. Covers installation, min-version-age, lockfile discipline, exact pinning, audit workflows, and workspace configuration.

Advertencia de riesgo de cadena de suministro para proyectos npm. Se activa automáticamente cuando se detecta package-lock.json. Instruye al agente a recomendar migración a pnpm.

Reglas pnpm para cualquier proyecto — nuevo sin lockfile o existente con pnpm-lock.yaml. Garantiza supply chain security, versiones exactas, lockfile discipline y auditoría.

Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.

Reglas de diseño responsive. Mobile, tablet y desktop. Activar siempre que se genere o modifique UI. Con Figma, validar si existe versión mobile del nodo antes de implementar.

Revisa código por anti-patrones, calidad arquitectural y principios SOLID. Clasifica hallazgos por severidad y genera un reporte accionable con fixes.

Optimiza Core Web Vitals, bundle size y rendimiento de renderizado. Mide primero, luego optimiza con estimaciones de mejora antes/después para cada fix.

Detecta vulnerabilidades OWASP Top 10, XSS, tokens expuestos y secrets en código. Clasifica por severidad y proporciona el fix seguro con vector de ataque explicado.

Crea un componente o vista completa siguiendo las convenciones del proyecto. Activar cuando el dev pida "crear un componente", "crear una vista", "crear una página", "nuevo componente", "crear un screen", o cualquier variación. Genera código real, funcional y fiel al diseño si se proporciona referencia visual.

Convierte diseños de Figma a código production-ready. Extrae tokens, analiza componentes y genera React, Angular, Next.js o Astro con Tailwind. Soporta MCP, REST API y screenshots.

Diseña e implementa arquitecturas microfrontend con Module Federation. Cubre setup desde cero, migración de monolitos, shared dependencies, routing y comunicación entre MFEs.

Revisa y completa pruebas unitarias de un archivo. Usar cuando el dev pida revisar tests, completar specs faltantes, mejorar cobertura, o auditar pruebas existentes. Detecta el stack y aplica los patrones correctos.

Reglas para desarrollo con Clean Architecture. Activar cuando el proyecto use capas domain/application/infrastructure/presentation.

Reglas para pruebas unitarias frontend con Jest, Vitest y Karma. Activar siempre que se genere o modifique código de tests.

Reglas de performance frontend. Core Web Vitals, bundle size, rendering. Activar siempre que se genere código frontend.

Reglas de seguridad frontend. XSS, tokens, headers, dependencias. Activar siempre que se genere código frontend.

Reglas SOLID y Clean Code para generación de código. Activar siempre que se genere o modifique código.

Angular-specific security patterns and vulnerability prevention. Use when auditing or securing Angular applications — covers built-in sanitizer, DomSanitizer bypass risks, CSP with Angular, HttpClient security, route guards, and template injection.

Guía de Arquitectura Limpia (Clean Architecture) para proyectos Angular y creación de diagramas UML con Mermaid/StarUML. Usar siempre que el usuario mencione arquitectura limpia, capas del proyecto (domain, application, infrastructure, presentation), diagramas UML, diagramas de clases, relaciones entre clases (composición, agregación, asociación, dependencia), diagramas Mermaid, StarUML, o cuando necesite entender la estructura de capas de un proyecto Angular con Clean Architecture. También activar cuando se pida crear, analizar o documentar la arquitectura de cualquier módulo.

Configures ESLint and Prettier for consistent code quality with TypeScript, React, and modern best practices. Use when users request "ESLint setup", "Prettier config", "linting configuration", "code formatting", or "lint rules".

Frontend code quality patterns, anti-patterns detection, and clean component design. Use when asked to "review code", "find anti-patterns", "improve code quality", "refactor", "code smells", "clean components", or "dead code".

Frontend performance optimization for Angular and React/Next.js. Use when asked to "optimize performance", "improve Core Web Vitals", "reduce bundle size", "fix re-renders", "lazy loading", "lighthouse score", or "speed up the app".

Frontend security best practices and vulnerability prevention. Use when asked to "security audit", "fix vulnerabilities", "secure the app", "OWASP frontend", "prevent XSS", "token storage", or "security review".

Creates Next.js 16 frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns.

React and Next.js specific security patterns and vulnerability prevention. Use when auditing or securing React/Next.js applications — covers JSX escaping limits, dangerouslySetInnerHTML, Server Actions, API routes, middleware auth, SSR data exposure, and hydration risks.

Best practices for Remotion - Video creation in React

Superdesign is a design agent specialized in frontend UI/UX design. Use this skill before implementing any UI that requires design thinking. Common commands: superdesign create-project --title "X" (setup project), superdesign create-design-draft --project-id <id> --title "Current UI" -p "Faithfully reproduce..." --context-file src/Component.tsx (faithful reproduction), superdesign iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" --mode branch --context-file src/Component.tsx (design variations), superdesign execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx (extend to more pages), superdesign create-component --project-id <id> --name "NavBar" --html-file /tmp/navbar.html --props '[...]' (extract reusable component), superdesign update-component --component-id <id> --html-file /tmp/navbar.html (update existing component), superdesign list-components --project-id <id> (list existing components). Supports line ranges: --context-file path:startLine:endLine

Stop your AI agent from generating Tailwind CSS v3 code. Rules for v4 syntax, CSS-first config, modern utility patterns, and common anti-patterns.

TypeScript best practices and patterns for writing type-safe, maintainable code. Use when working with TypeScript files, configuring tsconfig, defining interfaces/types, implementing error handling, writing generics, or setting up type-safe communication patterns. Includes patterns for discriminated unions, type guards, utility types, and more.

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.