local-visual-plan

Generates local Agent-Native visual implementation plans before code changes begin.

Updated Jun 28, 2026
One-click install
npx skills add https://github.com/AO-HyS/aohys.com --skill local-visual-plan-ao-hys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: local-visual-plan
Source: https://github.com/AO-HyS/aohys.com/tree/main/.agents/skills/local-visual-plan
Command: npx skills add https://github.com/AO-HyS/aohys.com --skill local-visual-plan-ao-hys

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @agent-native/core, and includes scripts (resource) components.

What problem does it solve? Risky implementation requests often go straight to code edits without a reviewable plan, leading to misaligned changes and rework. This Skill turns a request or existing text plan into a grounded, locally served visual implementation plan that acts as an approval gate before any code is edited. ## Core Features & Use Cases - Local Plan Workspace Setup: A bundled helper script scaffolds a plan workspace with a prompt, block catalog, and manifest, using either a temp directory or a durable repo folder. - Repo-Grounded Plan Authoring: The workflow requires inspecting real files, routes, schemas, and tests before writing plan.mdx, with optional canvas.mdx and prototype.mdx for UI flows. - Local Validation and Serving: Plans are checked and served locally via the Agent-Native CLI, producing a reviewable URL without GitHub Actions, API keys, or hosted publishing. - Use Case: Before refactoring a dashboard publish flow, invoke the skill to produce a visual plan covering affected files, API contracts, risks, and validation commands, then approve it in the browser before implementation starts. ## Quick Start Ask the assistant to use $local-visual-plan to create a local visual implementation plan for your proposed change before editing any code.

Frequently Asked Questions about local-visual-plan

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a visual implementation plan before editing code?▼

Invoke $local-visual-plan with a title and brief describing the change. The skill runs a helper script that scaffolds a local plan workspace, then authors plan.mdx grounded in your actual repo files and serves it locally for review.

How do I review an Agent-Native plan locally without publishing it?▼

Use local-files mode with the @agent-native/core CLI. After writing plan.mdx, run the generated check command, then the serve command with --dir and --kind plan --open to get a local URL without any hosted publishing.

Does this planning workflow require an OpenAI API key or GitHub Actions?▼

No. The skill is explicitly local-first: it does not set up GitHub Actions, does not require OPENAI_API_KEY, and does not publish to hosted Plans unless you explicitly ask. It only needs npx and the @agent-native/core package.

When should I add canvas.mdx or prototype.mdx to a plan?▼

Add canvas.mdx only when UI storyboards, screen flows, or wireframe review are central to the plan. Add prototype.mdx only when interactive behavior needs a lightweight prototype. Prose-only plans should stick to plan.mdx.

Can I store the plan in my repo instead of a temp directory?▼

Yes. Pass --local-dir to the prepare-plan.mjs helper, for example plans/short-plan-slug, to place the plan workspace in a durable repository folder instead of the default temp directory.