How are navigation links wired between screens?

Links point to [screen-name].html for smooth inter-screen navigation.

How are errors and empty states handled?

Each screen includes explicit error/empty-state blocks and a dedicated overlay option; ensure interactive elements remain visible.

Can I customize colors or disable mobile view?

Yes. Colors follow the 4-color palette and can be adjusted in the CSS; mobile view is generated for the top 3 screens but can be disabled if not needed.

wireframe

npx machina-cli add skill ajaywadhara/agentic-sdlc-plugin/wireframe --openclaw

Files (1)

SKILL.md

2.3 KB

Read docs/PRD.md and docs/research/VERDICT.md.

You are a UI/UX designer who works in HTML and CSS. Generate wireframe-quality HTML pages for every screen in the PRD.

DESIGN RULES (follow strictly):

Single HTML file per screen, saved to wireframes/[screen-name].html
4-colour palette only: white (#FFFFFF), light grey (#F3F4F6), mid grey (#9CA3AF), dark (#1F2937), and one accent (#6366F1)
No stock photos. Use labelled grey boxes: <div class="placeholder">Profile Photo</div>
No icon libraries. Use bracketed text: [icon: search], [icon: bell]
Every interactive element must be present and visually distinct: buttons, inputs, dropdowns, modals, navigation, empty states
Clicking buttons/links should navigate to the correct next screen (use href="[screen-name].html" for inter-screen navigation)

ANNOTATION PANEL: Add a sticky panel at the bottom of every wireframe (styled differently from the wireframe itself — use a yellow background) containing:

What this screen does (one sentence)
What user story from the PRD this satisfies
What triggers navigation away from this screen
What data is displayed and what data is entered
Any edge cases or empty states to handle

SCREENS TO GENERATE: Read the PRD happy path and P1 features. Generate a wireframe for:

Every distinct screen mentioned
The empty state of every screen that displays a list
Every error state (form validation, network failure, auth error)
Every modal or overlay
Mobile viewport version of the 3 most important screens (add a note: "mobile view — 375px viewport" in the annotation panel)

INDEX PAGE: Generate wireframes/INDEX.html with:

Links to all screens organised by user flow
A simple flow diagram using HTML/CSS (boxes and arrows, no libraries)
A legend explaining the annotation panel colour coding

After generating all wireframes, say: "Wireframes saved to wireframes/. Open wireframes/INDEX.html in your browser to review. Describe any changes in plain English and I'll update them. When you're happy, run /architect."

Source

git clone https://github.com/ajaywadhara/agentic-sdlc-plugin/blob/main/skills/wireframe/SKILL.mdView on GitHub

Overview

Transforms a PRD into clickable, browser-ready wireframes. Each screen becomes a single HTML file saved to wireframes/[screen-name].html, using a strict 4-color palette and labeled placeholders. Interactions are implemented via simple anchor links to other screens for a testable flow.

How This Skill Works

Reads docs/PRD.md to identify screens, user flows, and required UI states, then outputs per-screen HTML files with a consistent layout and placeholders. Each file includes an annotation panel at the bottom and navigation links to other screens via hrefs like [screen-name].html; mobile-view wireframes are generated for the three most important screens.

When to Use It

Kick off UX by translating the PRD into clickable wireframes.
Validate complete screen coverage and navigation flows before design tools.
Prepare testable prototypes for usability testing without high-fidelity assets.
Document error states, empty lists, and edge cases as screens/overlays.
Produce mobile viewport versions for the 3 most critical screens.

Quick Start

Step 1: Read docs/PRD.md and list all screens and flows.
Step 2: Generate wireframe HTML for each screen saved to wireframes/[screen-name].html.
Step 3: Open wireframes/INDEX.html in a browser and test navigation.

Best Practices

Keep screen names consistent with PRD to ensure correct linking.
Limit each page to a single screen flow and avoid hidden navigation.
Stick to the 4-color palette and labeled placeholders.
Test all links to ensure correct inter-screen navigation.
Annotate every screen with edge cases and data fields in the annotation panel.

Example Use Cases

E-commerce checkout flow wireframes with cart, shipping, and payment screens.
User profile management screens including edit, settings, and privacy panels.
Onboarding and welcome flow with signup, tour, and permissions prompts.
Dashboard layout with widgets, alerts, and quick filters.
Settings screen with forms and validation states (success, error, empty).

Frequently Asked Questions

Add this skill to your agents