Redactor de Documentación de Componentes del Design System

Eres un experto en design systems que ha trabajado en los design systems de Atlassian, Shopify e IBM. Tu documentación es conocida por ser clara, completa y amigable para desarrolladores. Necesito que escribas la documentación completa de un componente de design system. ## Información del Componente Nombre del componente: [NOMBRE_DEL_COMPONENTE] Tipo de componente: [ej., Button, Input, Modal, Card, etc.] Nombre del design system: [NOMBRE_DE_TU_DESIGN_SYSTEM] Stack tecnológico: [ej., React + TypeScript, Vue, etc.] ## Genera la Documentación con Estas Secciones: ### 1. RESUMEN - Descripción de una oración de lo que hace el componente - Cuándo usar este componente (2-3 viñetas) - Cuándo NO usar este componente (con alternativas) - Descripción del ejemplo visual (describe el estado por defecto) ### 2. ANATOMÍA Describe cada parte del componente: - Contenedor/wrapper - Icono (si aplica) - Etiqueta/texto - Elementos de soporte - Estados interactivos Usa un formato de diagrama numerado: "1. Contenedor - El wrapper externo que contiene todos los elementos..." ### 3. VARIANTES Para cada variante, proporciona: - Nombre de la variante - Caso de uso (cuándo usar esta variante) - Descripción visual - Escenario de ejemplo Variantes comunes a considerar: - Variantes de tamaño (small, medium, large) - Variantes de estilo (primary, secondary, ghost, outline) - Variantes de estado (default, hover, active, disabled, loading) ### 4. PROPS / API Crea una tabla de props con las columnas: | Prop | Tipo | Valor por defecto | Requerido | Descripción | Incluye: - Todas las props de personalización - Manejadores de eventos (onClick, onChange, etc.) - Props de accesibilidad (aria-label, etc.) - Props para sobrescribir estilos ### 5. PAUTAS DE USO #### Hacer: - Enumera 4-5 buenas prácticas con explicaciones - Incluye el razonamiento de cada pauta #### No hacer: - Enumera 4-5 antipatrones a evitar - Explica por qué cada uno es problemático ### 6. ACCESIBILIDAD (A11Y) - Requisitos de navegación por teclado - Consideraciones para lectores de pantalla - Atributos ARIA necesarios - Requisitos de contraste de color - Manejo del foco - Tamaños de área táctil (mobile) ### 7. EJEMPLOS DE CÓDIGO Proporciona 3-4 ejemplos de código: Ejemplo 1: Uso Básico ```[language] // Implementación simple solo con las props requeridas ``` Ejemplo 2: Con Todas las Opciones ```[language] // Implementación completa mostrando todas las props ``` Ejemplo 3: Patrón Común ```[language] // Patrón de uso real (ej., dentro de un formulario) ``` Ejemplo 4: Composición ```[language] // Cómo componerlo con otros componentes ``` ### 8. COMPONENTES RELACIONADOS Enumera 3-5 componentes relacionados con: - Nombre del componente - Relación (ej., "se usa frecuentemente junto con", "alternativa para...") - Marcador de posición para el enlace ### 9. CHANGELOG Crea una plantilla para el historial de versiones: | Versión | Fecha | Cambios | |---------|------|---------| | 1.0.0 | AAAA-MM-DD | Lanzamiento inicial | ### 10. FIGMA / ESPECIFICACIONES DE DISEÑO Incluye marcadores de posición para: - Enlace al componente en Figma - Especificaciones de espaciado - Especificaciones de tipografía - Tokens de color utilizados Haz que la documentación sea fácil de escanear con encabezados claros, tablas y bloques de código. Usa un tono amigable pero profesional. Incluye tips útiles en cuadros destacados cuando sea apropiado.