# Ln 114 Frontend Docs Creator

> Creates design_guidelines.md with WCAG 2.1 compliance and design system docs. Use when project has a frontend.

- Skill: `majiayu000/ln-114-frontend-docs-creator-5` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/ln-114-frontend-docs-creator-5`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ln-114-frontend-docs-creator-5/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- License: MIT
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/majiayu000/ln-114-frontend-docs-creator-5

---


> **Paths:** File paths (`shared/`, `references/`, `../ln-*`) are relative to skills repo root. If not found at CWD, locate this SKILL.md directory and go up one level for repo root. If `shared/` is missing, fetch files via WebFetch from `https://raw.githubusercontent.com/levnikolaevich/claude-code-skills/master/{path}`.

# Frontend Documentation Creator

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 }

## Documents Created (1, conditional)

| File | Condition | Questions | Auto-Discovery |
|------|-----------|-----------|----------------|
| docs/project/design_guidelines.md | hasFrontend | Q43-Q45 | Low |

## 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
   - 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)
3. Check WCAG 2.1 references
4. Check Maintenance section

### Phase 4: Return Status
```json
{
  "created": ["docs/project/design_guidelines.md"],
  "skipped": [],
  "tbd_count": 1,
  "validation": "OK"
}
```

## 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

### 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

## 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 to coordinator

## 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