# Ln 114 Frontend Docs Creator

> Creates design_guidelines.md for frontend projects. L3 Worker invoked CONDITIONALLY when hasFrontend detected.

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

---


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

## Definition of Done
- Condition checked (hasFrontend)
- Document created if applicable
- Design system, typography, colors documented
- WCAG references included
- Status returned to coordinator

## Reference Files
- Templates: `references/templates/design_guidelines_template.md`
- Questions: `references/questions_frontend.md` (Q43-Q45)

---
**Version:** 1.0.0
**Last Updated:** 2025-12-19