skills.rest
gleeb
gleebCOMMUNITY
Explore all skills by this author →
GitHub

planning-design

Produces HTML/CSS mockups and audit-ready design specs for approved stories.

Updated Aug 27, 2026
Search Tags:#design system#information architecture#mockups#developer handoff#html css#accessibility wcag 2.2#ui ux design
One-click install
npx skills add https://github.com/gleeb/ai-registry --skill planning-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: planning-design
Source: https://github.com/gleeb/ai-registry/tree/main/systems/sdlc/skills/planning-design
Command: npx skills add https://github.com/gleeb/ai-registry --skill planning-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents design drift and missing accessibility states by guiding per-story UX/UI work through a structured, auditable workflow tied to the Planning Hub dispatch.

Core Features & Use Cases

  • 7-phase per-story design workflow: Runs UX discovery, brand foundation (once), information architecture, visual design, HTML/CSS mockups, WCAG 2.2 AA accessibility audit, and developer handoff.
  • Design-to-implementation contract: Produces developer-ready specs including design tokens, interactive states, responsive behavior, and interaction details that downstream implementers and reviewers can verify.
  • Per-story scope control: Enforces when to run (design candidate domains) and when to deny (backend/implementation work, missing Hub dispatch).

Use case: when the hub dispatches a story with candidate_domains including design, this skill generates plan/user-stories/US-NNN-name/design/*.html, updates the shared plan/design/design-spec.md and plan/design/color-palette.md if needed, and ensures every mockup passes an accessibility audit aligned to the same checklist reviewers will use.

Quick Start

Use planning-design to produce design mockups and handoff specs for the current story by reading the story scope from plan/user-stories/US-NNN-name/story.md and component structure from plan/user-stories/US-NNN-name/hld.md, then write the resulting HTML/CSS mockups under plan/user-stories/US-NNN-name/design/.

Frequently Asked Questions about planning-design

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

FAQPage Schema
How do I turn user stories into accessible HTML mockups with developer handoff specs?▼

To turn user stories into accessible HTML mockups, this skill applies a 7-phase per-story workflow covering UX discovery, visual design, HTML/CSS mockup creation, and a WCAG 2.2 AA accessibility audit before generating final developer handoff specifications.

What is the best way to maintain a design system and prevent design drift across multiple user stories?▼

To maintain a design system and prevent design drift, the skill bootstraps brand foundations once and updates shared design specs and color palettes, ensuring every per-story mockup aligns with a consistent visual architecture.

How do I generate developer-ready design tokens and interactive states from UI mockups?▼

To generate developer-ready design tokens and interactive states from UI mockups, the skill produces a design-to-implementation contract detailing responsive behavior and interaction specifics that downstream implementers can directly verify.

Do I need Planning Hub dispatch to create UI mockups and run WCAG 2.2 accessibility audits?▼

Yes, Planning Hub dispatch is required to create UI mockups and run accessibility audits. The skill enforces per-story scope control by denying execution for backend work or missing Hub dispatches.

When should I not use this skill for information architecture and visual design work?▼

You should not use this skill for information architecture and visual design work when the user story candidate domains do not include design, or if the task involves backend implementation rather than per-story UX/UI artifact generation.

Related Skills

Explore More Design & Creative Skills→
TestAny-ioTestAny-io
79

hld-writer

Converts PRD and API contracts into structured high-level designs with traceability.

Official
Advanced
cloudofgeorgecloudofgeorge

design-html

Convert design mockups into semantic HTML and responsive CSS.

Community
Intermediate
ajianazajianaz
4

database-manager

Automate database architecture, schema design, performance tuning, and migration planning.

Community
Advanced
alex-voloshin-devalex-voloshin-dev
2

ui-ux-design

Standardize UI/UX design systems and WCAG 2.2 AA accessibility compliance through structured auditing and documentation workflows.

Community
Advanced