搵技能.../

Producing Visual Docs | Skills Pool

技能檔案

Producing Visual Docs

Produces user-facing and developer-facing documentation with Playwright visual capture, coverage maps, and appdocs viewers. Use when building or updating user/dev docs, visual QA assets, or documentation sites.

pelchers0 星標2026年3月6日

職業
分類: 技術文檔

技能內容

Creates and maintains user + developer documentation with visual capture support.

Quick Start

Ensure .appdocs/user and .appdocs/developer exist.
Add coverage map + tester checklist.
Run Playwright visual capture suite to generate screenshots.
Update user and developer guides.
Verify index.html viewers load and render markdown.

Required Outputs

.appdocs/user/coverage-map.md
.appdocs/user/tester-checklist.md
.appdocs/user/user-guide.md
.appdocs/user/testing-guide.md
.appdocs/user/visual-capture-report.md
.appdocs/user/screenshots/*.png
.appdocs/user/index.html
.appdocs/developer/visual-qa-guide.md
.appdocs/developer/README.md
.appdocs/developer/index.html
.appdocs/developer/run-guide.md
.appdocs/developer/convex-ops.md
.appdocs/developer/content-workflows.md
.appdocs/developer/moderation-admin.md
.appdocs/developer/markdown-guide.md

相關技能

快速安裝

Producing Visual Docs

npx skills add pelchers/MockTrialGame

下載 Skill 打開源碼倉庫

作者: pelchers
星標: 0
更新時間: 2026年3月6日
職業

本頁內容

Playwright Capture

Add or update tests/visual-capture.spec.ts.
Use consistent screenshot naming aligned with the coverage map.
Keep viewport at 1440x900 for consistency.

Depth Requirement

Expand docs beyond summaries: include flows, fields, edge cases, and expected outcomes.
Ensure user docs are readable by non-technical readers and explain the why behind each step.
Ensure developer docs contain exact commands, environment variables, and operational steps.
Add explainers for architecture splits (frontend vs backend, Convex app vs infrastructure).
Add markdown quick reference docs for users and developers.

ADR Orchestration

Use the session folder:

.adr/orchestration/3_SITE_VISUAL_DOCS_FOR_USERS/primary_task_list.md
.adr/current/3_SITE_VISUAL_DOCS_FOR_USERS/phase_N.md
.adr/history/3_SITE_VISUAL_DOCS_FOR_USERS/phase_N.md
.adr/history/3_SITE_VISUAL_DOCS_FOR_USERS/phase_N_review.md

Templates

Use the templates in resources/templates/ to seed new docs:

coverage-map.md
tester-checklist.md
user-guide.md
testing-guide.md
visual-capture-report.md
developer-visual-qa-guide.md
user-docs-index.html
developer-docs-index.html

02

Required Outputs

03Playwright Capture

04Depth Requirement

05ADR Orchestration

軟件開發人員

My Workflow

Guides users through creating effective Agent Skills. Use when you want to create, write, or author a new skill, or asks about skill structure, best practices, or SKILL.md format.

Create Instructions

Create an instructions file (.instructions.md) for a project rule or convention.

microsoft184.0k

自動化工具

Init

Generate or update chat customization files for AI coding agents

microsoft184.0k

Everything Claude Code Conventions

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

Codebase Onboarding

分析一个陌生的代码库，并生成一个结构化的入门指南，包括架构图、关键入口点、规范和一个起始的CLAUDE.md文件。适用于加入新项目或首次在代码仓库中设置Claude Code时。

Ui Demo

Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.

軟件開發人員