undash

Undash: The Anti-Dashboard-Default Skill

Purpose & Positioning

AI models default to dashboard layouts for almost every UI request. Dashboards dominate training data — SaaS products, Dribbble shots, Behance portfolios — so "build me an interface" gets interpreted as "build me a 4x3 grid of metric cards with glassmorphism." This is dashboard-itis.

The problem isn't that dashboards are bad. They're good — for the 20% of cases that actually need them. The problem is defaulting to a dashboard without analyzing whether it's the right pattern.

Undash forces pattern selection analysis before any visual design happens.

This skill decides what type of interface to build. The frontend-design skill decides how it looks. Run undash first, then hand off to frontend-design for aesthetic execution. They are complementary, not overlapping.

When This Skill Applies

Activate this skill when the user's request involves any of these:

• Designing, building, or generating a user interface
• Creating a web application, admin panel, portal, or internal tool
• Building an analytics view, reporting page, or data display
• Designing a monitoring page, operations view, or status page
• Any request containing words like: dashboard, panel, overview, console, cockpit, hub, portal Activate even when the user explicitly says "dashboard." The word "dashboard" is used as a generic synonym for "show me data in a UI" — it does not necessarily mean the dashboard pattern is correct.

Do NOT activate for: REST APIs, CLI tools, CSS bug fixes, backend services, database schemas, or other non-UI work.

Invocation Modes

This skill has three entry paths depending on how it's invoked:

Mode A: No Input (bare invocation)

When invoked without a target, design request, or pattern name — the user just wants help with their existing UI.

Step 0A — Scan the project:

• Find UI files: *.tsx, *.jsx, *.vue, *.svelte, *.html, *.css, *.astro, etc.
• Identify framework: check package.json, config files, directory structure
• Locate main UI entry points: layout files, page components, route files
• Detect dashboard indicators: grid layouts, stat card components, metric displays, chart libraries, sidebar navigation

Step 0B — Audit the current UI:

• Classify what type of UI exists (dashboard, form, landing page, etc.)
• Count components: stat cards, charts, tables, nav elements, action buttons
• Check against the Dashboard AI Slop Checklist (below)
• Identify which anti-patterns are present

Step 0C — Present two options: Personalize based on scan findings. Format:

I analyzed your project and found [what was found].

Option 1: Dashboard Cleanup — keep your dashboard structure, fix the AI slop I found these issues:

• [specific issue from scan, e.g., "8 equal-weight stat cards with no hierarchy"]
• [specific issue, e.g., "no inline actions — data is passive"]
• [specific issue, e.g., "generic dark palette with no brand identity"]

Option 2: Full Pattern Replacement — rethink the entire UI pattern I'll run a deep diagnostic to determine if a dashboard is the right pattern, then suggest alternatives. This may result in a completely different UI.

Which option? (1 or 2)

If user picks 1 → run the Dashboard AI Slop Reduction workflow (below). If user picks 2 → run the full 7-step workflow (below), with scan results feeding Steps 2-3.

Mode B: UI Design Request

When the user provides a design request (e.g., "build me a monitoring dashboard") → run the 7-step workflow directly.

Mode C: Explicit Pattern

When the user names a specific pattern (e.g., "use narrative pattern") → skip to Step 5 (Declare), then Steps 6-7.

The Anti-Dashboard Diagnostic

Before designing any interface, run this 7-question diagnostic. Answer each question based on the user's actual need, not their stated request.

The 7 Questions

Q1: What does the user DO after seeing this information? Act on a decision → Decision Engine | Investigate a problem → Launchpad | Read and absorb → Narrative | Complete a task → Wizard | Ask follow-ups → Conversational/Ephemeral | Nothing, system handles it → Ambient/Agentic

Q2: Is the layout the same every time? Same layout, different data → Dashboard or Narrative | Layout varies by data/query → Ephemeral | Layout adapts to urgency → Launchpad or Narrative

Q3: How many distinct things simultaneously? 1-2 with context → Narrative | 3-5 related → Dashboard (focused) | 6+ unrelated → RED FLAG, likely wrong pattern | Depends on query → Ephemeral/Conversational

Q4: Where is the user when they need this? Dedicated workstation → Any full-page pattern | Inside another tool → Ambient/Invisible | Mobile, between meetings → Narrative or Conversational | War room → Launchpad

Q5: How often do they return, and do they expect the same view? Daily, same layout → Dashboard or Narrative | Sporadic, different each time → Ephemeral/Conversational | Only when broken → Launchpad | Once, for a task → Wizard | Never, system handles it → Agentic/Invisible

Q6: Primary value — seeing data or taking action? Understanding state → Narrative or Dashboard | Acting on recommendations → Decision Engine | Completing a workflow → Wizard | System handles it → Agentic/Invisible | Exploring → Ephemeral/Conversational

Q7: Would a well-written email or Slack message make this unnecessary? Yes, completely → Ambient/Invisible | Partially, still need drill-down → Narrative or Launchpad | No, need interaction → Ephemeral/Conversational/Launchpad | No, need to take actions → Decision Engine/Wizard/Agentic

Quick-Decision Shortcuts

Skip the full diagnostic if any of these clearly apply:

• Primary verb is "investigate" or "debug" → Launchpad
• Multi-step form or process → Wizard
• Output consumed once and discarded → Ephemeral
• System acts autonomously with oversight → Agentic
• Information belongs inside another tool → Ambient
• User says "tell me what to do" → Decision Engine
• User says "what happened?" → Narrative
• Natural language query interface → Conversational

Scoring

Tally pattern signals across all 7 questions:

• 4+ signals: Strong match — use that pattern
• 3 signals: Good match — use it, check for a secondary pattern to combine
• 2-2 split: Combination needed — read references/decision-framework.md for combination guidance
• No pattern above 2: Ambiguous — read references/decision-framework.md for escalation questions

For detailed tie-breaking rules, ambiguity resolution, and escalation questions, read references/decision-framework.md.

The 8 Alternative Patterns

Brief summaries below. For detailed implementation guidance, read references/pattern-catalog.md.

1. Ephemeral / Generative UI

Generate a bespoke interface for each query. No persistent layout. The shape of the data determines the shape of the UI. Use for: ad-hoc reports, data exploration, search results. Not for: routine daily checks, saved views. Example: A report builder that creates a unique layout for each request, then exports to PDF.

2. Conversational UI

Natural language is the primary input. The conversation IS the navigation. Structured widgets appear inline within the chat flow. Use for: support tools, exploration, multi-intent interactions. Not for: speed-critical tasks, complex spatial layouts. Example: A support interface where agents chat with context, and action buttons appear inline.

3. Task-Based / Wizard UI

Guided, sequential steps for complex operations. One concern per screen. Progress visible. Validation at each step. Use for: onboarding, admin CRUD, configuration, checkout. Not for: 1-2 field forms, expert users who need speed. Example: A user management admin panel where "Create User" opens a 4-step guided flow.

4. Decision Engine / Write-Enabled UI

System proposes actions ranked by impact. User approves, modifies, or rejects. Actions execute with one click. Use for: operations tools, marketing optimization, inventory management. Not for: creative tasks, irreversible high-stakes actions without confirmation. Example: An ad optimization tool showing ranked suggestions with "Apply" buttons.

5. Narrative / Storytelling UI

Information prioritized and sequenced — what matters most first. Each section: what happened, why it matters, what to do. Use for: morning briefings, analytics, executive views, status reports. Not for: real-time monitoring, arbitrary comparisons. Example: A daily business briefing that leads with "Revenue dropped 8% — here's why."

6. Launchpad / Debugging UI

Investigation starting point. Health status + anomaly surfacing + drill-down paths. Use for: monitoring, incident response, QA, security operations. Not for: routine metric checking, action-taking without investigation. Example: A server monitoring view showing fleet health, surfacing unhealthy nodes, with drill-down to correlated metrics.

7. Agentic UI

AI agent executes multi-step tasks with user oversight. Canvas (co-editing), Flow (visible steps), Rollback (revertible), Approval (checkpoints). Use for: complex automation, collaborative creation, delegated workflows. Not for: simple single-step operations. Example: A deployment tool where the agent runs the pipeline and pauses for approval at critical gates.

8. Invisible / Ambient UI

Disappears into the user's existing workflow. No standalone page. Appears contextually via extensions, overlays, notifications, shortcuts. Use for: contextual information, augmenting existing tools, notifications. Not for: extended interaction, complex analysis. Example: A browser extension showing customer data when hovering over an email address in Gmail.

Intent-to-Pattern Quick Reference

User Says	Default	Likely Right Pattern
"Analytics dashboard"	Dashboard	Narrative — lead with insights, not metric grids
"Admin panel"	Dashboard + tables	Wizard — guide users through CRUD tasks
"Monitoring dashboard"	Dashboard + gauges	Launchpad — detect and investigate problems
"Reporting interface"	Dashboard + charts	Ephemeral — generate reports on demand
"Settings page"	Dashboard cards	Wizard — group settings, validate as you go
"Notification center"	Dashboard of alerts	Ambient — deliver notifications in context
"Data exploration tool"	Dashboard + filters	Ephemeral or Conversational
"Project management"	Kanban dashboard	Decision Engine — surface what to do next
"AI chat interface"	Dashboard + chat	Conversational + Agentic
"Onboarding flow"	Dashboard + progress	Wizard — it IS a wizard by definition
"Customer overview"	Dashboard cards	Dashboard (focused) — this one may be legit
"Content moderation"	Dashboard of items	Decision Engine — approve/reject queue

For the full mapping table (20 intents) and 5 worked examples, read references/intent-pattern-mapping.md.

The Workflow

When invoked with a specific UI design request (Mode B), or when the user picks Option 2 (Mode A), follow these 7 steps:

Step 1: Pause

Do not start designing. Do not write HTML. Pause and analyze.

Step 2: Extract Intent

Identify the user's actual need behind their stated request. "Build me a dashboard" usually means "show me data in a UI." Extract: Who uses this? What do they need to accomplish? What triggers them to open it? What do they do after? If a project scan was already performed (Mode A), use those findings here instead of re-analyzing.

Step 3: Diagnose

Run the 7-question diagnostic (above). Or use a quick-decision shortcut if one clearly applies. Tally the pattern signals.

Step 4: Select

Choose the primary pattern based on the highest signal count. If there's a tie, identify the primary and secondary patterns. If ambiguous, run escalation questions from references/decision-framework.md.

Step 5: Declare

Tell the user what pattern you selected and why, before doing any design work. This is the critical transparency step. Format it as:

Pattern selected: [Pattern Name] Your request for [what they asked for] maps to a [pattern name] because [1-2 sentence reasoning based on diagnostic answers]. Here's how this differs from a standard dashboard: [key difference].

If the user disagrees, discuss. If they insist on a dashboard after understanding the rationale, respect their choice — but apply the 5-widget rule (see "When Dashboards ARE Right").

Step 6: Generate

Now design the interface using the selected pattern. Read the relevant section of references/pattern-catalog.md for detailed implementation guidance.

Step 7: Style

Hand off to the frontend-design skill for aesthetic execution. The pattern determines the structure; frontend-design determines the look and feel.

When Dashboards ARE Right

Dashboards are the correct choice when all of these are true:

1. The user checks the same 3-5 metrics regularly (daily/weekly routine)
2. The layout is stable — the same widgets every time
3. Metrics are independent enough that spatial arrangement matters (no priority ordering)
4. The user scans, not reads — glancing to confirm "everything is normal"
5. No immediate action is required from the interface itself

When building a legitimate dashboard:

• 5-widget maximum for the primary view. More widgets = less attention per widget. If you need 6+, the scope is too broad — split into multiple focused views or use Narrative pattern instead.
• Each widget earns its place. Ask: "If I remove this widget, what decision can the user no longer make?" If no decision changes, remove it.
• Include one "hero metric" — the single most important number, displayed larger than the rest.
• Add contextual comparisons (vs. target, vs. last period) rather than raw numbers.
• Never fill space with decorative charts. Empty space is better than noise.

Respecting User Override

If the user explicitly confirms they want a dashboard after you've presented the alternative pattern and your reasoning, proceed with the dashboard. Do not argue further. Apply the 5-widget rule and build the best dashboard possible. The user may have context you lack.

Dashboard AI Slop Reduction (Option 1)

When the user chooses to keep their dashboard but clean it up, audit against this 7-item checklist and fix every violation found.

The AI Slop Checklist

1. The Metric Museum All stat cards have equal visual weight. Fix: establish one hero metric displayed larger, create 2-3 tiers of visual importance, demote or remove low-value cards.

2. Passive Data Display Numbers shown without context. Fix: add comparisons (vs. last period, vs. target), trend indicators, plain-language annotations ("up 12% from last week").

3. Generic Stat Cards Cookie-cutter icon + number + label cards that all look identical. Fix: differentiate card types by purpose, vary sizes by importance, use inline sparklines only where trend matters.

4. Cold Generic Palette Default dark theme with neon accents or default light with blue/gray everything. Fix: apply actual brand colors, use color meaningfully (red=bad, green=good, not decoratively), reduce accent color count.

5. No Action Path Dashboard shows data but provides no way to act. Fix: add inline actions to relevant widgets — click a metric to drill down, click an alert to investigate, add quick-action buttons where the user would naturally want to act.

6. Equal-Weight Layout Everything in a uniform grid (4x3, 3x2). Fix: break the grid — span important widgets across columns, vary heights, group related widgets visually, add whitespace between groups.

7. Decorative Visualizations Charts that look pretty but a number + trend arrow would convey the same insight. Fix: remove charts replaceable by a number, keep charts only when shape/distribution/comparison matters, never use a donut chart for a single percentage.

Option 1 Workflow

1. Audit — check all 7 items against the scanned code. List specific violations found.
2. Report — tell the user exactly what will change, item by item.
3. Execute — apply the fixes. Prefer minimal edits over rewrites.
4. Style — hand off to the frontend-design skill for aesthetic polish.

Design Layout Guidance

Condensed layout strategies per pattern for use in any design tool.

Ephemeral / Generative: Single-column focused layout. Prominent query input as empty state. Flexible auto-layout containers for generated content. Persistent floating export action.

Conversational: Single-column chat thread. Message bubbles with widget variants (text, cards, action buttons). Fixed bottom input area with suggestion chips. No sidebars — use expandable panels if context is needed.

Task-Based / Wizard: Three-zone layout — progress indicator (top), step content (center), navigation buttons (bottom). One input or decision per step. Review step as summary card stack. Show "Step N of M" count.

Decision Engine: Prioritized action queue as primary view. Recommendation cards with impact badge and approve/reject buttons. Bulk actions toolbar above the list. Clear visual states for proposed vs. approved vs. executed.

Narrative / Storytelling: Single-column, full-width vertical scroll. Large headline component leading with the biggest insight. Sections at varying heights for visual rhythm. Drill-down via expanding sections, not page navigation.

Launchpad / Debugging: Health indicator bar at top. Severity-sorted alert list below. Drill-down views with timeline + correlated metrics + raw events. Two-column investigation layout with breadcrumb navigation depth.

Agentic: Split view for canvas (workspace + suggestions). Vertical step list for flow (with status icons). Timeline bar for rollback history. Approval modal with impact assessment and approve/modify/reject. Persistent agent status bar.

Ambient / Invisible: Host app as primary view. Overlay as floating panel, tooltip, or sidebar (max 300px wide). Both triggered and dormant states designed. Instant appearance — no loading states. Match host app's visual language.

Common Anti-Patterns

1. The Metric Museum

20+ metric cards in a grid with equal visual weight. Nobody knows where to look. Fix: use Narrative to prioritize by importance, or Launchpad to surface anomalies.

2. The Dashboard-as-Admin-Panel

Cards showing entity counts with "Manage" buttons. The dashboard is a useless intermediary. Fix: use Task-Based UI to surface tasks directly, or a command palette for power users.

3. The Real-Time Wallpaper

Live-updating gauges on a wall TV. When green, nobody watches. When red, it can't help investigate. Fix: Ambient alerts for the happy path, Launchpad for investigation.

4. The Kitchen Sink Report

Every possible metric shown simultaneously with date filters. Confuses displaying data with delivering insights. Fix: Ephemeral UI that generates focused reports per query.

5. The Chat-Wrapped Dashboard

Every AI chat response renders a full metric grid regardless of the question. Fix: Conversational + Ephemeral — match response shape to query shape.

For expanded descriptions with before/after details, read references/intent-pattern-mapping.md (Anti-Pattern Gallery section).