From claude-codex
Analyze any dashboard page and generate an interactive HTML mockup with horizontal tabs. Use when reorganizing flat/scrolling dashboard pages into tabbed layouts.
npx claudepluginhub aventerica89/claude-codex --plugin claude-codexThis skill uses the workspace's default tool permissions.
Analyze a dashboard page, propose tab groupings, generate an interactive HTML mockup, and provide implementation guidance.
Provides Ktor server patterns for routing DSL, plugins (auth, CORS, serialization), Koin DI, WebSockets, services, and testApplication testing.
Conducts multi-source web research with firecrawl and exa MCPs: searches, scrapes pages, synthesizes cited reports. For deep dives, competitive analysis, tech evaluations, or due diligence.
Provides demand forecasting, safety stock optimization, replenishment planning, and promotional lift estimation for multi-location retailers managing 300-800 SKUs.
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}]