wireframing
Create text-based wireframes at low, mid, and high fidelity with component inventories, interaction annotations, and responsive breakpoint specifications. Use when the user requests wireframing or provides relevant inputs for this workflow.
git clone --depth 1 https://github.com/seb1n/awesome-ai-agent-skills /tmp/wireframing && cp -r /tmp/wireframing/design-and-ui-ux/wireframing ~/.claude/skills/wireframingSKILL.md
# Wireframing This skill enables the agent to produce wireframes at three fidelity levels — low-fi (block layouts and content hierarchy), mid-fi (defined components with placeholder content), and high-fi (pixel-accurate specs with real content, spacing values, and interaction notes). Since the agent works in text, wireframes are rendered as ASCII/box-drawing layouts or structured component specifications with precise dimensions. Each wireframe includes a component inventory, interaction annotations, and responsive breakpoint behavior. ## Workflow 1. **Clarify the Screen and Its Purpose**: Identify which screen or view to wireframe, its role in the user flow, and the primary user action on that screen. Determine the target platform (desktop web, tablet, mobile) and any framework constraints (e.g., Bootstrap grid, Material Design components). This scoping prevents wireframes from growing beyond their intended focus. 2. **Define the Component Inventory**: List every UI component the screen requires: navigation bars, headings, cards, forms, buttons, tables, modals, tooltips, empty states, and loading states. For each component, note its content requirements (label text, data fields, image dimensions) and its interactive behavior (clickable, expandable, draggable, editable). This inventory becomes the wireframe's bill of materials. 3. **Create the Low-Fidelity Layout**: Produce a block-level layout showing content zones and their spatial relationships. Use ASCII box drawing to represent regions. Focus on information hierarchy: what the user sees first, second, third. Do not specify exact pixel values or real content at this stage — use labels like `[Hero Image]`, `[Product Grid 3×2]`, `[CTA Button]`. 4. **Elevate to Mid-Fidelity**: Replace placeholder labels with representative content. Add specific component types (dropdown vs. radio, text input vs. textarea), define column counts and approximate proportions, and note key spacing relationships (e.g., "16px gap between cards"). Include navigation states (active tab, breadcrumb trail) and basic content hierarchy (heading levels, body text, captions). 5. **Produce High-Fidelity Specifications**: Add exact dimensions, spacing values (in px or rem), typography specs (font, size, weight, line-height), color token references, border-radius values, and shadow levels. Annotate every interactive element with its behavior: hover state, focus state, click action, validation rules, error messages. Include responsive breakpoint notes describing what changes at each breakpoint. 6. **Document Responsive Behavior**: For each wireframe, specify layout changes at mobile (< 640px), tablet (640-1023px), and desktop (≥ 1024px). Describe which components stack, collapse, hide, or reflow. Note touch target sizes for mobile (minimum 44x44px) and any gesture interactions (swipe to dismiss, pull to refresh). ## Usage Provide the agent with the screen name, its purpose, the target platform, and the desired fidelity level. Include any existing design system tokens or component library references. The agent will produce a wireframe with a component inventory and interaction annotations. ## Examples ### Example 1: ASCII Wireframe for an Analytics Dashboard **User Request**: "Create a low-to-mid fidelity wireframe for a web analytics dashboard. Desktop layout. It should show a sidebar nav, KPI summary cards, a line chart, and a data table." **Agent Response**: ``` ┌──────────────────────────────────────────────────────────────────────┐ │ ┌─────────┐ Dashboard 🔔 👤 Jane Smith ▾ │ │ │ LOGO │ │ ├──┴─────────┴─┬───────────────────────────────────────────────────────┤ │ │ │ │ Dashboard • │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ Analytics │ │ Total Users │ │ Revenue │ │ Bounce Rate │ │ │ Reports │ │ 12,482 │ │ $48,250 │ │ 34.2% │ │ │ Settings │ │ ▲ +8.3% │ │ ▲ +12.5% │ │ ▼ -2.1% │ │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ │ │ ┌───────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ Sessions Over Time (Line Chart) │ │ │ │ │ ___/\ /\ │ │ │ │ │ _/ \____/ \___ │ │ │ │ │ _/ \__ │ │ │ │ │ Jan Feb Mar Apr May Jun │ │ │ │ │ │ │ │ │ └───────────────────────────────────────────────┘ │ │ │ │ │ │ ┌───────────────────────────────────────────────┐ │ │ │ │ Page Views Bounce Avg Time │ │ │ │ │ ─────────────── ──────── ──────── ────────── │ │ │ │ │ /home 8,421 32.1% 2m 14s │ │ │ │ │ /pricing 3,892 28.7% 3m 42s │ │ │ │ │ /docs 2,104 41.3% 5m 08s │ │ │ │ │ /blog 1,876 45.6% 1m 52s │ │ │ │ │ │ │ │ │ │ ◀ 1 2 3 ... 12 ▶ Showing │ │ │ │ │ 1-10 of 47 │ │ │ │ └───────────────────────────────────────────────┘ │ │ │ │ └──────────────┴───────────────────────────────────────────────────────┘ ``` **Component inventory**: | Component | Content | Interaction | |--------
Audit web interfaces against WCAG 2.1 AA/AAA standards, identify violations, and produce actionable remediation reports with code fixes. Use when the user requests accessibility testing or provides relevant inputs for this workflow.
Design reproducible evaluations for AI agents with representative task sets, explicit rubrics, appropriate graders, baselines, regression gates, and failure analysis. Use when defining agent quality, comparing prompts or models, validating a release, measuring tool-use reliability, investigating regressions, or deciding whether an agent is ready for production.
Design privacy-aware observability for AI agents using traces, spans, structured events, metrics, cost attribution, dashboards, alerts, and investigation workflows. Use when instrumenting an agent, debugging intermittent tool or model failures, defining service-level objectives, analyzing latency or spend, auditing agent decisions, or preparing production monitoring.
Plan, execute, document, and retest authorized security assessments of AI agents and multi-agent workflows using safe adversarial cases, synthetic identities, canaries, and evidence-based findings. Use when defining red-team rules of engagement, assessing prompt injection or excessive agency, testing tool and identity boundaries, evaluating memory or cross-agent attacks, scoring a campaign, or verifying remediation in an approved environment.
Generate comprehensive marketing analytics reports by collecting KPIs, analyzing trends, and delivering actionable insights with attribution modeling and funnel analysis. Use when the user requests analytics reporting or provides relevant inputs for this workflow.
Design RESTful APIs with proper resource modeling, HTTP method semantics, status codes, pagination, versioning, and documentation. Use when the user requests api design or provides relevant inputs for this workflow.
Integrate with external APIs using REST clients, webhook consumers, SDK wrappers, and polling patterns with proper authentication, error handling, and retry logic. Use when the user requests api integration or provides relevant inputs for this workflow.
Create and manage budgets with variance analysis and departmental allocation. Use when the user requests budget planning or provides relevant inputs for this workflow.