skills.rest
sizukutamago
sizukutamagoCOMMUNITY
Explore all skills by this author →
GitHub

design-detail

Generate screen specifications, component catalogs, and UI testing guidance documents.

Updated Feb 6, 2026
Search Tags:#design#handoff#wireframes#ui-patterns#screen-design#component-catalog#requirements-traceability
One-click install
npx skills add https://github.com/sizukutamago/blueprint-plugin --skill design-detail
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-detail
Source: https://github.com/sizukutamago/blueprint-plugin/tree/main/skills/design-detail
Command: npx skills add https://github.com/sizukutamago/blueprint-plugin --skill design-detail

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams produce comprehensive screen specifications, a reusable component catalog, and consistent UI patterns after Wave B completion, reducing handoff friction.

Core Features & Use Cases

  • Detailed screen specifications: defines per-screen layout, behavior, accessibility notes, and edge cases.
  • Component catalog creation: lists reusable UI components, props, and usage guidelines.
  • Use Case: after Wave A/B outputs and API design, generate concrete designs to hand off to implementation and testing.

Quick Start

Use the design-detail skill to generate screen-level details from the Wave A/B outputs and Blackboard decisions.

Frequently Asked Questions about design-detail

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

FAQPage Schema
How do I create detailed screen specifications from wireframes and API resources?▼

To create detailed screen specifications, this skill translates existing wireframes, API resources, and blackboard decisions into concrete per-screen layouts, behaviors, and edge cases. It generates structured detail files for each screen to reduce handoff friction.

What is a component catalog and how does it help with UI handoff?▼

A component catalog lists reusable UI components, their props, and usage guidelines. This skill generates a component catalog to ensure consistent UI patterns across screens, providing implementation teams with a clear reference for development and testing.

How do I generate UI testing guidance from screen design requirements?▼

You generate UI testing guidance by processing detailed screen specifications and error patterns. This skill produces a ui_testing_strategy.md file, mapping requirements traceability to ensure all screen behaviors and edge cases are covered during testing.

Can I define screen specifications and UI patterns before API design is finished?▼

No, you should not define detailed screen specifications before API design is finished. This skill operates after Wave B completion, requiring existing screen lists, screen transitions, and API resources as input to translate them into concrete screens and a component catalog.

What's the best way to document error patterns for UI screen designs?▼

The best way to document error patterns is by consolidating edge cases and accessibility notes from all per-screen specifications. This skill generates an error_patterns.md file to capture these UI patterns, ensuring consistent error handling across the application.

How do I ensure requirements traceability across detailed screen designs?▼

To ensure requirements traceability, this skill maps blackboard decisions and API resources directly to per-screen detail files and a component catalog. It translates high-level requirements into concrete UI patterns and a ui_testing_strategy.md document for verification.

Related Skills

Explore More Design & Creative Skills→
sizukutamagosizukutamago

design-inventory

Generate screen inventories and Mermaid transition diagrams from user stories in docs/requirements.

Community
Basic
pradyumnasagarpradyumnasagar
6

cross-reference-mapper

Generate and validate cross-references between ORS skills.

Community
Intermediate
rafasoaresrafasoares

vue

Create Vue 3 single-file components using script setup and Composition API.

Community
Intermediate
kimjuyoung1127kimjuyoung1127

toss_wireframes

Document TaillogToss screen wireframes as ASCII diagrams mapped to TDS components.

Community
Intermediate