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.