wireframe-generator
CommunityGenerate UI wireframes from YAML
Authortakemo101
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the creation of visual wireframes from structured YAML definitions, streamlining the design review process and accelerating UI prototyping.
Core Features & Use Cases
- YAML to Wireframe Conversion: Automatically generates PNG images of UI mockups based on provided YAML specifications.
- Supports Diverse UI Patterns: Handles various components like forms, tables, detail views, dashboards, modals, and more.
- Use Case: Designers and developers can quickly visualize complex screen layouts by defining them in YAML, allowing for rapid iteration and feedback before full implementation.
Quick Start
Use the wireframe-generator skill to generate a wireframe image from the YAML definition in the file 'my-screen.md'.
Dependency Matrix
Required Modules
js-yamlplaywrightreact@vitejs/plugin-reactvite
Components
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: wireframe-generator Download link: https://github.com/takemo101/compose-workflow/archive/main.zip#wireframe-generator Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.