视觉画布设计
canvas-design
基于设计原则创作静态视觉作品,用于海报与品牌图形。
docs-writer【文档与办公】Write developer docs: README content, API references, code comments, changelog entries. Use when "write docs", "document this API", or "explain for contributors". README visuals → enhance-readme. Co-authored specs → docs-coauthor.
独立 GitHub 快照 · 自动分类 · 以原作者文档为准
Degree of freedom: MIXED. Voice and structure [HIGH freedom];
pre-documentation checks and the verification statement
[LOW freedom — run exactly].
Create clear, useful documentation for developers.
Write in plain language. Follow references/plain-language-ste.md: short active sentences, one instruction per sentence, one meaning per word, and no AI tells. It also has a Vale prose-lint recipe to keep the docs that way.
Documentation rarely fails because it's incomplete. It fails because the reader can't build a mental model fast enough to care. So before any reference detail, answer the questions the reader is silently asking — in their words, in this order:
| The reader is silently asking… | Answer it with… |
|---|---|
| What is this? | One plain-English sentence — what it does, not how it's built |
| Why should I care? | The problem it solves / the pain it removes |
| Who is it for? | The audience + stack, so a wrong-fit reader can leave early |
| How do I start? | The shortest path to a first win: install → one command → result |
| When / where do I use it? | The situations it fits — and its boundaries (what it's not) |
Rules that follow from this:
Everything else in this skill (templates, API docs, comments) serves this principle — structure and polish never substitute for orienting the reader first.
Observe: "document createUser";
src/users.tsiscreateUser({ email, role }) → Promise<User>; README linksdocs/api.mdwith signature tables. Interpret: the reader needs the signature, errors, and a copy-paste call — not another project README. Classify: API reference in the existing table pattern. Write only after: "Pre-documentation check: existing docs read: README.md, docs/api.md; pattern: signature tables; code verified: src/users.ts"
enhance-readme; docs/code drift plan → plan-docs-sync; long-form collab → docs-coauthorBefore writing any documentation:
README.md (project root)
docs/ (existing docs)
src/[domain]/@_[domain]-README.md (feature-specific READMEs)
Use Glob to find existing README files:
Glob: "**/*README.md" to find all READMEs
Glob: "**/*.md" in docs/ to find documentation patterns
Read the actual code being documented to ensure accuracy:
Before writing docs, state:
"Pre-documentation check:
- Existing docs read: [list]
- Documentation pattern identified: [pattern from existing READMEs]
- Code verified: [files read to ensure accuracy]"
Full template: references/templates.md §README Template.
When a project introduces its own concepts, the reader can't parse the feature list until they know the vocabulary. Add a compact building-blocks glossary high in the README — plain meaning + how the reader actually uses each thing. This is the single highest-leverage block for making docs land with non-experts:
**The building blocks** — what the terms below actually mean:
| Building block | In plain English | You use it by… |
|:--|:--|:--|
| **Widget** | A self-contained unit that does one job | dropping it into a page |
| **Pipeline** | The path your data takes from input to output | pointing it at a source |
| **Adapter** | A connector to an outside service | adding its key to config |
Guidelines:
useState for a React audience; do gloss a term you invented.Per function: one-line purpose → ### Signature → ### Parameters table (Name / Type / Required / Description) → ### Returns → ### Example → ### Errors table (Error / Cause).
Template: references/templates.md §API Documentation.
JSDoc on public functions: purpose, @param with units or format (e.g. "decimal, 0.1 for 10%"), @returns with unit, @example. Inline comments say why a step exists, not what the line does.
Example: references/templates.md §Code Comments.
# Architecture Overview → ## System Components (ASCII or Mermaid diagram) → ## Data Flow (numbered steps) → ## Key Decisions ("Why X?" with 2–3 reasons each).
Template: references/templates.md §Architecture Documentation.
# ❌ Too verbose
This function is responsible for taking an array of user objects
and filtering them based on the active status property, returning
only those users who have an active status of true.
# ✅ Concise
Filter users by active status.
# ❌ Abstract description
The function accepts configuration options.
# ✅ With example
Configure the logger:
\`\`\`typescript
const logger = createLogger({
level: 'info',
format: 'json',
output: 'stdout'
});
\`\`\`
Format by content shape: a list, table, or numbered steps when the content is multifaceted (options, parameters, an ordered setup); prose when it is one idea. Headings only where a reader would scan for them.
Wall-of-text vs numbered-steps example: references/templates.md §Structured setup steps.
# ❌ Assumes the reader shares your context
Configure the RLS policy on the tenant-scoped RPC before hydrating the store.
# ✅ Plain first, precise second
Set who's allowed to read each row (a "policy") before the app loads its data.
(Supabase calls row rules "RLS"; loading data into the app is "hydrating the store.")
Lead with the plain-language version; put the precise term in parentheses or right after it. Never make a newcomer look up three words just to parse one sentence.
\`\`\`mermaid
flowchart LR
A[User] --> B[Frontend]
B --> C[API]
C --> D[Database]
C --> E[Cache]
\`\`\`
\`\`\`mermaid
sequenceDiagram
User->>+API: POST /login
API->>+DB: Verify credentials
DB-->>-API: User data
API-->>-User: JWT token
\`\`\`
# In PR template:
## Documentation
- [ ] README updated (if needed)
- [ ] API docs updated (if endpoints changed)
- [ ] Code comments added (for complex logic)