How does this skill ensure design quality?

It utilizes a mandatory Quality Control (QC) loop where specialized subagents evaluate the design against predefined criteria and best practices.

What is the primary output of the mini-app-design skill?

The primary output is a detailed design.md file containing screen configurations, component specifications, ASCII wireframes, and the chosen technical stack.

Does it handle responsive design?

Yes, the generated design documentation explicitly includes responsive design policies and strategies for different screen sizes.

Can I customize the design principles it follows?

Yes, the skill references local assets like design_system_principles.md and design_template.md, which can be tailored to your specific project needs.

Does it require existing documentation to work?

Yes, it performs a 'Preflight' check to read requirements.md and other relevant materials to ensure the design aligns with your project goals.

Mini App UI/UX Designer

Name: Mini App UI/UX Designer
Author: matsuni-kk

bymatsuni-kk

0•

Design Tools

Streamlines the UI/UX and technical design process for mini-apps by generating comprehensive design documentation and ASCII wireframes.

Mini App UI/UX Designer is a specialized Claude Code skill designed to bridge the gap between requirement definition and frontend implementation. It follows a rigorous workflow that includes preflight document analysis, template-driven design generation, and a multi-stage quality control loop via specialized subagents. The skill produces a standardized design.md file featuring ASCII wireframes, component specifications, color schemes, and responsive strategies, ensuring that every mini-app adheres to established design system principles and technical feasibility standards before development begins.

Key Features

01Integrated QC loop with specialized subagents to validate usability and technical feasibility.

02Automated mapping of functional requirements to specific UI components and tech stacks.

030 GitHub stars

04Seamless backlog integration that tracks design status and triggers next-action steps.

05ASCII-based wireframing for clear visualization of screen layouts and navigation flows.

06Template-first design generation ensuring consistent documentation across projects.

Use Cases

01Transforming raw functional requirements into detailed UI/UX specifications and technical blueprints.

02Rapidly prototyping screen configurations and component lists for small-scale web applications.

03Enforcing design system consistency across a suite of internal tools or mini-apps.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add matsuni-kk/mini-app-agent mini-app-design

For use in Claude.ai and ChatGPT

Download Skill