feature-docs

name	feature-docs
description	Create feature documentation pages with screenshots for AgentOp. Use when documenting a new feature, taking app screenshots, writing feature descriptions, or updating the features table in the README. Triggers on feature doc, screenshot, feature page, document feature, docs/features.

Feature Documentation

Create feature documentation pages with screenshots for the AgentOp project.

When to Use This Skill

• Documenting a new feature with a screenshot
• Taking a screenshot of the running Electron app
• Writing a feature description page
• Adding a feature entry to the README

CRITICAL: Required Process

You MUST follow these steps in exact order. Do NOT skip or reorder any step.

The user will get the app into the desired visual state and tell you the feature name. Only then do you proceed.

Step 1 — Capture Screenshot

The user has the app running and showing the feature. Capture the app window:

# Interactive window capture — user clicks the AgentOp window
screencapture -w docs/images/{feature-name}.png

• Use kebab-case for the filename matching the feature name
• Save to docs/images/
• The -w flag lets the user click the target window
• Wait for confirmation that the screenshot was saved successfully

Step 2 — Read Code to Understand the Feature

This step is NOT optional. You MUST read the actual source code before writing any description.

Search the codebase to find the components, hooks, IPC handlers, state atoms, and backend logic related to the feature. Read them thoroughly.

Where to look:

Layer	Path	What to look for
UI Components	apps/electron/src/renderer/components/	React components rendering the feature
Hooks	apps/electron/src/renderer/hooks/	Data fetching, state management for the feature
State	apps/electron/src/renderer/state/	Jotai atoms related to the feature
IPC Handlers	apps/electron/src/main/ipc/	Backend handlers the feature calls
Agent Logic	apps/electron/src/main/agent/	Orchestrator, planner, session logic
Shared Logic	packages/shared/src/	Database schema, business logic
Core Types	packages/core/src/types.ts	Type definitions for the feature's domain

Do NOT proceed to Step 3 until you have read enough code to genuinely understand what the feature does, how the user interacts with it, and what happens behind the scenes.

Step 3 — Write Feature Documentation

Create docs/features/{feature-name}.md with this format:

# {Feature Title}

![{Feature Title}](../images/{feature-name}.png)

{10-15 sentence description}

Description guidelines:

• Write 10-15 sentences explaining the feature
• Ground the description in what you learned from reading the code — do not guess or paraphrase the feature name
• Explain what the feature does, how the user interacts with it, and why it matters
• Keep it concise and user-facing — no technical implementation details (no code, no component names, no database schemas)
• Write in present tense, addressing the reader as "you"
• Organize into 3-4 natural paragraphs

Step 4 — Link from Root README

Add a row to the Features table in README.md:

| [Feature Title](docs/features/{feature-name}.md) | One-line description |

The table is located in the ## Features section. Add the new row at the end of the existing table.

Existing Features for Reference

These feature pages already exist under docs/features/:

File	Screenshot
dual-layer-interface.md	default.png
goal-creation.md	create-new-goal.png
goal-planning.md	goal-planning.png
goal-summary.md	goal-summary.png
context-sharing.md	goal-context-sharing-between-tasks.png
task-details.md	task-details.png
task-clarification-context.md	task-details-with-clarification-context.png
task-clarification.md	task-clarification.png
task-summary.md	task-summary.png

Checklist

Before marking the task complete, verify:

• Screenshot saved to docs/images/{feature-name}.png
• Source code was read to understand the feature (not skipped)
• docs/features/{feature-name}.md created with screenshot and 10-15 sentence description
• Row added to Features table in root README.md