​

Guía de Estilo de Documentación

​

Estilo de Producción para Mintlify

​

Marco: Propiedades CSS (Variables CSS)

​

Arquitectura del Tema

• ❌ Objetos de tema en JavaScript (ThemeData, themeStyles.jsx) - OBSOLETO
• ❌ Objetos de estilo en línea con colores predeterminados
• ❌ Cambio de tema basado en JavaScript

• ✅ Propiedades de CSS personalizadas (--variable-name)
• ✅ Variables CSS globales en style.css
• ✅ configuración de tema Mintlify en docs.json

​

Sistema de colores

​

Uso de Propiedades CSS Personalizadas

​

Estilos en línea (Recomendado)

<div style={{ 
  color: "var(--accent)", 
  border: "1px solid var(--border)",
  background: "var(--card-background)"
}}>
  Content
</div>

​

CSS a nivel de componente

export const MyComponent = () => {
  return (
    <>
      <div className="my-component">
        Content
      </div>
      <style>{`
        .my-component {
          color: var(--text);
          background: var(--card-background);
          border: 1px solid var(--border);
        }
      `}</style>
    </>
  );
};

​

CSS global en style.css

.my-custom-class {
  color: var(--accent);
  background: var(--card-background);
}

​

Cómo funciona el cambio de tema

:root {
  --accent: #3CB540; /* Light mode */
}

.dark {
  --accent: #2b9a66; /* Dark mode */
}

​

Reglas de color

​

Enfoques obsoletos

1. Objeto ThemeData - snippets/styles/themeStyles.jsx es OBSOLETO
   Copiar

   Preguntar a la IA

   // ❌ WRONG - DO NOT USE
   import { ThemeData } from "/snippets/styles/themeStyles.jsx";
   <div style={{ color: ThemeData.light.accent }}>Content</div>
   
2. Colores predeterminados - Nunca codificar valores hexadecimales que deban adaptarse al tema
   Copiar

   Preguntar a la IA

   // ❌ WRONG - DO NOT USE
   <div style={{ color: "#3CB540" }}>Content</div>
   
3. Cambio de tema en JavaScript - No es necesario, CSS lo maneja automáticamente

​

Qué NO hacer

• ❌ No importar ni usarThemeData desde themeStyles.jsx
• ❌ No codifiques colores hexadecimales que deban adaptarse al tema
• ❌ No uses grises genéricos sin verificar la compatibilidad con el tema
• ❌ No hagas colores semánticos (calificaciones de confianza, estados de error) dependientes del tema
• ❌ No sobrescribas el texto blanco en fondos intencionalmente coloreados
• ❌ No crees objetos de tema personalizados en JavaScript

​

Arquitectura del marco de estilo

​

Capas del marco

​

Capa 1: CSS global (style.css)

• ✅ Propiedades CSS personalizadas (variables de tema)
• ✅ Mintlify anulaciones de componentes (navegación, pie de página, etc.)
• ✅ Clases del contenedor del modo Frame
• ✅ Clases utilitarias para patrones utilizados 5 o más veces en las páginas

• ❌ Estilos específicos de página
• ❌ Estilos específicos de componente (pertenecen en JSX)
• ❌ Necesidades de diseño únicos

/* ============================================
   THEME VARIABLES (CSS Custom Properties)
   ============================================ */
:root { /* Light mode */ }
.dark { /* Dark mode */ }

/* ============================================
   FRAMEWORK OVERRIDES (Mintlify-specific)
   ============================================ */
/* Navigation, footer, frame mode containers */

/* ============================================
   UTILITY CLASSES (Reusable patterns)
   ============================================ */
/* Only for patterns used 5+ times across pages */

​

Capa 2: Componentes JSX (snippets/components/**/*.jsx)

• ✅ Usar propiedades CSS personalizadas (var(--accent), var(--text), etc.)
• ✅ Los estilos deben estar dentro del archivo del componente
• ✅ Usar <style> etiquetas para estilos complejos (pseudoclases, consultas de medios)
• ✅ Usar objetos de estilo en línea para estilos simples
• ❌ Importar archivos CSS externos
• ❌ Codificar colores de tema (usar variables CSS)
• ❌ Usar “className sin la etiqueta correspondiente “<style>”

export const MyComponent = () => {
  return (
    <div style={{
      color: "var(--text)",
      backgroundColor: "var(--card-background)",
      border: "1px solid var(--border)",
      padding: "1rem"
    }}>
      Content
    </div>
  );
};

export const MyComponent = () => {
  return (
    <>
      <div className="my-component">
        Content
      </div>
      <style>{`
        .my-component {
          color: var(--text);
          background: var(--card-background);
        }
        .my-component:hover {
          border-color: var(--accent);
        }
      `}</style>
    </>
  );
};

export const MyComponent = ({ variant = "default" }) => {
  const baseStyle = {
    color: "var(--text)",
    padding: "1rem"
  };
  
  const variantStyles = {
    default: { border: "1px solid var(--border)" },
    accent: { border: "1px solid var(--accent)" }
  };
  
  return (
    <div style={{ ...baseStyle, ...variantStyles[variant] }}>
      Content
    </div>
  );
};

​

Capa 3: Archivos MDX (v2/pages/**/*.mdx)

• ✅ Usar primitivas de componentes para todas las necesidades de estilo
• ✅ Usar componentes globales Mintlify (Card, Tabs, Steps, etc.)
• ✅ Importar componentes personalizados desde /snippets/components/
• ❌ NO atributos en línea style={{}} atributos
• ❌ NO colores predefinidos
• ❌ NO personalizados className atributos

<div style={{ display: "flex", gap: "1rem" }}>
  <Card>Content 1</Card>
  <Card>Content 2</Card>
</div>

import { FlexContainer } from '/snippets/components/primitives/layout.jsx';

<FlexContainer gap="1rem">
  <Card>Content 1</Card>
  <Card>Content 2</Card>
</FlexContainer>

​

Árbol de decisiones: ¿A qué lugar va este estilo?

1. ¿Es un color de tema? → Añadir a style.css como Propiedad de CSS Personalizada
2. ¿Se utiliza en un componente? → Colocar en un archivo de componente JSX (en línea o “<style>tag”)
3. ¿Es necesario en MDX? → Crear/usar una primitive de componente
4. ¿Se utiliza 5 o más veces globalmente? → Añadir clase de utilidad a style.css
5. ¿Es específico de la página? → Cree un primitivo de componente (no lo coloque en “style.css)

​

Biblioteca de Primitivos de Componentes

• Diseño: FlexContainer, GridContainer, Spacer
• Tablas: StyledTable, TableRow, TableCell
• Contenedores: BorderedBox, CenteredContainer, FullWidthContainer

​

Tipografía

​

Títulos

import { H1, H2, PageHeader } from "/snippets/components/display/frameMode.jsx";

<PageHeader>Main Title</PageHeader>
<H1>Section Title</H1>
<H2>Subsection Title</H2>

​

Estilo del texto

• Usar negrita (**text**) para énfasis
• Usa cursiva (*text*) con moderación
• Usa code (backticks) para código en línea
• Usar bloques de código para código de múltiples líneas

​

Expresiones matemáticas

​

Matemáticas en línea

The voting power is calculated as $V_i = \frac{B_i}{B_T}$ where $B_i$ is bonded stake.

​

Ecuaciones de bloque

$$
R_t = S_t \cdot r_t
$$

​

Sintaxis común de LaTeX

​

Crítico: No usar delimitadores de barra invertida

{/* ❌ WRONG - backslash delimiters break MDX */}
\(B_i\) for inline math
\[R_t = S_t \cdot r_t\] for block math

{/* ✅ CORRECT - dollar sign delimiters */}
$B_i$ for inline math
$$R_t = S_t \cdot r_t$$ for block math

​

Configuración de LaTeX

​

Espaciado y disposición

​

Espaciado consistente

• Utilice un espaciado consistente entre las secciones
• Agrupe el contenido relacionado
• Utilice divisores (<CustomDivider />) para separar las secciones principales

​

Diseño de página

• Portales - Usar CardGroups para puntos de entrada clave
• Guías - Usar Pasos para instrucciones secuenciales
• Referencias - Usar Tablas o Acordeones para datos organizados
• Guías rápidas - Usar Pestañas para diferentes caminos (Sistema Operativo, en cadena/ fuera de cadena)

​

Uso de componentes

​

Cuándo usar componentes

• Pestañas - Separar el contenido por contexto (sistema operativo, tipo de flujo de trabajo, tipo de usuario)
• Vistas - Mostrar contenido diferente según el sistema operativo o la ruta del usuario
• Pasos - Instrucciones secuenciales para procesos
• Grupos de tarjetas - Agrupaciones visuales para portales, hubs y contenido relacionado
• Acordeones - Secciones expandibles para información detallada
• Llamados - Notas importantes, consejos, advertencias y cajas de información

​

Tipos de llamado

• <Info> - Información general y consejos
• <Tip> - Sugerencias útiles
• <Warning> - Advertencias importantes
• <Danger> - Alertas críticas
• <Note> - Contexto adicional

​

Preferir Componentes Personalizados para Enlaces y Navegación

• Enlaces: Usa “<GotoLink> y “<GotoCard> en lugar de enlaces de markdown sin formato o Mintlify <Card> con “href
• Citas: Usa “<Quote> y <FrameQuote> en lugar de bloques de cita
• Tarjetas: Usa <GotoCard> para tarjetas de navegación con un mejor estilo
• Llamados: Usa “<CustomCallout>y “<TipWithArrow>para llamadas visuales mejoradas
• Enlaces externos: Usa “<DoubleIconLink>para enlaces externos (GitHub, etc.)

{/* ❌ Plain markdown link */}
[Getting Started](/get-started)

{/* ✅ Custom component with better styling */}
import { GotoLink } from '/snippets/components/primitives/links.jsx';
<GotoLink label="Getting Started" relativePath="/get-started" icon="arrow-right" />

{/* ❌ Plain blockquote */}
> This is a quote

{/* ✅ Custom quote component with attribution */}
import { FrameQuote } from '/snippets/components/display/quote.jsx';
<FrameQuote author="John Doe" source="Livepeer Blog" href="https://livepeer.org/blog">
  This is a quote with better visual design.
</FrameQuote>

{/* ❌ Basic Mintlify Card with href */}
<Card title="API Reference" href="/api/reference">
  API documentation
</Card>

{/* ✅ Custom GotoCard with enhanced styling */}
import { GotoCard } from '/snippets/components/primitives/links.jsx';
<GotoCard
  label="API Reference"
  relativePath="/api/reference"
  icon="book"
  text="Complete API documentation with examples"
  cta="View Docs"
/>

• Enlaces integrados dentro de párrafos (los enlaces de markdown están bien)
• Enlaces en ejemplos de código o referencias técnicas
• Enlaces que no necesitan énfasis visual

​

Mintlify Sobrescrituras y mejores prácticas

​

Sobrescritura: “Usar clases de Tailwind”

{/* ❌ Don't use Tailwind */}
<div className="flex gap-4 items-center">
  <Card>Content</Card>
</div>

{/* ✅ Use component primitives */}
<FlexContainer gap="1rem" align="center">
  <Card>Content</Card>
</FlexContainer>

​

Sustituir: “Los estilos en línea son adecuados para soluciones rápidas”

{/* ❌ Don't use inline styles in MDX */}
<div style={{ display: "flex", gap: "1rem" }}>
  <Card>Content</Card>
</div>

{/* ✅ Use component primitives */}
<FlexContainer gap="1rem">
  <Card>Content</Card>
</FlexContainer>

​

Sobrescribir: “Usar CSS global para todo”

• ✅ Variables de tema (Propiedades CSS personalizadas)
• ✅ Mintlify componente de anulación (navegación, pie de página)
• ✅ Clases del modo de marco
• ✅ Clases de utilidad utilizadas 5 o más veces globalmente

• ❌ Estilos específicos del componente (colocar en JSX)
• ❌ Estilos específicos de página (crear primitivas de componentes)
• ❌ Necesidades de estilo únicos (crear primitivas de componentes)

​

Sobrescribir: “Los estilos de los componentes pueden ser externos”

{/* ✅ Styles within component */}
export const MyComponent = () => {
  return (
    <>
      <div className="my-component">Content</div>
      <style>{`
        .my-component {
          color: var(--text);
        }
      `}</style>
    </>
  );
};

​

Mintlify Advertencias y limitaciones

​

Limitaciones Críticas

​

1. Las rutas de importación deben ser absolutas

// ✅ Correct - absolute path from repo root
import { MyComponent } from '/snippets/components/MyComponent.jsx';

// ❌ Wrong - relative paths don't work
import { MyComponent } from '../components/MyComponent.jsx';

​

2. Se requieren extensiones de archivo

// ✅ Include extension
import { Component } from '/snippets/Component.jsx';

// ❌ May not resolve
import { Component } from '/snippets/Component';

​

3. No se puede importar en archivos de componentes

// ❌ WRONG - This will fail
// snippets/components/MyComponent.jsx
import { themeColor } from '/snippets/styles/themeStyles.jsx';

export const MyComponent = () => {
  return <div style={{ color: themeColor.light.accent }}>Hello</div>;
};

// ✅ CORRECT
// MyPage.mdx
import { MyComponent } from '/snippets/components/MyComponent.jsx';
import { ThemeData } from '/snippets/styles/themeStyles.jsx';

<MyComponent />
// MyComponent can access ThemeData from parent scope

​

4. Los archivos JSX no pueden importar otros archivos JSX

​

5. Herencia del ámbito de MDX

• ✅ El MDX secundario hereda el ámbito del padre para las propiedades - Los imports del padre funcionan cuando se usan como props de componente
• ❌ ** - El MDX hijo NO puede heredar el alcance del padre para la interpolación directa de JSX** - Las variables usadas como {variable} pueden necesitar un nuevo import
• ✅ El hijo puede importar sus propias variables - Si el hijo necesita algo que el padre no importa

// Parent.mdx
import { DOCKER_CODE } from '/snippets/data/gateways/code.jsx'
import ChildView from '/snippets/pages/ChildView.mdx'

<ChildView />

// ChildView.mdx
{/* Can use DOCKER_CODE as props */}
<CustomCodeBlock {...DOCKER_CODE.install} />  {/* ✅ Works */}

{/* But direct interpolation may need re-import */}
<Badge>{latestVersion}</Badge>  {/* ❌ May need import */}

​

6. Los hooks de React son globales

// ✅ Works - hooks available without import
export function MyComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => { /* ... */ }, []);
  return <div>{count}</div>;
}

// ❌ Not needed - will cause errors
import React, { useState, useEffect } from 'react';

​

7. Comportamiento del componente de icono

// ❌ This will NOT work - color styling has no effect
<span style={{ color: "#3CB540" }}>
  <Icon icon="/path/to/icon.svg" size={20} />
</span>

​

8. Mintlify Componentes globales

• React, Frame, Card, Icon, Steps, Step, Tabs, Tab
• Note, Warning, Info, Tip, Danger
• Accordion, Columns, CardGroup, CodeBlock, Expandable, Badge, Tooltip

// ✅ Correct - use directly
<Card title="Title">Content</Card>
<Tabs>
  <Tab title="Tab 1">Content</Tab>
</Tabs>

// ❌ Wrong - don't import
import { Card, Tabs } from "@mintlify/components";

// ❌ WRONG - Will cause "ReferenceError: Expandable is not defined"
const componentMap = {
  expandable: Expandable,
  accordion: Accordion
};
const Component = componentMap[component];

// ✅ CORRECT - Use conditional rendering with direct JSX
if (component === "expandable") {
  return <Expandable {...props}>{content}</Expandable>;
}
return <Accordion {...props}>{content}</Accordion>;

​

9. Los comentarios de JSX no impiden el análisis de MDX

{/* ❌ WRONG - MDX will still try to parse CustomCodeBlock */}
{/* 
<CustomCodeBlock codeString="test" />
*/}

{/* ✅ CORRECT - Remove the entire section, don't comment it */}
{/* Code components temporarily unavailable - see component-bugs.md */}

1. Elimina toda la sección del archivo MDX
2. Añade un comentario explicando por qué fue eliminada
3. **Documento en docs/PLAN/errors/component-bugs.md**si es un error de componente
4. No uses comentarios JSXpara “comentar” el uso de componentes

​

9. Limitaciones del modo Frame

• Las encabezados de markdown predeterminados pueden no renderizarse correctamente
• Use componentes de encabezado personalizados de frameMode.jsx
• Todo el estilo debe ser personalizado
• Los componentes Mintlify aún funcionan pero pierden los estilos predeterminados
• Mantenga las primitivas de diseño responsivo en style.css (.frame-mode-container, .frame-mode-hero-full, paginación de marco)
• Mantenga la estructura específica de portal/página en componentes JSX compartidos (por ejemplo /snippets/components/domain/SHARED/Portals.jsx)
• No use constantes de ruptura fijas directamente en los estilos de los componentes (por ejemplo, valores hardcodeados 96px, 20px, o fijas % anchuras)
• Preferir variables de CSS + puntos de interrupción para el diseño en modo marco, y propiedades personalizadas de CSS (var(--...)) para la temática

​

Importar patrones

​

Patrón Correcto: Importar en MDX, Usar en Componente

// ✅ MyPage.mdx
import { MyComponent } from '/snippets/components/MyComponent.jsx';
import { DOCKER_CODE } from '/snippets/data/gateways/code.jsx';

<MyComponent />

// ✅ MyComponent.jsx - uses CSS Custom Properties (production-grade)
export const MyComponent = () => {
  return (
    <div style={{ color: "var(--accent)" }}>
      <CustomCodeBlock {...DOCKER_CODE.install} />
    </div>
  );
};

​

Flujo de Trabajo de Git

​

Gestión de Ramas

git checkout docs-v2
git pull
git checkout -b docs-plan/XX-task-name

• docs-v2 (rama de documentación activa)
• main o master
• Cualquier rama que otro agente esté usando

​

Prácticas recomendadas

​

Organización del código

1. Mantenga los componentes en /snippets/components/ organizados por propósito:
   • primitives/ - Elementos de interfaz de usuario básicos
   • layout/ - Componentes de diseño
   • display/ - Medios e incrustaciones
   • content/ - Visualización de contenido
   • integrations/ - Servicios externos
   • domain/ - Componentes específicos de dominio
2. Mantén los datos en /snippets/data/ para cadenas de código y variables reutilizables
3. Usar /snippets/pages/ para contenido MDX modular que se importa en las páginas principales

​

Estilo de escritura

1. Sé claro y conciso - Escribir para usuarios con diferentes niveles de conocimiento técnico
2. Usar ejemplos - Incluir ejemplos de código y escenarios del mundo real
3. Proporcionar contexto - Explicar por qué, no solo cómo
4. Vínculo al contenido relacionado - Ayudar a los usuarios a descubrir información relacionada
5. Probar ambos temas - Verificar que el contenido se ve bien en los modos claro y oscuro

​

Directrices del componente

1. Usar Solo Propiedades Personalizadas de CSS - Nunca usar ThemeData o colores codificados
2. Referir variables de style.css - Todos los colores del tema están en style.css como variables CSS
3. Componentes de prueba - Asegúrate de que los componentes se rendericen correctamente
4. Manejar hijos correctamente - Siempre manejar los hijos como matrices al mapear
5. Documentar Props - Incluir comentarios JSDoc para las propiedades de los componentes
6. Proporcionar ejemplos - Añadir ejemplos en la carpetaexamples/ para cada componente

​

Inmutabilidad de los componentes

• Crear nuevos componentes
• Modificar archivos MDX que usen componentes
• Corrigiendo importaciones y uso de MDX

• Modificar archivos de componentes existentes
• Cambiar las firmas de funciones de componentes
• Añadir o eliminar exportaciones de componentes
• Cambiar la lógica del componente

1. Comentar la sección del componente en el archivo MDX donde se utiliza
2. Verificar que la página se renderice sin esa sección
3. Si la página se renderiza correctamente → El componente es el problema
4. Documenta el error en docs/PLAN/errors/component-bugs.md con:
   • Nombre del componente y ruta del archivo
   • Mensaje de error desde la consola
   • Página donde ocurre el error
   • Verificación de que comentar el código lo soluciona
   • Recomendación para arreglar el componente (pero no lo implementes)

​

Nombres de archivos

• Use kebab-case para los nombres de archivos: my-component.mdx
• Use PascalCase para los nombres de componentes: MyComponent
• Use nombres descriptivos que indiquen su propósito

​

Lista de verificación de pruebas

• El contenido se muestra correctamente en modo oscuro (predeterminado)
• El contenido se muestra correctamente en modo claro
• Todos los enlaces funcionan y apuntan a las páginas correctas
• Los ejemplos de código son precisos y probados
• Las imágenes se cargan y tienen texto alternativo adecuado
• Los componentes usan colores adaptados al tema
• No hay colores fijos que deban adaptarse al tema
• Los componentes se representan correctamente
• No hay errores en la consola de herramientas de desarrollo del navegador
• Errores de sintaxis de MDX revisados y corregidos
• Todas las páginas verificadas en navegador sin interfaz (ver Requisitos de Verificación a continuación)

​

Requisitos de verificación

​

Comprobación de sintaxis MDX

1. Use herramientas de linting para verificar todos los archivos MDX modificados
2. Compruebe lo siguiente:
   • Etiquetas JSX no cerradas
   • Sintaxis de importación no válida
   • Faltan metadatos
   • Errores de sintaxis
3. Corrija cualquier error de MDX antes de considerar el trabajo completo

​

Verificación con navegador headless

1. Use Puppeteer o una herramienta similar para cargar cada página
2. Esperar a que la red esté inactiva
3. Comprobar errores de consola (filtrando los artefactos del script de prueba)
4. Verificar que la longitud del contenido sea mayor a 500 caracteres
5. Verificar que exista un elemento H1
6. Comprobar errores 404

• Ignorar “require no está definido” de los scripts de prueba
• Ignorar errores relacionados con “puppeteer”
• Ignorar errores de “fs ya ha sido declarado”
• Enfocarse en errores reales de componentes

• URL de la página
• Longitud del contenido
• Texto H1
• Lista de errores reales de la consola (si los hay)
• Estado: ✅ OK o ❌ ERRORES

​

Verificación de la estructura de la URL

• Ruta de la página en docs.json: v2/resources/documentation-guide/component-library/primitives
• URL: /v2/resources/documentation-guide/component-library/primitives

​

Mintlify Configuración del tema

{
  "theme": "palm",
  "colors": {
    "primary": "#3CB540",
    "light": "#2b9a66",
    "dark": "#3CB540"
  }
}

​

Ganchos de Pre-Commit

​

Lo que se comprueba

• ObsoletoThemeData Uso - Bloquea las importaciones deThemeData desde snippets/styles/themeStyles.jsx
• Colores de tema predeterminados - Advierte sobre códigos hexadecimales directos que deben usar Propiedades CSS Personalizadas
• Importaciones de fragmentos relativos - Marca las importaciones desde snippets/ que usan rutas relativas en lugar de rutas absolutas
• Importaciones innecesarias - Advierte sobre las importaciones explícitas para los componentes y ganchos de React disponibles globalmente de Mintlify
• Validación de sintaxis - Verifica la sintaxis de MDX, JSON, Shell y JavaScript
• Validación del navegador - Prueba que las páginas de MDX se rendericen correctamente en un navegador sin cabeza (simint devestá en ejecución)

​

Instalación

./.githooks/install.sh

​

¿Qué ocurre en caso de incumplimiento

1. El commit es bloqueado
2. Recibes un mensaje de error detallado que enumera todas las violaciones
3. Debes corregir las violaciones antes de volver a hacer el commit

​

Ediciones protegidas.allowlist (Solo humano)

git commit -m "Update .allowlist" --trailer "allowlist-edit=true"

git commit -m "Remove obsolete files" --trailer "allow-deletions=true"

​

Salida de error de ejemplo

╔═══════════════════════════════════════════════════════════════╗
║  STYLE GUIDE VIOLATIONS DETECTED - COMMIT BLOCKED           ║
╚═══════════════════════════════════════════════════════════════╝

Found 2 violation(s):

❌ my-component.jsx: Uses deprecated ThemeData - use CSS Custom Properties instead
⚠️  my-page.mdx: Contains hardcoded theme colors - use CSS Custom Properties (var(--accent), etc.)

📖 MANDATORY: Read the Style Guide before committing:
   v2/resources/documentation-guide/style-guide.mdx

​

Validación del navegador

• Errores en tiempo de ejecución en componentes
• Importaciones fallidas
• Errores de consola
• Fallos de representación

​

Suite de pruebas completa

​

Ejecutar pruebas

# Run all tests
npm test

# Run specific test suites
npm run test:style      # Style guide validation
npm run test:mdx        # MDX syntax validation
npm run test:spell      # UK English spelling
npm run test:quality    # Quality checks (alt text, links, frontmatter)
npm run test:browser    # Browser rendering tests

​

¿Qué se prueba?

• Uso de propiedades CSS personalizadas (sin ThemeData, sin colores codificados)
• Sin estilos en línea en archivos MDX
• Sin clases de Tailwind
• Rutas de importación absolutas
• Convenciones de nombres de archivos
• Advertencias sobre inmutabilidad de componentes

• Validación de frontmatter
• Etiquetas JSX no cerradas
• Sintaxis de importación no válida
• Problemas de herencia del ámbito MDX

• Validación de ortografía en inglés británico
• Diccionario personalizado para términos técnicos (Livepeer, Arbitrum, etc.)
• Excluye bloques de código y frontmatter

• Presencia de texto alternativo de imagen
• Completitud del frontmatter
• Validación de enlaces internos
• Validación de metadatos SEO

• Renderizado de la página en navegador sin interfaz
• Detección de errores de consola
• Pruebas de tema (claro/oscuro)
• Validación de contenido (H1, longitud del contenido)

​

Recursos

• Biblioteca de componentes - Referencia completa de componentes
• Mintlify Documentación - Documentación oficial de Mintlify
• Mintlify Guía de comportamiento - Posibles problemas con Mintlify
• Documentación de Git Hooks - Documentación completa del hook pre-commit
• style.css - Propiedades CSS globales para temas

​

Siguientes pasos

• Revisa la Biblioteca de Componentes para componentes disponibles
• Consulta Inventario de Fragmentos para todos los fragmentos disponibles
• Leer Mintlify Guía de comportamiento para obtener más información sobre posibles problemas
• Ver Contribuir a las documentaciones para conocer las directrices de contribución
• Instalar ganchos de Git: ./.githooks/install.sh