From nextjs-supabase-ai-sdk-dev
This skill should be used when the user asks to "create a wireframe", "design a layout", "plan UI structure", "sketch component layout", "create WIREFRAME.md", "mobile-first wireframe", or mentions ASCII wireframes, layout planning, or UI structure before implementation. Provides mobile-first ASCII wireframe methodology for visualizing layouts before code.
npx claudepluginhub constellos/claude-code --plugin nextjs-supabase-ai-sdk-devThis skill uses the workspace's default tool permissions.
Mobile-first ASCII wireframe methodology for planning UI layouts before implementation.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Mobile-first ASCII wireframe methodology for planning UI layouts before implementation.
Wireframing is the first step in the UI development workflow. Create visual ASCII representations of component and page layouts in WIREFRAME.md files before writing any code. This ensures alignment on structure, hierarchy, and interaction patterns.
Always start with the smallest viewport (375px mobile). Design for mobile constraints first, then progressively enhance for larger screens:
Create WIREFRAME.md files in the component or page directory:
components/
└── feature-card/
├── WIREFRAME.md # Wireframe documentation
├── feature-card.tsx # Implementation
└── index.ts
app/
└── dashboard/
├── WIREFRAME.md # Page wireframe
└── page.tsx
Before drawing, list the key elements:
## Components
- Header with logo and navigation
- Hero section with title and CTA
- Feature cards (3x grid on desktop)
- Footer with links
Start with the mobile viewport using ASCII art:
## Mobile Layout (375px)
┌─────────────────────────────────────┐
│ [Logo] [☰ Menu] │
├─────────────────────────────────────┤
│ │
│ Hero Image │
│ │
│ Welcome to Our App │
│ ───────────────── │
│ Subtitle text here │
│ │
│ [ Get Started → ] │
│ │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ Feature 1 │ │
│ │ Description text │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Feature 2 │ │
│ │ Description text │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Feature 3 │ │
│ │ Description text │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ Links | Privacy | Terms │
│ © 2025 Company │
└─────────────────────────────────────┘
Show how layout adapts:
## Tablet Layout (768px)
┌─────────────────────────────────────────────────┐
│ [Logo] [Nav] [Nav] [Nav] │
├─────────────────────────────────────────────────┤
│ │
│ Hero Image │
│ │
│ Welcome to Our App │
│ ───────────────── │
│ │
│ [ Get Started → ] │
│ │
├─────────────────────────────────────────────────┤
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Feature 1 │ │ Feature 2 │ │
│ │ Description │ │ Description │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ ┌──────────────────┐ │
│ │ Feature 3 │ │
│ │ Description │ │
│ └──────────────────┘ │
└─────────────────────────────────────────────────┘
Full layout with all columns:
## Desktop Layout (1024px+)
┌────────────────────────────────────────────────────────────────┐
│ [Logo] [Nav] [Nav] [Nav] [CTA] │
├────────────────────────────────────────────────────────────────┤
│ │
│ Hero Image │
│ │
│ Welcome to Our App │
│ ───────────────── │
│ Subtitle text here │
│ │
│ [ Get Started → ] │
│ │
├────────────────────────────────────────────────────────────────┤
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │
│ │ Feature 1 │ │ Feature 2 │ │ Feature 3 │ │
│ │ Description │ │ Description │ │ Description │ │
│ │ text here │ │ text here │ │ text here │ │
│ └────────────────┘ └────────────────┘ └────────────────┘ │
├────────────────────────────────────────────────────────────────┤
│ Links | Privacy | Terms © 2025 Company │
└────────────────────────────────────────────────────────────────┘
Document interactive elements and data flow:
## Interactions
### Navigation
- Mobile: Hamburger menu opens full-screen overlay
- Tablet+: Horizontal nav bar visible
### CTA Button
- onClick: Navigate to /signup
- Hover: Scale 1.02, shadow increase
### Feature Cards
- Hover: Lift effect with shadow
- Click: Navigate to /features/{id}
## Data Requirements
- `features[]`: Array of feature objects
- `id`: string
- `title`: string
- `description`: string
- `icon`: IconName
Corners: ┌ ┐ └ ┘
Lines: │ ─
T-joints: ├ ┤ ┬ ┴ ┼
Button: [ Button Text ] or [ → ]
Input: [_______________]
Checkbox: [✓] Label or [ ] Label
Radio: (●) Selected or ( ) Unselected
Dropdown: [Option ▼]
Icon: [☰] [✕] [→] [←] [↑] [↓]
Image: ┌─────────┐
│ IMG │
└─────────┘
Padding: │ ← 16px → │
Gap: [Card] ← 24px → [Card]
Margin: ↑ 32px margin
# Component/Page Name Wireframe
## Overview
Brief description of the component/page purpose.
## Components
- Component 1: Description
- Component 2: Description
## Mobile Layout (375px)
[ASCII wireframe]
## Tablet Layout (768px)
[ASCII wireframe]
## Desktop Layout (1024px+)
[ASCII wireframe]
## Interactions
### Element Name
- Event: Behavior
## Data Requirements
- `propName`: type - description
## States
### Loading
[ASCII for loading state]
### Empty
[ASCII for empty state]
### Error
[ASCII for error state]
## Accessibility Notes
- Keyboard navigation: Tab order, focus states
- Screen reader: ARIA labels, semantic HTML
- Color contrast: Minimum 4.5:1 ratio
Before proceeding to implementation:
After wireframe approval, proceed to the ui-design skill for implementing the static UI with compound components and TypeScript interfaces.