Paths: File paths (references/, ../ln-*) are relative to this skill directory.

Frontend Documentation Creator

Type: L3 Worker

L3 Worker that creates design_guidelines.md. CONDITIONAL - only invoked when project has frontend.

Purpose & Scope

• Creates design_guidelines.md (if hasFrontend)
• Receives Context Store from ln-110-project-docs-coordinator
• WCAG 2.1 Level AA accessibility compliance
• Design system documentation
• Downstream consumers: design_guidelines.md is loaded by ln-401 (Frontend Guard) and ln-402 (Frontend Review Checks) for runtime design validation against implementation
• Never gathers context itself; uses coordinator input

Invocation (who/when)

• ln-110-project-docs-coordinator: CONDITIONALLY invoked when:
• hasFrontend=true (react, vue, angular, svelte detected)
• Never called directly by users

Inputs

From coordinator:

• contextStore: Context Store with frontend-specific data
• DESIGN_SYSTEM (Material-UI, Ant Design, custom)
• COLOR_PALETTE (primary, secondary, accent)
• TYPOGRAPHY (font families, sizes, weights)
• COMPONENT_LIBRARY (detected components)
• targetDir: Project root directory
• flags: { hasFrontend }

MANDATORY READ: Load references/docs_quality_contract.md, and references/markdown_read_protocol.md. Optional rule catalog: load references/docs_quality_rules.json only when exact rule IDs, path matrices, or allowlisted placeholder exceptions are needed.

Documents Created (1, conditional)

Workflow

Phase 1: Check Conditions

1. Parse flags from coordinator
2. If !hasFrontend: return early with empty result

Phase 2: Create Document

1. Check if file exists (idempotent)
2. If exists: skip with log
3. If not exists:

• Copy template
• Replace placeholders with Context Store values
• Preserve the shared opening contract and standard top sections from the template
• Populate design system section
• Never leave template markers in published frontend docs
• If data is missing: omit the claim or use a concise neutral fallback, but do NOT emit [TBD: ...]

Phase 3: Self-Validate

1. Check SCOPE tag and metadata markers
2. Check required top sections (Quick Navigation, Agent Entry, Maintenance)
3. Validate sections:

• Design System (component library)
• Typography (font families, sizes)
• Colors (hex codes, semantic colors)

1. Check WCAG 2.1 references
2. Check docs-quality contract compliance (no forbidden placeholders, no leaked template metadata, valid doc kind/role)

Phase 4: Return Status

{
  "created_files": ["docs/project/design_guidelines.md"],
  "skipped_files": [],
  "quality_inputs": {
    "doc_paths": ["docs/project/design_guidelines.md"],
    "owners": {
      "docs/project/design_guidelines.md": "ln-114-frontend-docs-creator"
    }
  },
  "validation_status": "passed"
}

Critical Notes

Core Rules

• Conditional: Skip entirely if no frontend detected
• WCAG compliance: Document must reference accessibility standards
• Design tokens: Extract from CSS variables, tailwind config, or theme files
• Idempotent: Never overwrite existing files
• Publishable output: No [TBD: ...], TODO, or leaked template metadata in frontend docs

NO_CODE_EXAMPLES Rule (MANDATORY)

Design guidelines document visual standards, NOT code:

• FORBIDDEN: CSS code blocks, component implementations
• ALLOWED: Tables (colors, typography), design tokens, Figma links
• INSTEAD OF CODE: "See Component Library" or "See src/components/Button.tsx"

Stack Adaptation Rule (MANDATORY)

• Link to correct component library docs (MUI for React, Vuetify for Vue)
• Reference framework-specific patterns (React hooks, Vue composition API)
• Never mix stack references (no React examples in Vue project)

Format Priority (MANDATORY)

Tables (colors, typography, spacing) > Lists (component inventory) > Text

Runtime Summary Artifact

MANDATORY READ: Load references/docs_generation_summary_contract.md

Accept optional summaryArtifactPath.

Summary kind:

• docs-generation

Required payload semantics:

• worker = "ln-114"
• status
• created_files
• skipped_files
• quality_inputs
• validation_status
• warnings

Write the summary to the provided artifact path or return the same envelope in structured output.

Definition of Done

• [ ] Condition checked (hasFrontend)
• [ ] Document created if applicable
• [ ] Design system, typography, colors documented
• [ ] WCAG references included
• [ ] Actuality verified: all document facts match current code (paths, functions, APIs, configs exist and are accurate)
• [ ] Status returned

Reference Files

• Templates: references/templates/design_guidelines_template.md
• Questions: references/questions_frontend.md (Q43-Q45)

Version: 1.1.0 Last Updated: 2025-01-12