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 | |--------
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.
Design and verify auditable human oversight, approval gates, escalation paths, and safe state transitions for AI agent workflows. Use when deciding which agent actions require review, adding approve/reject or dual-control flows, preventing unauthorized autonomous effects, creating decision records, reducing rubber-stamping, or recovering safely from rejected, expired, or failed actions.
Design, implement, harden, and verify Model Context Protocol (MCP) servers with precise tool contracts, least-privilege authorization, safe transports, structured errors, and interoperability tests. Use when creating a new MCP server, exposing an API or data source through MCP, reviewing an MCP server design, adding or revising MCP tools, or preparing an MCP server for production.
Design and operate bounded multi-agent workflows with task decomposition, dependency graphs, ownership, handoff contracts, shared-state controls, approvals, recovery, and synthesis. Use when a task contains genuinely independent workstreams, specialized roles, parallel research or implementation, reviewer-worker loops, or coordination problems that one agent should not execute sequentially.
Design and validate model-facing tool definitions with clear names, action-oriented descriptions, bounded JSON Schema parameters, explicit side effects, safe defaults, idempotency, errors, and realistic tests. Use when creating function-calling tools, MCP tools, agent actions, structured tool inputs, or when a model selects the wrong tool, invents arguments, or causes unsafe side effects.
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.
Threat-model and harden AI agents, RAG systems, assistants, and tool-using workflows against direct, indirect, stored, cross-agent, and multimodal prompt injection. Use when reviewing an agent architecture, isolating untrusted content, constraining tools and egress, protecting secrets, adding injection-focused tests, investigating a suspected injection incident, or documenting residual prompt-injection risk.