Skills
.Work. You
Rest

wireframe

Community

Wireframe-driven UI from FlowSpec data.

Design & Creative#wireframe#visual-analysis#placement#flowspec#ui-component#data-mapping#sub-canvas
AuthorJktfe
Version1.0.0
Installs0

System Documentation

What problem does it solve?

FlowSpec wireframes and data mappings often live separately, making it hard to implement UI components that accurately reflect both the visual design and the underlying data structure.

Core Features & Use Cases

  • Combines a wireframe screenshot with a sub-canvas YAML to map data positions to UI elements.
  • Leverages optional main FlowSpec for full type and constraint context to enhance accuracy.
  • Supports responsive layouts by interpreting percentage-based placements rather than fixed pixels.

Quick Start

Implement a UI component by combining the wireframe screenshot with the sub-canvas YAML to place data elements.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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
Download link: https://github.com/Jktfe/flowspec-claude-code-plugin/archive/main.zip#wireframe

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.