ln-114-frontend-docs-creator

• 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
• Never gathers context itself; uses coordinator input

• ln-110-project-docs-coordinator: CONDITIONALLY invoked when:

- hasFrontend=true (react, vue, angular, svelte detected)

• Never called directly by users

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 }

| File | Condition | Questions | Auto-Discovery |

|------|-----------|-----------|----------------|

| docs/project/design_guidelines.md | hasFrontend | Q43-Q45 | Low |

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

- Populate design system section

- Mark [TBD: X] for missing data

Phase 3: Self-Validate

1. Check SCOPE tag
2. Validate sections:

- Design System (component library)

- Typography (font families, sizes)

- Colors (hex codes, semantic colors)

1. Check WCAG 2.1 references
2. Check Maintenance section

Phase 4: Return Status

```json

{

"created": ["docs/project/design_guidelines.md"],

"skipped": [],

"tbd_count": 1,

"validation": "OK"

}

```

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

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](link)" 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

• Condition checked (hasFrontend)
• Document created if applicable
• Design system, typography, colors documented
• WCAG references included
• Status returned to coordinator

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

---

Version: 1.1.0 (Added NO_CODE, Stack Adaptation, Format Priority rules)

Last Updated: 2025-01-12