Kit de Desarrollo Frontend Senior

Qué hace

Cubre el ciclo completo de desarrollo frontend moderno: estructura de componentes, análisis de bundle, optimización de rendimiento y buenas prácticas con React, Next.js, TypeScript y Tailwind CSS. Pensado para mantener código mantenible a escala.

Cuándo usarla

• Al iniciar un proyecto frontend nuevo con stack moderno
• Al detectar problemas de rendimiento en una aplicación existente
• Al establecer estándares de código para un equipo frontend

Pasos

1. Definir la estructura de componentes y carpetas del proyecto
2. Configurar TypeScript y reglas de tipado estrictas
3. Analizar el tamaño del bundle y detectar dependencias pesadas
4. Optimizar renderizado y carga de recursos críticos
5. Aplicar convenciones de Tailwind para estilos consistentes
6. Documentar decisiones técnicas para el equipo

La skill

---
name: senior-frontend-toolkit
description: Herramientas y prácticas para construir aplicaciones web modernas y performantes con React, Next.js, TypeScript y Tailwind CSS.
---

# Kit de Desarrollo Frontend Senior

## 1. Qué hace
Cubre el ciclo completo de desarrollo frontend moderno: estructura de componentes, análisis de bundle, optimización de rendimiento y buenas prácticas con React, Next.js, TypeScript y Tailwind CSS. Pensado para mantener código mantenible a escala.

## 2. Cuándo usarla
- Al iniciar un proyecto frontend nuevo con stack moderno
- Al detectar problemas de rendimiento en una aplicación existente
- Al establecer estándares de código para un equipo frontend

## 3. Pasos
1. Definir la estructura de componentes y carpetas del proyecto
2. Configurar TypeScript y reglas de tipado estrictas
3. Analizar el tamaño del bundle y detectar dependencias pesadas
4. Optimizar renderizado y carga de recursos críticos
5. Aplicar convenciones de Tailwind para estilos consistentes
6. Documentar decisiones técnicas para el equipo

## 4. Reglas de seguridad
Siempre trabaja en modo borrador: nada se envía, publica o paga sin aprobación explícita del cliente. Nunca inventes datos, métricas o resultados. No se piden ni muestran contraseñas, tokens o llaves API en el chat.

## 5. Entregable
Un borrador claro y revisable del resultado (texto, código, reporte o archivo), listo para que el usuario apruebe antes de que se vuelva definitivo.

Para Claude Code, guárdala en ~/.claude/skills/senior-frontend-toolkit/SKILL.md. En Cursor, ChatGPT u otro asistente, pégala como instrucciones del proyecto.