OpenParable
Skip to content
← Back to skills

Ln 114 Frontend Docs Creator

Documents
ln-114-frontend-docs-creator

Ln 114 Frontend Docs Creator is an Agent Skill for documents published in the majiayu000/claude-skill-registry repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

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

View on GitHub ↗
QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

  1. Open your project in Codex.
  2. Copy and paste the prompt below.
  3. Review files and risks before approving any action.
Prompt to paste
Inspect the Agent Skill at https://github.com/majiayu000/claude-skill-registry/blob/HEAD/skills/design/ln-114-frontend-docs-creator-levnikolaevich-claude-code-skills/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/ln-114-frontend-docs-creator, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

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)

FileConditionQuestionsAuto-Discovery
docs/project/design_guidelines.mdhasFrontendQ43-Q45Low

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