name: documentation-creator
description: |
Generate or update comprehensive web documentation for any project. Use for: creating documentation, updating existing docs, generating guides, documenting features with element-specific screenshots.
Triggers: créer une documentation, génère une doc, générer documentation, create docs, generate documentation, document project, write docs, update docs, mettre à jour la doc, documenter le projet.
Supports WordPress plugins, Next.js, PHP, HTML/CSS/JS, Vue.js, monorepos. Uses Playwright Python for element-specific screenshots.

Documentation Creator

Generate or update web documentation adapted to the project's technology stack.

UI Flow Discovery Workflow

IMPORTANT: Use the Playwright session script (capture_session.py) for ALL screenshots. Do NOT use the agent's built-in browser tool.

Overview

The recommended workflow for capturing documentation screenshots:

1. Explore - Browse the UI to discover feature flows
2. Analyze - Identify forms, navigation, modals, interactive elements
3. Collect Inputs - Ask user for required values (credentials, test data)
4. Generate Plan - Create screenshot_plan.json
5. Execute - Run capture_session.py --plan

Phase 1: Project Context (Optional)

Run detect_project_type.py to understand project structure:

python scripts/detect_project_type.py /path/to/project --json

This provides hints about admin URLs and feature locations.

Phase 2: Interactive Flow Discovery

Use capture_session.py interactively to explore the UI:

python scripts/capture_session.py

Discovery commands:

{"cmd": "navigate", "url": "http://localhost/app"}
{"cmd": "get_page_info"}
{"cmd": "get_forms"}
{"cmd": "get_navigation"}
{"cmd": "get_modals"}

Exploration loop:

1. Navigate to entry point
2. Use get_navigation to find menu items and action buttons
3. Click through to each feature page
4. Use get_forms to identify input fields
5. Use get_modals after clicking buttons that trigger dialogs
6. Document each flow with its steps and required inputs

Phase 3: Collect Required Values

After identifying flows, ask the user:

I've identified the following UI flows that need documentation:

1. Login Flow - Requires: username, password
2. Create Widget Flow - Requires: widget_name, widget_type (dropdown)
3. Settings Page - No inputs required

Please provide the test values for each flow.

Phase 4: Generate Capture Plan

Create screenshot_plan.json with all commands:

[
  { "cmd": "navigate", "url": "http://localhost/login" },
  { "cmd": "fill", "selector": "#username", "value": "admin" },
  { "cmd": "fill", "selector": "#password", "value": "secret" },
  { "cmd": "click", "selector": "#submit" },
  { "cmd": "wait", "selector": ".dashboard" },
  {
    "cmd": "screenshot",
    "output": "./docs/images/dashboard.png",
    "selector": ".main-content"
  }
]

Phase 5: Execute Plan

python scripts/capture_session.py --plan /tmp/screenshot_plan.json

Commands Reference

Quick Start

Create New Documentation

1. Detect project type: python scripts/detect_project_type.py /path/to/project
2. Explore UI flows: Use interactive session with discovery commands
3. Collect user inputs: Ask for credentials and test data
4. Generate plan: Create screenshot_plan.json
5. Execute: python scripts/capture_session.py --plan /tmp/screenshot_plan.json

Reference Files

• references/project_types.md - Detection patterns
• references/documentation_structure.md - Content templates
• references/frameworks.md - Framework-specific guides
• references/ui_flow_analysis.md - UI flow discovery patterns