Frontend Documentation Creator Skill

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

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

Phase 2: Create Document

Check if file exists (idempotent)
If exists: skip with log
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

Check SCOPE tag
Validate sections:
- Design System (component library)
- Typography (font families, sizes)
- Colors (hex codes, semantic colors)
Check WCAG 2.1 references
Check Maintenance section

Phase 4: Return Status

{
  "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" 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
Status returned to coordinator

Reference Files

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

Agent Skills: Frontend Documentation Creator

Skill Files