skills.rest
shirulot
shirulotCOMMUNITY
Explore all skills by this author →
GitHub

ux-specification

Translate product requirement documents into UX specifications with user flows and screen layouts.

Updated Jul 6, 2026
Search Tags:#design#specification#interaction#prd#ux#wireframe
One-click install
npx skills add https://github.com/shirulot/codex-skill --skill ux-specification
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-specification
Source: https://github.com/shirulot/codex-skill/tree/main/ux-specification
Command: npx skills add https://github.com/shirulot/codex-skill --skill ux-specification

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill bridges the gap between high-level product requirements and technical implementation by generating structured, concrete UI/UX specifications that coding agents can execute.

Core Features & Use Cases

  • Flow Mapping: Automatically defines user paths, decision points, and error handling.
  • Screen Specification: Generates detailed layouts, component requirements, and state definitions for every screen.
  • Interaction Design: Documents triggers, feedback, and responsive behaviors to ensure consistent implementation.
  • Use Case: Use this when you have a finalized PRD and need to provide a developer or AI agent with a clear blueprint of the UI, component props, and user interactions before writing code.

Quick Start

Use the ux-specification skill to generate a detailed design document based on the current project requirements.

Frequently Asked Questions about ux-specification

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

FAQPage Schema
How do I translate a PRD into actionable UX specifications for development?▼

To translate a PRD into actionable UX specifications, input structured user stories and feature criteria to generate comprehensive blueprints covering user flows, screen layouts, component props, and interaction patterns for development agents.

What is the best way to document user flows and interaction patterns from product requirements?▼

Documenting user flows and interaction patterns from product requirements involves mapping decision points, error handling, and responsive behaviors to transition conceptual PRDs into concrete technical implementation details.

Can I generate screen layouts and component states directly from a finalized PRD?▼

Yes, you can generate screen layouts and component states directly from a finalized PRD by processing structured feature criteria to produce detailed state definitions, component props, and component requirements for every screen.

Does generating UX specs require structured input of user stories and feature criteria?▼

Yes, generating UX specs requires structured input of user stories and feature criteria to ensure the transition from conceptual requirements to technical implementation details remains consistent and actionable for coding agents.

When do I need to create detailed UI specifications before writing code?▼

You need to create detailed UI specifications before writing code when you have a finalized PRD and must provide a developer or AI agent with a clear blueprint of component props, triggers, and user interactions.

Related Skills

Explore More Product & Management Skills→
JochenYangJochenYang
21

product-manager

Generate structured PRDs and user stories with acceptance criteria.

Community
Intermediate
JongHyunLee84JongHyunLee84

factory-ui-design

Generate UI specifications with screen layouts and component hierarchies from technical architecture.

Community
Advanced
getfnddgetfndd

rams

Generate UX-first Product Requirements Documents and map product flows.

Community
Advanced
kimasplundkimasplund
4

document-writing-skills

Generate professional documents from standardized templates and quality checklists.

Community
Intermediate