design-expert

Generate UI design specifications with Mermaid user flows and component mappings.

Updated Feb 2, 2026
One-click install
npx skills add https://github.com/echarabati/adi-capital-admin --skill design-expert-echarabati
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-expert
Source: https://github.com/echarabati/adi-capital-admin/tree/main/.agent/skills/roles/design
Command: npx skills add https://github.com/echarabati/adi-capital-admin --skill design-expert-echarabati

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill transforms high-level discovery briefs and documentation into detailed UI design specifications, bridging the gap between requirements and visual implementation.

Core Features & Use Cases

  • Screen Mapping: Defines all necessary screens, their URLs, purposes, and access controls.
  • User Flow Documentation: Illustrates key user journeys with Mermaid diagrams and state descriptions.
  • Component Identification: Specifies which existing UI components to use and defines new ones required for the design.
  • Data Requirements: Outlines data fetching and mutation needs for both server and client components.
  • Use Case: After a /discovery and /docs run, use /design to generate a comprehensive 06_DESIGN.md file that product managers and developers can use to build the UI.

Quick Start

Use the design expert skill to generate a design specification from the existing discovery brief and documentation.

Frequently Asked Questions about design-expert

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

FAQPage Schema
How do I generate UI design specifications from a discovery brief?

You can generate detailed UI design specifications from discovery briefs by mapping screens, defining user flows with Mermaid diagrams, identifying UI components, and outlining data requirements for MVP features.

What is the best way to document user flows for MVP features?

The best way to document user flows for MVP features is by generating Mermaid diagrams and state descriptions that illustrate key user journeys alongside screen mapping and UI component identification.

Can I use atomic design principles for mobile-first UI specifications?

Yes, you can apply atomic design principles for mobile-first UI specifications by mapping screens, defining data requirements for client components, and identifying which existing UI components to use for MVP features.

Does this design specification process require existing documentation?

Yes, this design specification process requires existing discovery briefs and documentation to transform high-level requirements into detailed UI specifications, bridging the gap between requirements and visual implementation.

What limitations exist when mapping screens and defining data requirements?

A key limitation is that mapping screens and defining data requirements relies entirely on the quality of existing discovery briefs and documentation, meaning incomplete input documentation will result in insufficient UI specifications.