plan-ui

Generates structured UI implementation plans with file placements, patterns, and test impact analysis.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/muselesscreator/ui-skills --skill plan-ui-muselesscreator
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: plan-ui
Source: https://github.com/muselesscreator/ui-skills/tree/main/plan-ui
Command: npx skills add https://github.com/muselesscreator/ui-skills --skill plan-ui-muselesscreator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Before writing UI code, developers need to decide which files a change touches, which existing patterns to follow, and which tests will break. Doing this ad hoc produces inconsistent plans and missed test impact. This Skill turns a UI task description into a concrete, reviewable implementation plan. ## Core Features & Use Cases - Context-Aware Planning: Loads a prior task-analysis artifact, repo learnings, and resolved decision memos so the plan reflects settled decisions instead of re-deriving them. - Test Impact Analysis: Runs an affected-test finder and delegates test-file reading to a sub-agent, summarizing which unit and E2E tests break and what new coverage is needed. - Plan Publication: Writes the plan to a timestamped markdown file, persists the planned file list for downstream scope checks, and renders an HTML plan artifact from a fixed template. - Use Case: Before implementing a new dashboard widget, run the planner to get the exact files to create and modify, the design-system pattern to follow, the tests that will break, and a list of open questions to resolve before coding starts. ## Quick Start Ask the assistant to plan a UI feature before implementing it, for example: plan this feature — add a filter bar to the deck list view.

Frequently Asked Questions about plan-ui

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

FAQPage Schema
How do I plan a UI feature before writing code?

Invoke the planner with a description of the UI task. It reads the task-analysis artifact, relevant existing code, and affected tests, then outputs an implementation plan listing files to create and modify, patterns to follow, and open questions to resolve first.

How do I find which tests are affected by a code change?

The planner runs an affected-test finder script on the planned file paths, which reports direct and indirect unit and E2E tests. A read-only sub-agent then summarizes which existing tests would break and what new coverage is needed.

Does the planner decide CSS and markup details?

No. Presentation-layer decisions such as semantic element choice, CSS approach, and className composition are deliberately deferred to the implementation pass. The plan only names the design-system or styling pattern to follow and its reference file.

What happens to open questions in the implementation plan?

Each open question is listed inline in the final summary and persisted as a decision memo. When the user answers in chat, the answer is recorded immediately via the decision script and folded into the plan, so implementation is never blocked on an already-answered question.

Can the planner run without a prior task analysis?

Yes. If no analysis artifact exists, it invokes the task analyzer or gathers context inline from repo learnings, the branch diff, and TypeScript and ESLint configs, noting that it ran standalone.