Claude Code Plugins

Community-maintained marketplace

Feedback

ln-114-frontend-docs-creator

@levnikolaevich/claude-code-skills
11
0

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

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name ln-114-frontend-docs-creator
description Creates design_guidelines.md for frontend projects. L3 Worker invoked CONDITIONALLY when hasFrontend detected.

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

{
  "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