Skills
.Work. You
Rest

wireframing

Community

Design UI layouts and responsive behavior.

Design & Creative#responsive design#wireframing#ux design#ui design#layout patterns#html template
AuthorSufficientDaikon
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides comprehensive guidance and patterns for creating effective wireframes, defining user interface layouts, and planning responsive design behavior across different devices.

Core Features & Use Cases

  • Layout Grid Systems: Understand 12-column grids, CSS Grid vs. Flexbox, and common column splits.
  • Content Block Patterns: Implement reusable patterns for hero sections, feature grids, testimonials, pricing tables, CTAs, and footers.
  • Responsive Breakpoints: Learn strategies for mobile, tablet, and desktop layouts, including content adjustments and mobile-first approaches.
  • Wireframe Conventions: Follow visual design rules, typography representation, and annotation formats.
  • Use Case: When designing a new landing page, use this Skill to quickly select and implement appropriate layout patterns, content blocks, and ensure a responsive design strategy from the start.

Quick Start

Generate a wireframe HTML template for a landing page using the wireframing skill.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: wireframing
Download link: https://github.com/SufficientDaikon/omniskill/archive/main.zip#wireframing

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.