Analyze any dashboard page and generate an interactive HTML mockup with horizontal tabs. Use when reorganizing flat/scrolling dashboard pages into tabbed layouts.
Analyzes dashboard pages and generates interactive HTML mockups with tabbed layouts for content reorganization.
/plugin marketplace add https://www.claudepluginhub.com/api/plugins/aventerica89-claude-codex/marketplace.json/plugin install aventerica89-claude-codex@cpd-aventerica89-claude-codexThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Analyze a dashboard page, propose tab groupings, generate an interactive HTML mockup, and provide implementation guidance.
/dashboard-layout [page-path-or-description]
If a file path is given, read the page code. If a description is given, parse the described features.
Output: A numbered list of every content block found (cards, forms, panels, sections).
Example:
Content blocks found:
1. Google Calendar -- connection status + sync button
2. Plaid Banking -- connection panel with accounts
3. Todoist -- API token form + sync button
4. AI Providers -- Anthropic, Gemini, DeepSeek, Groq keys
5. About -- link card to /settings/about
6. Privacy Policy -- footer link
Propose tab groupings based on domain affinity:
Rules:
Example proposal:
| Tab | Items |
|---|---|
| Integrations | Google Calendar, Plaid Banking, Todoist |
| AI | Anthropic, Gemini, DeepSeek, Groq |
| Account | About, Privacy |
Create a self-contained HTML file and save to ~/Desktop/{page-name}-layout.html.
Requirements:
#0f172a background, slate palette, system-ui fontopen command after savingVisual spec:
+------------------------------------------+
| Page Title |
| Description text |
| |
| [Tab 1] [Tab 2] [Tab 3] [Tab 4] |
| ---------------------------------------- |
| |
| +------------------------------------+ |
| | [icon] Item Title [status] | |
| | One-line description | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [icon] Item Title [status] | |
| | One-line description | |
| +------------------------------------+ |
| |
| [Copy Layout Plan] |
+------------------------------------------+
Color tokens:
#818cf8) underline + white text#94a3b8) text, hover slate-300#1e293b background, #334155 border, rounded-lg#4ade80 connected), amber (#fbbf24 pending), slate (#64748b not set up)#0f172aAfter user approves the mockup, output:
Tabs, Card, Badge, Separator?tab=ai search param for deep-linkingExample output:
## Implementation Plan
### Modify: src/app/(dashboard)/settings/page.tsx
- Wrap content in <Tabs defaultValue="integrations">
- Add <TabsList> with triggers for each tab
- Wrap each group in <TabsContent value="...">
- Add URL search param sync via client component wrapper
### Reuse:
- Tabs, TabsList, TabsTrigger, TabsContent (shadcn)
- Existing PlaidConnectionPanel, AIProvidersPanel
- Card, Badge for status indicators
### URL Sync:
- Client component reads searchParams.tab on mount
- Updates URL via router.replace on tab change
- Default: "integrations"
The copy button in the HTML mockup copies this markdown:
## Dashboard Layout: {Page Name}
### Tab: {Tab Name}
- {Item title} -- {description} [{status}]
- {Item title} -- {description} [{status}]
### Tab: {Tab Name}
- {Item title} -- {description} [{status}]
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.