Los archivos reales de instrucciones del sitio

Son ejemplos autorizados y fechados del árbol de trabajo real, revisados el 15-10-2026. La fuente permanece en inglés; las explicaciones se traducen. Las descargas conservan los bytes inspeccionados. Son instantáneas, sin sincronización automática con cambios posteriores; revisar diferencias cuando cambien instrucciones.

El responsable eligió presentar agent_instructions/SHAPE.md como ejemplo del proyecto. Su identidad/estatus como artefacto canónico protegido general sigue pendiente de confirmación. No se prescribe un nombre universal. Las instrucciones actualizadas aceptan mensajes, conversaciones y archivos sin especificación formal antes de programar. Exigen especificaciones vigentes completas mantenidas por el agente y ejecución de pruebas autorizada explícitamente por humanos. Las instantáneas reflejan estas instrucciones actualizadas.

Las reglas protegidas requieren decisión de sus responsables autorizados; el agente no puede relajarlas por comodidad. Markdown no garantiza inmutabilidad: importan permisos, límites de herramientas y revisiones. Confirmar propiedad desconocida con responsable del repositorio. Véanse modelo, repositorio real y práctica de especificaciones.

AGENTS.md · L1–L2 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

# AGENTS.md

Significado: Esta raíz real es más extensa que el ejemplo mínimo.

Motivo: No presentar un ejemplo simplificado como fuente real.

Ejemplo: Leer todas las instrucciones antes de editar.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L3–L16 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Core Principles
- At the beginning of each development session, read all Markdown (.md) files in agent_instructions/ to establish project standards and constraints.
- During implementation, consult relevant instruction files as needed.
- All applicable instructions remain binding.
- Work autonomously using approved technologies, libraries, components, and established patterns.
- Do not implement custom functionality when an approved solution already meets the requirement.
- Before introducing a new dependency, architectural pattern, or design-system component, evaluate existing alternatives and request user approval. 
- Prioritize long-term maintainability. 
- Favor clear, modular, reusable implementations and established patterns. 
- Avoid unnecessary complexity, duplication, and technical debt.
- Changes to approved technologies or architecture must include corresponding documentation updates.
- Maintain comprehensive, logically organized current-state specifications for all implemented functionality, including changes requested through prompts or conversations. Follow SHAPE.md.

Significado: Leer instrucciones, reutilizar soluciones, mantener claridad y pedir decisiones para dependencias, arquitectura o componentes nuevos. Las especificaciones vigentes abarcan todo comportamiento implementado, incluidas solicitudes por mensajes o conversaciones.

Motivo: La autonomía necesita límites y documentación actualizada.

Ejemplo: Reutilizar un componente; consultar antes de añadir un marco UI.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L17–L25 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Libraries & Frameworks
- **Do not reinvent the wheel.**
- Prefer existing approved libraries, frameworks, and reusable components over custom implementations.
- Before implementing non-trivial functionality, evaluate whether an existing approved solution meets the requirement.
- If an approved solution is suitable, use it.
- If no approved solution is suitable, the agent may implement straightforward functionality using the existing stack.
- Introducing a new dependency requires explicit human approval.
- Avoid unnecessary dependencies for functionality that can be implemented simply with existing project capabilities.

Significado: Evaluar bibliotecas aprobadas antes de crear alternativas; código simple con el stack actual es posible, dependencias nuevas necesitan aprobación explícita.

Motivo: Evitar capacidades duplicadas y carga de mantenimiento.

Ejemplo: Usar el parser YAML instalado.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L26–L34 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Code Structure & File Size
- **DRY** - Don't Repeat Yourself
- **Modularize aggressively.** Build reusable components and extract shared logic into separate files whenever possible.
- **File size rules:**
  - Target: **≤ 200 lines per file**
  - Hard limit: **350 lines maximum**
  - Exceeding 200 lines requires explicit justification through unavoidable constraints.
  (Exception are seed data files, i18n files, static HTML  and *.md files.)

Significado: Evitar duplicación, extraer lógica común, buscar 200 líneas y respetar el máximo de 350 con las excepciones indicadas.

Motivo: Archivos cohesivos facilitan revisión.

Ejemplo: Dividir un componente grande.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L35–L43 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Styling and UX
- Use token-driven styling (CSS variables) for colors, spacing, and typography.
- Ensure responsive layouts for mobile and desktop.
- Accessibility is required:
  - semantic structure
  - keyboard support
  - visible focus states
  - sufficient color contrast

Significado: Usar tokens, diseño adaptable, semántica, teclado, foco visible y contraste.

Motivo: La interfaz debe servir a distintos dispositivos y necesidades.

Ejemplo: Usar un token de foco en enlaces accesibles.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L44–L48 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## SEO and Content
- Define metadata per page.
- Keep heading hierarchy and link text meaningful.
- Tone must stay technical, credible, and business-focused.

Significado: Dar metadatos, encabezados/enlaces significativos y tono técnico empresarial.

Motivo: Lectores y buscadores necesitan contexto preciso.

Ejemplo: Traducir descripción y encabezado de la página.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L49–L56 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Preserve URLs and SEO Redirects
- Preserve existing public URLs when renaming, moving, or removing pages. Where necessary, implement permanent redirects (301 or 308) using mechanisms supported by the approved hosting and deployment architecture.
- Do not introduce unsupported runtime dependencies to implement redirects.
- Update internal links, canonical URLs, language alternates, and sitemap entries. Preserve query parameters where applicable. Never redirect unrelated or missing pages to the homepage.
- Before merging, audit route and slug changes against available Git history and existing redirects. Verify HTTP status codes, redirect destinations, and query parameter preservation. Prevent redirect loops and chains.
- If the approved architecture cannot support a required redirect, explain the limitation and request a human decision rather than silently breaking the existing URL.
- If no relevant replacement exists, obtain approval for an intentional page retirement (404 or 410). Never silently break an existing public URL.

Significado: Mantener rutas o redirecciones permanentes compatibles; revisar historial, enlaces, metadatos, sitemap, consultas y bucles; acordar retiradas o limitaciones.

Motivo: Los enlaces publicados son un compromiso.

Ejemplo: Añadir una ruta hija sin renombrar una existente.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L57–L64 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Architecture & Separation of Concerns
- Enforce **clear separation of concerns** between:
  - Domain logic
  - Application logic
  - Infrastructure
  - UI
- Cross-layer coupling is discouraged and must be explicitly justified.

Significado: Separar dominio, aplicación, infraestructura e interfaz; justificar acoplamientos.

Motivo: Los límites aclaran efectos de cambios.

Ejemplo: Mantener lectura YAML en servidor.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L65–L82 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Front-End & Back-End Components
- Components must be canonical and reusable.
- Variants must be explicitly named, finite, and justified by a genuine functional or design requirement. 
- Do not introduce new variants when an existing one meets the need.

### UI Components (Critical)
- UI components (e.g. buttons, cards, headlines) must be **singular, reusable, and canonical**.
- Prefer existing, named component variants and design tokens.
- Reuse established components and styles wherever possible.
- Specifications may introduce local layout variations or component-specific styling without requiring prior approval.
- When a variation is likely to be reused, extend the existing component or propose an addition to the design system.
- Example (button):
  - Sizes: `small | medium | large`
  - Styles: `default | positive | warning`
- Inline styles are **forbidden**.
- Styles must be applied **only via named CSS classes, design tokens, or a theme system**.
- Request approval before introducing material changes to the shared design system, not for routine local styling decisions.

Significado: Reutilizar componentes, variantes finitas justificadas y tokens; sin estilos inline; ajustes locales permitidos, cambios compartidos importantes requieren aprobación.

Motivo: Evitar copias divergentes del mismo control.

Ejemplo: Usar la variante secundaria existente.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L83–L88 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Theming & Style Swappability
- All styling **must be theme-driven and fully swappable**.
- The application must support changing the entire visual appearance (e.g. green theme → red theme) **by swapping stylesheets, themes, or token definitions only**.
- No component may depend on hard-coded colors, fonts, spacing, or visual values.
- All visual properties must be derived from **design tokens or a centralized theming system**.

Significado: Derivar valores visuales de tokens o un tema central, sin constantes visuales locales.

Motivo: Cambiar tema debe cambiar toda la apariencia.

Ejemplo: Leer colores y espacios de variables CSS.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L89–L97 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Accessibility (a11y)
- Accessibility is **mandatory**, not optional.
- UI components must support:
  - Keyboard navigation
  - Focus management
  - Screen-reader compatibility
  - Sufficient color contrast
- Accessibility requirements apply to all variants of a component.

Significado: Asegurar teclado, gestión de foco, lectores de pantalla y contraste suficiente para cada variante.

Motivo: La accesibilidad no es un modo opcional.

Ejemplo: Restaurar foco al cerrar el menú móvil.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L98–L100 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Testing
+- Follow SHAPE.md for specification-driven test creation, maintenance, regression protection, and human-controlled execution.

Significado: Seguir SHAPE para cobertura proporcional derivada de requisitos, protección de regresiones y ejecución controlada explícitamente por humanos; declarar verificación pendiente.

Motivo: La accesibilidad no es un modo opcional.

Ejemplo: Restaurar foco al cerrar el menú móvil.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L101–L112 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Internationalization (i18n)

- **Required languages:** All user-facing content must support English (`en`), German (`de`), and Spanish (`es`) from the start.
- **No hardcoded content:** All user-facing text, including headings, paragraphs, navigation, buttons, metadata, accessibility labels, alt text, validation messages, and errors, must be stored in localized YAML files.
- **Markdown support:** Long-form content may use Markdown within designated YAML fields. Do not embed JSX, executable application code, CSS, or presentation logic in content files.
- **Complete translations:** All three languages must be provided for every implemented feature or page. Missing translations are not acceptable; never silently fall back to another language.
- **Consistent structure:** Maintain matching keys, section identifiers, data structures, and placeholders across all supported languages.
- **Shared components:** Reuse the same components and layouts across languages. Do not create language-specific component implementations or embed translation objects and language-dependent text conditions in UI code.
- **Translation maintenance:** Update all supported languages whenever user-facing content changes. Validate translation completeness and consistency before considering the work complete.
- **Architecture compliance:** Follow `ARCHITECTURE.md` for YAML content organization, Markdown rendering, translation loading, and localized routing.

Significado: Guardar textos en YAML EN/DE/ES equivalentes; Markdown sin ejecución y layouts compartidos; validar paridad sin fallback silencioso.

Motivo: Ningún idioma debe recibir interfaz incompleta o ajena.

Ejemplo: Traducir metadatos y etiquetas accesibles junto al artículo.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L113–L121 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Security
- **Never store sensitive information in files.**
- This includes (but is not limited to):
  - Passwords
  - API keys
  - Tokens
  - Secrets
  - License keys

Significado: No guardar contraseñas, claves, tokens, secretos o licencias en archivos.

Motivo: Publicación y versionado pueden exponer credenciales.

Ejemplo: Publicar ejemplos sin credenciales del entorno.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L122–L125 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## Documentation Discipline
- Project documentation must remain **synchronized with implementation**.
- Outdated documentation is considered a defect.

Significado: Mantener documentación con implementación; lo obsoleto es un defecto.

Motivo: Los agentes posteriores dependen del contexto duradero.

Ejemplo: Actualizar requisitos al cambiar comportamiento.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

AGENTS.md · L126–L143 · 2026-10-15 · SHA-256: 934bc8e84ae1373ec2f962587c967cbf7a161309945f067ba6ef0942fce7bc2a

Fuente literal en inglés:

## AGENTS.md Governance (Strict)
- **The agent is forbidden from editing `AGENTS.md` autonomously.**
- `AGENTS.md` may only be modified **upon explicit user instruction**.
- If the agent wishes to propose changes:
  - They must write them to **`agents.extensions.md`**
  - No automatic merging or implicit updates are allowed.

  ## Quality Gate
- Before merge:
  - lint passes
  - type-check passes
  - build passes
  - dictionary checks pass (`pnpm run test:i18n`)
- Keep files modular and readable; split large components early.

Significado: No editar AGENTS.md autónomamente: requiere instrucción explícita; propuestas en agents.extensions.md. Antes de merge se exigen lint, tipos, build e i18n.

Motivo: El agente no puede relajar sus propias reglas.

Ejemplo: Conservar la raíz al publicar una copia fechada.

Autoridad y modificación: Reglas del proyecto web. Editar el AGENTS.md real exige instrucción explícita según su gobierno; propuestas en agents.extensions.md. No es inventario raíz universal de SHAPE.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/STACK.md · L1–L5 · 2026-10-15 · SHA-256: 27e47c46eb07b0f5748438b242396b4f683bbfafce9f902c30bc634e222d984d

Fuente literal en inglés:

# STACK.md

- `STACK.md` defines the approved technology stack for the project.

Significado: Define tecnologías del sitio, no de todo SHAPE.

Motivo: Las decisiones necesitan referencia.

Ejemplo: Leer antes de elegir un renderizador.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/STACK.md · L6–L13 · 2026-10-15 · SHA-256: 27e47c46eb07b0f5748438b242396b4f683bbfafce9f902c30bc634e222d984d

Fuente literal en inglés:

## Purpose and versioning

Approved technology stack for the **SHAPE Framework documentation website**. This is a simple, content-first, multilingual site.

- Select recent compatible **stable** releases when implementation begins.
- Record exact dependency versions in `package.json` and the chosen lockfile, not in this document.
- Update this file whenever an approved technology choice changes.

Significado: Elegir versiones estables compatibles, registrar exactas en manifiesto/lockfile y documentar cambios.

Motivo: Reproducibilidad difiere de una lista narrativa.

Ejemplo: Actualizar lockfile tras un cambio autorizado.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/STACK.md · L14–L21 · 2026-10-15 · SHA-256: 27e47c46eb07b0f5748438b242396b4f683bbfafce9f902c30bc634e222d984d

Fuente literal en inglés:

## Core stack

- **Next.js** with the **App Router**
- **React**
- **TypeScript**, with strict type checking
- Node.js LTS for development, build, and production runtime
- Package manager: **pnpm** (single lockfile)

Significado: Usar Next.js App Router, React, TypeScript estricto, Node LTS y pnpm con un lockfile.

Motivo: Un ecosistema aprobado limita alternativas accidentales.

Ejemplo: Añadir página tipada de servidor.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/STACK.md · L22–L31 · 2026-10-15 · SHA-256: 27e47c46eb07b0f5748438b242396b4f683bbfafce9f902c30bc634e222d984d

Fuente literal en inglés:

## Rendering and Deployment

- **Next.js App Router** with Node.js runtime deployment.
- Prefer static prerendering for pages whose content is available at build time.
- Use React Server Components by default; Client Components only where browser interactions are necessary.
- Generate supported localized routes at build time using `generateStaticParams`.
- Production deployment targets **Namecheap shared hosting using cPanel's Node.js application environment**.
- No standalone API backend, database, or persistent application sessions are required.
- The application must be compatible with the Node.js startup mechanism supported by Namecheap/cPanel.

Significado: Prerenderizar rutas locales, preferir componentes servidor y arranque Node cPanel; no se requiere backend o base aparte.

Motivo: Debe encajar con el alojamiento aprobado.

Ejemplo: Generar rutas localizadas al compilar.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/STACK.md · L32–L54 · 2026-10-15 · SHA-256: 27e47c46eb07b0f5748438b242396b4f683bbfafce9f902c30bc634e222d984d

Fuente literal en inglés:

## Styling and icons

- **CSS Modules** for component-level styles.
- **Global CSS custom properties** as design tokens for color, type, spacing and layout.
- Responsive, accessible layouts with semantic HTML.
- **Phosphor Icons, React package: `@phosphor-icons/react`.**
- **Default icon style: `weight="duotone"`** for consistent two-tone iconography.
- In Next.js Server Components, import the SSR-safe icons from **`@phosphor-icons/react/ssr`**.
- In Client Components, use the standard React package where needed.
- Import named icons individually; avoid wildcard imports and unnecessary icon-library wrappers.
- Use the icon's `currentColor`/CSS-based styling where possible. Decorative icons should not receive redundant accessibility labels; meaningful icons need localized accessible text.
- No Tailwind CSS or other component framework by default. Introduce only with a specific, approved reason.

Example usage:

```tsx
import { BookOpenIcon } from '@phosphor-icons/react/ssr';

export function SectionIcon() {
  return <BookOpenIcon weight="duotone" size={28} aria-hidden="true" />;
}
```

Significado: Usar CSS Modules/tokens, HTML semántico adaptable e imports Phosphor duotono, seguros para SSR en servidor; no añadir marcos sin motivo aprobado.

Motivo: Estilos e imports consistentes evitan fallos.

Ejemplo: Reutilizar CSS e iconos SSR.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/STACK.md · L55–L66 · 2026-10-15 · SHA-256: 27e47c46eb07b0f5748438b242396b4f683bbfafce9f902c30bc634e222d984d

Fuente literal en inglés:

## Content and Framework Documentation

- **YAML (`.yaml`)** for localized page content, metadata, headings, labels, and structured content sections.
- **Markdown** within designated YAML fields for long-form text, including headings, paragraphs, lists, links, tables, and code examples.
- **React** for content rendering and presentation.
- **TypeScript** for application logic and typed content models.
- No MDX or executable JSX within content files.
- No CMS, database, editorial API, or remote content-fetching dependency in the initial version.
- Diagrams are optimized static assets with editable, version-controlled sources.
- **Mermaid** for source-controlled technical diagrams, including workflows, architecture, and process diagrams.
- Render diagrams as static SVG assets at build time.

Significado: Prosa YAML/Markdown, presentación React y lógica TypeScript; sin MDX/CMS ni contenido editorial remoto en ejecución. Mermaid genera recursos estáticos.

Motivo: El contenido no debe ejecutar código.

Ejemplo: Publicar instrucciones en bloques Markdown.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/STACK.md · L67–L81 · 2026-10-15 · SHA-256: 27e47c46eb07b0f5748438b242396b4f683bbfafce9f902c30bc634e222d984d

Fuente literal en inglés:

## Internationalization

- Supported locales: **`en`, `es`, `de`**.
- Translation structure: **`i18n/<locale>/<page>.yaml`**, supporting nested directories for nested pages.
- **`i18n/<locale>/common.yaml`** contains shared interface text.
- All page-specific copy and SEO metadata, including long-form sections, belong in the page's own YAML file.
- **`i18n/config.ts`**: Locale types, default language, canonical route IDs, and URL helpers.
- **`i18n/dictionaries.ts`**: Typed, server-only content registry and loader.
- All supported languages share the same React rendering components and structured-content schema.
- Default English URLs are unprefixed (e.g., `/organization`); localized counterparts use `/es/organization` and `/de/organization`.
- Explicit route mapping and statically generated localized pages; no middleware-based locale detection.
- Language switcher, localized page metadata, canonical URLs, `hreflang` alternates, and multilingual sitemap.
- No automatic English fallback for missing translations; incomplete content must fail validation.
- No dedicated runtime i18n framework initially.

Significado: Paridad EN/DE/ES, inglés sin prefijo, rutas explícitas, metadatos locales y sin fallback; diccionarios solo servidor.

Motivo: Idioma es contenido, no tres implementaciones.

Ejemplo: Usar el mismo componente traducido.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/STACK.md · L82–L92 · 2026-10-15 · SHA-256: 27e47c46eb07b0f5748438b242396b4f683bbfafce9f902c30bc634e222d984d

Fuente literal en inglés:

## Testing and developer tooling

- **ESLint** — Linting and static code analysis.
- **Prettier** — Code formatting.
- **TypeScript (strict mode)** — Static type checking.
- **Vitest** — Unit and component testing.
- **React Testing Library** — React component testing.
- **Playwright** — Browser-based functional, end-to-end, and visual regression testing.
- **Node.js scripts** — Localization and route-integrity validation.
- Required release checks: lint, typecheck, i18n validation and static production build.

Significado: ESLint, Prettier, TypeScript, Vitest, Testing Library, Playwright y Node tienen funciones locales; lint/tipos/i18n/build son controles.

Motivo: Una lista no demuestra independencia ni aceptación.

Ejemplo: Ejecutar solo comprobaciones autorizadas.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/STACK.md · L93–L100 · 2026-10-15 · SHA-256: 27e47c46eb07b0f5748438b242396b4f683bbfafce9f902c30bc634e222d984d

Fuente literal en inglés:

## Hosting

- **Primary hosting target:** Namecheap shared hosting with cPanel Node.js application support.
- Run the Next.js application using the hosting environment's supported Node.js startup configuration.
- Serve prerendered pages where possible.
- Use the configured public site origin for canonical URLs and sitemap generation.
- Do not introduce hosting-specific application services unless required.

Significado: Usar inicio Node Namecheap/cPanel, prerenderizado y origen público configurado sin servicios extra.

Motivo: Los metadatos deben coincidir con publicación.

Ejemplo: Dar origen HTTPS durante el build.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/STACK.md · L101–L108 · 2026-10-15 · SHA-256: 27e47c46eb07b0f5748438b242396b4f683bbfafce9f902c30bc634e222d984d

Fuente literal en inglés:

## Explicitly out of scope

- Databases and ORMs.
- Authentication, user accounts and session management.
- API servers, contact form submission services and transactional email.
- External CMS or remote editorial storage.
- Audience-specific duplicate content trees (leaders/business/technical) in the initial version.
- Production operational tooling unrelated to hosting the website.

Significado: No introducir bases, cuentas, API, CMS, transacciones o herramientas ajenas para documentación.

Motivo: Los límites evitan desviaciones arquitectónicas.

Ejemplo: Mantener ejemplos como contenido, no cuentas reales.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/STACK.md · L109–L123 · 2026-10-15 · SHA-256: 27e47c46eb07b0f5748438b242396b4f683bbfafce9f902c30bc634e222d984d

Fuente literal en inglés:

## Approved content pipeline and runtime decisions

The user approved these supporting libraries for the website implementation:

- `yaml`: parse local localized content files.
- `react-markdown` and `remark-gfm`: safe Markdown rendering, including tables.
- `rehype-highlight` and `highlight.js`: syntax highlighting in documentation examples.
- `@mermaid-js/mermaid-cli`: generate static SVG diagrams during the build.
- `tsx`: execute typed build and content-validation scripts.

Use **Node.js 24 LTS** for development, builds, and production to satisfy the installed toolchain's engine requirements. Exact compatible versions are recorded in `package.json` and `pnpm-lock.yaml`. ESLint 9 and TypeScript 6 are selected for compatibility with the Next.js ESLint plugins (which do not yet declare support for ESLint 10/TypeScript 7); exact versions remain in the manifest.

Use system sans-serif and monospace fonts through design tokens; no external font dependency is required. The reusable primitives listed in `DESIGN.md` are implemented locally with the approved React/CSS stack. The Namecheap/cPanel startup adapter is `server.js`; deployment preparation is documented in `docs/DEPLOYMENT.md`.

Use `next.config.mjs` with JSDoc typing for the Next.js configuration. Loading production configuration must not require SWC/native compiler bindings or runtime TypeScript transpilation. The application remains TypeScript; this configuration-file format avoids the GLIBC compatibility failure observed on the Namecheap account without adding dependencies or changing the runtime architecture.

Significado: Usar bibliotecas aprobadas YAML/Markdown/resaltado/Mermaid/tsx, Node 24, herramientas compatibles, fuentes de sistema y configuración JavaScript.

Motivo: GLIBC de cPanel impide compilación nativa en ejecución.

Ejemplo: Compilar localmente y cargar next.config.mjs directamente.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/ARCHITECTURE.md · L1–L2 · 2026-10-15 · SHA-256: 78ce22152688fb56538059c24b945dd7879ab40978ea0e7b0a425a733cf893e7

Fuente literal en inglés:

## Internationalization (i18n) Architecture

Significado: El encabezado declara el primer asunto; es diseño local, no estructura universal.

Motivo: La primera línea explica propósito.

Ejemplo: Encontrar aquí las reglas de carga local.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/ARCHITECTURE.md · L3–L32 · 2026-10-15 · SHA-256: 78ce22152688fb56538059c24b945dd7879ab40978ea0e7b0a425a733cf893e7

Fuente literal en inglés:

### Translation File Structure

Store all localized content in the `i18n/` directory, organized first by language and then by page or feature.

```text
i18n/
├── config.ts
├── dictionaries.ts
├── en/
│   ├── common.yaml
│   ├── home.yaml
│   ├── about.yaml
│   └── guides/
│       └── example.yaml
├── de/
│   ├── common.yaml
│   ├── home.yaml
│   ├── about.yaml
│   └── guides/
│       └── example.yaml
└── es/
    ├── common.yaml
    ├── home.yaml
    ├── about.yaml
    └── guides/
        └── example.yaml
```

The page and folder names above are illustrative. Actual files must match the application's pages and features.

Significado: Usar i18n/ por idioma y YAML común/página/función; los nombres del ejemplo son ilustrativos.

Motivo: La estructura no es inventario obligatorio.

Ejemplo: Añadir archivos equivalentes anidados por idioma.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/ARCHITECTURE.md · L33–L41 · 2026-10-15 · SHA-256: 78ce22152688fb56538059c24b945dd7879ab40978ea0e7b0a425a733cf893e7

Fuente literal en inglés:

### Translation Organization

- **Page files:** Each page has a corresponding YAML file containing its localized content, including long-form text, headings, metadata, labels, image descriptions, and captions.
- **Shared text:** `common.yaml` contains genuinely shared interface content, such as navigation labels, footer text, and reusable messages.
- **Reusable features:** Features with their own localized content may have dedicated YAML files.
- **Nested pages:** Nested routes may use matching subfolders.
- **Language parity:** All language directories must have corresponding files with matching keys, section identifiers, and data structures.
- **Shared identifiers:** Route identifiers, asset paths, technical identifiers, and other nontranslated data remain independent of language files.

Significado: Textos/metadatos por página, textos realmente comunes compartidos, claves/estructuras iguales e identificadores técnicos aparte.

Motivo: Duplicación y carencias producen divergencia.

Ejemplo: Traducir prosa conservando rutas exactas.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/ARCHITECTURE.md · L42–L50 · 2026-10-15 · SHA-256: 78ce22152688fb56538059c24b945dd7879ab40978ea0e7b0a425a733cf893e7

Fuente literal en inglés:

### Translation Loading

- `i18n/config.ts` defines supported locales, the default locale, and localized URL helpers.
- `i18n/dictionaries.ts` provides typed, server-only YAML loading.
- YAML content is parsed and validated against shared TypeScript content schemas at build time.
- Server Components load the required page and shared content.
- Client Components receive only the localized strings they need, rather than importing complete dictionaries.
- Shared React components render content for all languages.

Significado: Ayudantes y cargadores YAML validan esquemas en build; servidor carga diccionarios y envía solo textos necesarios.

Motivo: Archivos y diccionarios grandes no van al navegador.

Ejemplo: Usar el cargador getPage existente.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/ARCHITECTURE.md · L51–L60 · 2026-10-15 · SHA-256: 78ce22152688fb56538059c24b945dd7879ab40978ea0e7b0a425a733cf893e7

Fuente literal en inglés:

### Content Rendering

- Designated YAML fields may contain Markdown-formatted text.
- A shared Markdown renderer converts these fields into React elements.
- Structured YAML sections may reference approved component types, such as articles, diagrams, and callouts.
- Section ordering is determined by the YAML content.
- Reusable React components control presentation, styling, and behavior.
- Content files contain no executable application code, JSX, CSS, or presentation logic.
- Raw HTML embedded in Markdown is not rendered.

Significado: Markdown compartido con orden por contenido, sin JSX/CSS/lógica ejecutable ni HTML crudo.

Motivo: El contenido no debe abrir ejecución.

Ejemplo: Citar instrucciones como código, no ejecutar JSX.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/ARCHITECTURE.md · L61–L70 · 2026-10-15 · SHA-256: 78ce22152688fb56538059c24b945dd7879ab40978ea0e7b0a425a733cf893e7

Fuente literal en inglés:

### Localized Routing

- English is the default language and uses unprefixed URLs, such as `/about`.
- German uses `/de/`, such as `/de/about`.
- Spanish uses `/es/`, such as `/es/about`.
- Localized pages share the same underlying rendering components.
- Each localized page provides appropriate metadata, canonical URLs, and `hreflang` alternates.
- Language switching preserves the equivalent page whenever possible.
- Sitemaps include all published language variants.

Significado: Inglés sin prefijo, alemán /de y español /es, renderizado común, cambios equivalentes y metadatos/sitemap completos.

Motivo: La traducción preserva identidad y descubrimiento.

Ejemplo: Enlazar recorrido alemán con equivalente español.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/ARCHITECTURE.md · L71–L88 · 2026-10-15 · SHA-256: 78ce22152688fb56538059c24b945dd7879ab40978ea0e7b0a425a733cf893e7

Fuente literal en inglés:

## Website implementation boundaries

- `domain/`: page-content contracts, validation, canonical route inventory, and related-page relationships. No UI or filesystem imports.
- `infrastructure/`: server-only filesystem access and YAML parsing. Public content requests must match a canonical route and supported locale.
- `application/`: localized navigation and metadata assembly using the domain and content loaders.
- `i18n/`: shared locale/URL helpers, server content loader, and localized YAML files.
- `components/`: shared presentation. Small Client Components handle disclosure keyboard support, language-link context, copy controls, and localized recovery UI.
- `app/(english)/`, `app/(german)/de/`, and `app/(spanish)/es/`: thin explicit locale route adapters. Each has a static locale root layout and optional catch-all page; all three use the same `SiteDocument`, `WebsitePage`, metadata assembly, and recovery components. This keeps the document language fixed for each locale while generating all 111 known pages. No language-specific UI implementation or middleware locale detection is used.
- `app/sitemap.ts` and `app/robots.ts`: generated discovery endpoints, using the configured build-time public origin.
- `styles/tokens.css`: central theme. CSS Modules consume tokens. Breakpoint thresholds are named in the design implementation documentation; native media queries use literal thresholds because CSS custom properties cannot be used in media conditions.
- `diagrams/` and `public/diagrams/`: editable Mermaid sources and generated SVGs. Build colors derive from theme tokens and are converted to inherited CSS variables in the inline assets. Generated inline SVG style attributes are normalized into classes.
- `specifications/current/`: maintained current-state website requirements, separate from the preserved human-authored specification under `specifications/`.

All known pages are generated at build time. A minimal CommonJS startup adapter delegates requests to Next.js under cPanel Passenger; no domain or product behavior is implemented in that adapter. Local YAML content is the only content source, and filesystem access never enters Client Components. `SITE_URL` is a public build configuration value; the real production origin must be supplied before building for publication.

The Next.js configuration is `next.config.mjs`, a directly executable ECMAScript module with JSDoc typing. Production startup does not transpile a TypeScript configuration or load native compiler bindings. This keeps the prebuilt runtime compatible with the hosting account's older GLIBC while preserving the existing configuration settings; native build tooling remains a local build concern.

Significado: Respetar capas, adaptadores de idioma, tokens, rutas y recursos estáticos; nunca archivos en cliente. Las 111 páginas citadas son una instantánea, no límite del marco.

Motivo: Ampliar arquitectura existente sin sistemas paralelos.

Ejemplo: Registrar ruta hija y cargar YAML en servidor.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/ARCHITECTURE.md · L89–L93 · 2026-10-15 · SHA-256: 78ce22152688fb56538059c24b945dd7879ab40978ea0e7b0a425a733cf893e7

Fuente literal en inglés:

## HTTP recovery documents

The build renders three small standalone recovery documents with React DOM from the same localized YAML and theme tokens. `routing-manifest.json` is generated from the canonical route registry and public assets. The cPanel startup adapter delegates known URLs and Next.js assets to Next.js; `infrastructure/recovery.cjs` returns a generated localized document with HTTP 404 for unknown GET/HEAD requests. This avoids a Next.js 16 initial-error-document limitation where the localized not-found UI is otherwise delivered only through hydration. No new public content route, redirect, dependency, or product business rule is introduced. Framework-level not-found boundaries remain available during development and internal client navigation.

The recovery renderer is a standalone HTML artifact, so native `<head>` and stylesheet links are intentional; Next.js document lint rules are disabled only for that renderer. It requires no JavaScript and is served with a restrictive Content Security Policy. Known asset/page routing remains owned by Next.js. The generated manifest prevents a separately maintained route inventory in the startup adapter.

Significado: Generar documentos 404 locales sin scripts desde YAML/tokens y usar manifiesto; conservar límites del framework para desarrollo/navegación cliente.

Motivo: URL desconocidas necesitan estado y recuperación útiles.

Ejemplo: Añadir rutas al manifiesto generado, no lista manual.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/DESIGN.md · L1–L8 · 2026-10-15 · SHA-256: 5b7895bc23fb75686f80083d628fbf3d75bbefb234198915ab5156fbb1092cae

Fuente literal en inglés:

# DESIGN.md
- describes site wide design directions and inspiration

Status: Proposed visual direction (not pixel-exact reverse engineering)
References: 
- https://meeko-template.framer.website/
- https://meeko-template.framer.website/blog/design-choices-that-age-well-and-the-ones-you-will-regret-later

Significado: Declara inspiración del sitio, no mandato empresarial.

Motivo: Los ejemplos deben conservar su estatus.

Ejemplo: Usar la referencia como inspiración, no como material propio.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/DESIGN.md · L9–L11 · 2026-10-15 · SHA-256: 5b7895bc23fb75686f80083d628fbf3d75bbefb234198915ab5156fbb1092cae

Fuente literal en inglés:

## Design goal
Build an original, accessible, responsive website for SHAPE (Spec-driven, Human-led, Agentic, Product, Engineering). Take inspiration from Meeko's pastel editorial aesthetic, bold typography, thin borders, generous whitespace, rounded cards, and friendly but restrained details. Do not copy the template's copyrighted images, text, illustrations, brand, or exact layout.

Significado: Crear sitio original adaptable inspirado en patrones editoriales; no copiar imágenes, textos, marca ni layout exacto.

Motivo: Inspiración no permite reproducir recursos.

Ejemplo: Usar ideas generales con contenido original.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/DESIGN.md · L12–L14 · 2026-10-15 · SHA-256: 5b7895bc23fb75686f80083d628fbf3d75bbefb234198915ab5156fbb1092cae

Fuente literal en inglés:

## Character
Clear, approachable, confident, contemporary, precise. Visual warmth on overview pages; increasing information density and restraint on technical documentation pages. Avoid generic dark AI gradients, neon, glassmorphism, and gratuitous animations.

Significado: Mantener claridad, calidez y precisión; documentación sobria sin efectos gratuitos.

Motivo: Los lectores necesitan sustancia y legibilidad.

Ejemplo: Usar presentación clara existente.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/DESIGN.md · L15–L34 · 2026-10-15 · SHA-256: 5b7895bc23fb75686f80083d628fbf3d75bbefb234198915ab5156fbb1092cae

Fuente literal en inglés:

## Proposed design tokens (starting values; not measured from Meeko)
- `--color-background: #F0EFFF` (soft lavender)
- `--color-surface: #FFFFFF`
- `--color-surface-subtle: #FAFAFF`
- `--color-text: #161616`
- `--color-text-muted: #555563`
- `--color-border: #292929`
- `--color-accent-lavender: #DAD8FF`
- `--color-accent-pink: #F8DCE8`
- `--color-accent-yellow: #FBE59B`
- `--color-accent-blue: #DBEFFB`
- `--color-focus: #3448BC`
- `--radius-card: 20px`
- `--radius-button: 999px`
- `--border-thin: 1px solid var(--color-border)`
- `--container-width: 1200px`
- `--content-width: 760px`

Colors are approximate design proposals, not extracted site values. Confirm with screenshot comparisons before locking tokens.

Significado: Tratar colores, anchos y radios como propuestas centrales que deben confirmarse.

Motivo: Constantes locales impiden cambiar tema.

Ejemplo: Usar token en vez de duplicar hexadecimal.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/DESIGN.md · L35–L42 · 2026-10-15 · SHA-256: 5b7895bc23fb75686f80083d628fbf3d75bbefb234198915ab5156fbb1092cae

Fuente literal en inglés:

## Typography
- Use a licensed, readily available geometric/grotesk sans-serif such as `Manrope`, with `Inter` as a body alternative and system sans fallback.
- Hero: `clamp(3rem, 6vw, 5.5rem)`, weight 700–800, line-height 1.03–1.1, slight negative letter spacing.
- H1 interior page: `clamp(2.5rem, 4vw, 4.5rem)`, weight 700–800.
- H2: `clamp(2rem, 3vw, 3rem)`; H3: `1.4–1.8rem`.
- Body: 16–18px, line-height 1.6–1.75; technical prose width around 65–75 characters.
- Avoid tiny gray text; honor WCAG contrast requirements.

Significado: Usar títulos/texto/código legibles adaptables y fuentes licenciadas; el stack luego elige fuentes de sistema.

Motivo: Leer propuestas junto a tecnología aprobada.

Ejemplo: Conservar tipografía por tokens sin dependencias nuevas.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/DESIGN.md · L43–L50 · 2026-10-15 · SHA-256: 5b7895bc23fb75686f80083d628fbf3d75bbefb234198915ab5156fbb1092cae

Fuente literal en inglés:

## Layout
- Desktop site container around 1200px, with fluid side padding `clamp(20px, 4vw, 64px)`.
- Hero: large expressive heading, brief supporting statement, restrained supporting diagrams/graphics.
- Navigation: simple rounded white bar with subtle dark outline, clear active state, responsive mobile menu.
- Section gaps: generally 80–128px desktop and 48–72px mobile.
- Use cards to organize concepts; avoid cardifying every paragraph.
- Prefer asymmetrical editorial compositions for marketing pages, regular readable grids for docs.

Significado: Usar contenedores fluidos, ancho legible, espacio y tarjetas sobrias sin encerrar cada párrafo.

Motivo: La estructura sirve al contenido.

Ejemplo: Poner referencias en el flujo de artículo existente.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/DESIGN.md · L51–L62 · 2026-10-15 · SHA-256: 5b7895bc23fb75686f80083d628fbf3d75bbefb234198915ab5156fbb1092cae

Fuente literal en inglés:

## Components
- `SiteHeader`: rounded white navigation, accessible keyboard states.
- `PrimaryButton`: high-contrast pill button; `SecondaryButton`: white pill with thin dark outline.
- `ConceptCard`: white surface, thin outline, 16–24px radius, generous internal padding, optional pastel accent.
- `SectionHeading`: strong title, compact introduction, optional eyebrow.
- `ProcessStep`: numbered stage with connectors; readable in vertical mobile view.
- `DiagramPanel`: neutral framed canvas with consistent typography and clear connectors.
- `Callout`: restrained accent tint, border, icon, clear semantic purpose.
- `ArticleLayout`: narrow reading column, headings with anchors, code blocks, tables, optional TOC.
- `CodeBlock`: accessible contrast, copy button, horizontal overflow handling, syntax highlighting.
- `Tabs`, `Accordion`: accessible and keyboard-operable; only use when information architecture warrants them.

Significado: Usar navegación, botones, tarjetas, títulos, procesos, diagramas y artículos/código compartidos; pestañas solo con motivo.

Motivo: Un vocabulario limita divergencia.

Ejemplo: Reutilizar el bloque de código canónico.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/DESIGN.md · L63–L70 · 2026-10-15 · SHA-256: 5b7895bc23fb75686f80083d628fbf3d75bbefb234198915ab5156fbb1092cae

Fuente literal en inglés:

## SHAPE-specific pages
- Home: strong value proposition; 5 SHAPE principles as a visual system; links into Organization, Process, Artifacts, Practitioner Guides.
- Philosophy: editorial narrative, concept callouts, few decorations.
- Organization: pod/team model diagrams and responsibility cards.
- Process: numbered, connected steps with inputs, outputs, review checkpoints.
- Artifacts / repository structure: file-tree visualizations, copyable examples, precise tables.
- Practitioner guides: documentation-first layout, TOC, code and examples; white/light surfaces dominate.

Significado: Las páginas generales introducen conceptos; las referencias priorizan procedimientos, archivos y navegación.

Motivo: Densidad distinta no necesita otro diseño.

Ejemplo: Usar extractos y tabla de contenidos.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/DESIGN.md · L71–L76 · 2026-10-15 · SHA-256: 5b7895bc23fb75686f80083d628fbf3d75bbefb234198915ab5156fbb1092cae

Fuente literal en inglés:

## Interaction and motion
- Use subtle 150–250ms transitions for hover/focus, gentle scroll reveals only where meaningful.
- Honor `prefers-reduced-motion`.
- Do not gate important content behind animations, hover, or carousels.
- Ensure mobile navigation, all links and controls, forms, and accordion elements have keyboard and touch support.

Significado: Transiciones sutiles, movimiento reducido, contenido no exclusivo de hover y operación táctil/teclado.

Motivo: La animación no debe bloquear información.

Ejemplo: Mostrar directivas sin requerir animación.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/DESIGN.md · L77–L83 · 2026-10-15 · SHA-256: 5b7895bc23fb75686f80083d628fbf3d75bbefb234198915ab5156fbb1092cae

Fuente literal en inglés:

## Accessibility and responsiveness
- Aim at WCAG 2.2 AA contrast and interaction requirements.
- Responsive at common mobile, tablet, desktop widths; no horizontal scrolling.
- Maintain minimum comfortable 44x44px interactive targets where feasible.
- Distinguish headings semantically and maintain visible focus outlines.
- Test diagrams and wide technical tables on small screens.

Significado: Buscar WCAG 2.2 AA, títulos/foco/contraste y objetivos cómodos sin desbordar, incluidas tablas.

Motivo: Las referencias necesitan acceso móvil y asistivo.

Ejemplo: Mantener código ancho en su contenedor desplazable.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/DESIGN.md · L84–L92 · 2026-10-15 · SHA-256: 5b7895bc23fb75686f80083d628fbf3d75bbefb234198915ab5156fbb1092cae

Fuente literal en inglés:

## Implementation instructions for coding agent
1. Inspect the Meeko reference URL visually if browser access is available. Capture desktop and mobile screenshots of the homepage and representative interior pages; identify patterns, not source assets to reuse.
2. Implement design tokens centrally using CSS variables or the existing project's token mechanism. Do not hardcode one-off colors and spacing in page components.
3. Build a small library of reusable site components before expanding pages.
4. Implement the SHAPE content architecture rather than copying the portfolio template's page structure.
5. Compare the rendered homepage to the reference for overall feeling, spacing, typography, border treatments, and density. Refine design tokens and reusable components once.
6. Apply the same design system consistently to all new pages. Technical documentation should remain more restrained than the homepage.
7. Do not introduce third-party graphics, fonts, or illustrations without confirming license/usage rights.

Significado: Inspeccionar referencias con autorización, centralizar tokens, reutilizar primitivas, comparar resultados y confirmar derechos.

Motivo: El proceso debe producir presentación original mantenible.

Ejemplo: Ampliar el artículo en vez de clonar una plantilla.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/DESIGN.md · L93–L99 · 2026-10-15 · SHA-256: 5b7895bc23fb75686f80083d628fbf3d75bbefb234198915ab5156fbb1092cae

Fuente literal en inglés:

## Acceptance criteria
- Recognizably inspired by the reference's light pastel editorial aesthetic, without being a clone.
- One global token source for color, type, radii, spacing and content widths.
- Distinct and consistent reusable cards, navigation, buttons, callouts and diagrams.
- Responsive on mobile, tablet and desktop; no layout overflows.
- Technical content is readable, navigable and copyable.
- Accessible keyboard focus, sufficient contrast and reduced-motion behavior.

Significado: Evaluar originalidad, tokens únicos, patrones, adaptación, lectura/copia y accesibilidad.

Motivo: Pruebas funcionales no equivalen a aceptación visual.

Ejemplo: Solicitar revisión humana y declarar comprobaciones reales.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/OBJECTIVES.md · L1–L2 · 2026-10-15 · SHA-256: f89fb98ce58fd71fdf2ec4c6a2ab0a6de1b12fccfcf5f99c089708330099bcd3

Fuente literal en inglés:

# OBJECTIVES.md — SHAPE Framework Website

Significado: La apertura nombra objetivos; su sección de autoridad niega carácter normativo.

Motivo: Contexto útil no es automáticamente reglamento.

Ejemplo: Entender público antes de elegir ejemplos.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/OBJECTIVES.md · L3–L10 · 2026-10-15 · SHA-256: f89fb98ce58fd71fdf2ec4c6a2ab0a6de1b12fccfcf5f99c089708330099bcd3

Fuente literal en inglés:

## Purpose and Authority

This document provides business context to help coding agents make better decisions. It describes the product's purpose, objectives, audience, and desired outcomes.

**This is not an authoritative instruction file.** It does not define mandatory requirements, override specifications, or authorize changes to product scope.

Agents should use this context to inform their judgment when multiple valid implementation options exist.

Significado: Usar contexto para elegir opciones válidas; no supera especificaciones ni autoriza alcance.

Motivo: Objetivos orientan sin otorgar permisos.

Ejemplo: No crear cuentas solo por objetivos de adopción.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/OBJECTIVES.md · L11–L20 · 2026-10-15 · SHA-256: f89fb98ce58fd71fdf2ec4c6a2ab0a6de1b12fccfcf5f99c089708330099bcd3

Fuente literal en inglés:

## Product Vision

Establish SHAPE as a credible, practical, and accessible framework for enterprise agentic product engineering.

**SHAPE** stands for **Spec-driven, Human-led, Agentic Product Engineering**.

The framework enables organizations to develop software **at the speed of thought**, combining AI-assisted implementation with human accountability, architectural discipline, enterprise governance, and long-term product ownership.

The website should become the primary public resource for understanding, adopting, and applying SHAPE.

Significado: Explicar SHAPE como marco empresarial creíble con rapidez, responsabilidad y gobierno.

Motivo: Evitar promesas sin fundamento.

Ejemplo: Describir convenciones reales, no multiplicadores.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/OBJECTIVES.md · L21–L31 · 2026-10-15 · SHA-256: f89fb98ce58fd71fdf2ec4c6a2ab0a6de1b12fccfcf5f99c089708330099bcd3

Fuente literal en inglés:

## Target Audience

The website serves four primary audiences:

- **Enterprise technology leaders:** Evaluating agentic development for organizational productivity, governance, and engineering effectiveness.
- **Product managers and business analysts:** Translating business requirements into specifications and working with coding agents.
- **Architects and engineering leaders:** Establishing approved architectures, technologies, reusable components, and secure development environments.
- **Product Engineers:** Implementing, maintaining, and evolving applications through specification-driven agentic development.

The initial website serves all audiences through one unified information architecture.

Significado: Servir a líderes, responsables de producto, arquitectos y Product Engineers en una arquitectura.

Motivo: Los ejemplos conectan visión y técnica.

Ejemplo: Enlazar inicio a conceptos e instrucciones reales.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/OBJECTIVES.md · L32–L39 · 2026-10-15 · SHA-256: f89fb98ce58fd71fdf2ec4c6a2ab0a6de1b12fccfcf5f99c089708330099bcd3

Fuente literal en inglés:

## Business Objectives

1. **Explain the framework:** Clearly communicate SHAPE's philosophy, organizational model, development process, and differentiators.
2. **Enable adoption:** Provide practical guides, examples, diagrams, and reusable templates that help organizations implement SHAPE.
3. **Establish credibility:** Demonstrate that agentic development can operate within enterprise engineering standards and governance.
4. **Provide a lasting reference:** Maintain a coherent, accessible body of framework knowledge that can evolve over time.
5. **Demonstrate SHAPE in practice:** Develop the website itself according to SHAPE principles.

Significado: Explicar adopción, práctica, credibilidad, referencia y sitio como demostración.

Motivo: Un marco necesita ejemplos utilizables.

Ejemplo: Publicar recorrido verificado del repositorio.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/OBJECTIVES.md · L40–L55 · 2026-10-15 · SHA-256: f89fb98ce58fd71fdf2ec4c6a2ab0a6de1b12fccfcf5f99c089708330099bcd3

Fuente literal en inglés:

## Product Positioning

SHAPE is an **enterprise product engineering framework**, not a coding agent, programming language, or software development platform.

Its defining concepts include:

- Human authority over product intent, material decisions, and acceptance.
- Specifications driving both implementation and verification.
- Incremental development that preserves approved functionality.
- Enterprise-approved architecture, execution environments, libraries, and components.
- Small, AI-enabled teams with clearly defined responsibilities.
- Architects establishing technical foundations and supporting significant decisions.
- Product Engineers maintaining enduring ownership of their applications.

The website should emphasize practical engineering improvements rather than AI hype or unsupported productivity claims.

Significado: Modelo operativo, no plataforma, con autoridad humana, especificaciones, recursos y propiedad limitada.

Motivo: Las afirmaciones deben ser prácticas.

Ejemplo: No presentar el stack local como universal.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/OBJECTIVES.md · L56–L71 · 2026-10-15 · SHA-256: f89fb98ce58fd71fdf2ec4c6a2ab0a6de1b12fccfcf5f99c089708330099bcd3

Fuente literal en inglés:

## Content and User Experience

The website should make complex engineering concepts understandable without oversimplifying them.

Its principal content areas are:

- **Philosophy:** Why SHAPE exists and its guiding principles.
- **Organization:** Roles, responsibilities, and the team operating model.
- **Process:** The development lifecycle from discovery and specification through user acceptance.
- **Artifacts:** Framework instructions, specifications, standards, and repository structures.
- **Practitioner Guides:** Practical instructions, examples, and reusable templates.

Visitors should be able to move naturally from high-level explanations to detailed guidance.

The experience should be modern, approachable, technically credible, readable, accessible, and consistent across English, German, and Spanish.

Significado: Conectar filosofía, organización, proceso, artefactos y guías con navegación legible multilingüe.

Motivo: La complejidad debe entenderse.

Ejemplo: Usar artículos compartidos traducidos.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/OBJECTIVES.md · L72–L82 · 2026-10-15 · SHA-256: f89fb98ce58fd71fdf2ec4c6a2ab0a6de1b12fccfcf5f99c089708330099bcd3

Fuente literal en inglés:

## Success Criteria

The website succeeds when:

- New visitors can quickly understand what SHAPE is and why it matters.
- Different audiences can find information relevant to their responsibilities.
- Practitioners can use the content to begin applying the framework.
- Explanations, diagrams, and examples remain internally consistent.
- Content can be expanded and maintained without unnecessary complexity.
- The website's development demonstrates SHAPE's own engineering principles.

Significado: Facilitar comprensión, responsabilidades, aplicación y conocimiento ampliable coherente.

Motivo: Son objetivos, no resultados medidos inventados.

Ejemplo: Describir ejemplos sin métricas de adopción ficticias.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/OBJECTIVES.md · L83–L90 · 2026-10-15 · SHA-256: f89fb98ce58fd71fdf2ec4c6a2ab0a6de1b12fccfcf5f99c089708330099bcd3

Fuente literal en inglés:

## Scope Boundaries

The initial product is a **public framework documentation and adoption resource**.

It is not intended to provide a hosted coding-agent platform, project management application, user accounts, commercial transactions, or community forum.

Future capabilities may be considered separately.

Significado: Mantener documentación/adopción pública, no plataforma de agentes, comercio, cuentas o comunidad.

Motivo: El alcance evita infraestructura innecesaria.

Ejemplo: Usar ejemplos descargables, no cuentas.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real

agent_instructions/OBJECTIVES.md · L91–L101 · 2026-10-15 · SHA-256: f89fb98ce58fd71fdf2ec4c6a2ab0a6de1b12fccfcf5f99c089708330099bcd3

Fuente literal en inglés:

## Decision Guidance

When specifications allow multiple valid solutions, favor:

- Clarity over complexity.
- Practical guidance over abstract theory.
- Consistency over novelty.
- Substance over marketing.
- Maintainability over shortcuts.
- Flexibility over unnecessary bureaucracy.

**Specifications define what to build. These objectives provide the business context to help make better decisions.**

Significado: Preferir claridad, práctica, coherencia, sustancia, mantenimiento y flexibilidad proporcional dentro de requisitos.

Motivo: Objetivos apoyan criterio, no amplían autoridad.

Ejemplo: Elegir el sistema de contenido existente.

Autoridad y modificación: Instrucción/contexto local, no nombre o tecnología universal. Confirmar responsable autorizado antes de modificar la fuente controlada. OBJECTIVES.md es contexto descriptivo; DESIGN.md incluye propuestas.

Material relacionado: Recorrido del repositorio · Práctica de especificaciones · Descargar instantánea real