skills.rest
jsalio
jsalioCOMMUNITY
Explore all skills by this author →
GitHub

tdd-plan-ui

Generate structured test plans for frontend UI components.

Updated Jul 3, 2026
Search Tags:#tdd#test automation#frontend development#ui testing#test planning
One-click install
npx skills add https://github.com/jsalio/My-sdd-flow --skill tdd-plan-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tdd-plan-ui
Source: https://github.com/jsalio/My-sdd-flow/tree/main/tdd-plan-ui
Command: npx skills add https://github.com/jsalio/My-sdd-flow --skill tdd-plan-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating comprehensive test plans for frontend UI components, ensuring that all critical aspects are covered before development begins.

Core Features & Use Cases

  • Smart/Dumb Component Classification: Identifies components as Smart (container) or Dumb (presentational) for targeted testing.
  • Visual State Mapping: Covers essential states like loading, error, empty, and success.
  • User Interaction Tests: Ensures interactions are tested effectively.
  • Integration with Backend: Integrates with backend test plans for a seamless testing experience.
  • Use Case: Ideal for projects where UI components require rigorous testing and a structured test plan is essential.

Quick Start

Generate a test plan for your UI components using /tdd-plan-ui.

Frequently Asked Questions about tdd-plan-ui

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

FAQPage Schema
How do I create a structured test plan for frontend UI components?▼

A structured UI test plan is generated by classifying components into smart or dumb patterns, mapping visual states like loading and error, and defining user interaction tests before development begins.

What is the smart/dumb component pattern in UI testing?▼

The smart/dumb component pattern in UI testing separates container components managing state from presentational components rendering UI, enabling targeted test strategies for each functional type.

Does this UI test planning approach work with React, Vue, and Angular?▼

Yes, this UI test planning approach is completely agnostic to frontend frameworks like React, Vue, and Angular, allowing you to generate framework-independent structured test plans for any project.

How do I map visual states like loading, error, and empty for UI testing?▼

You map visual states for UI testing by generating a test plan that explicitly covers essential component conditions including loading, error, empty, and success states to ensure complete frontend coverage.

Can I integrate frontend UI test plans with backend test pipelines?▼

Yes, you can integrate frontend UI test plans with backend test pipelines for a seamless testing experience, although the generator also operates independently if you only need UI-only specifications.

When should I write a UI test plan before frontend development begins?▼

You should write a UI test plan before frontend development begins when your project requires rigorous testing, ensuring critical aspects like state transitions and user interactions are fully documented and covered.

Related Skills

Explore More Software Engineering Skills→
nikbrunnernikbrunner

dev-style-react

Document React component architecture with Dumb Components, Smart Containers, Partials, and Layout Components.

Community
Advanced
heymishyheymishy

coverage-map

Read test plans and pipeline-state.json to report per-story and per-AC coverage status.

Community
Intermediate
Cbanzaime23Cbanzaime23

bmad-testarch-automate

Identify test automation gaps and generate API, E2E, and backend tests with fixtures.

Community
Advanced
lluppesmslluppesms

playwright-explore-website

Explore websites with Playwright to document user flows and generate test cases.

Community
Intermediate