Does this skill modify my production source code?

No, it generates a standalone HTML mockup and an implementation plan to help you visualize and plan the changes before you apply them to your codebase.

Can I customize the tab groupings?

Yes, the skill presents a grouping proposal and uses the AskUserQuestion function to allow you to approve or modify the plan before the mockup is generated.

What UI framework does the generated mockup use?

The mockup is a self-contained HTML file using vanilla CSS and JavaScript with no external dependencies, making it easy to open instantly in any browser.

Does it support deep-linking for the tabbed interface?

Yes, the provided implementation guidance includes a URL hash synchronization pattern using search parameters to support deep-linking to specific tabs.

Interactive Dashboard Architect

Name: Interactive Dashboard Architect
Author: Aventerica89

byAventerica89

0•

Design Tools

Transforms cluttered, flat dashboard pages into organized, tabbed layouts with interactive HTML mockups and implementation blueprints.

The Dashboard Layout skill streamlines the process of refactoring complex or scrolling dashboard interfaces into intuitive, user-friendly tabbed layouts. By analyzing existing code or feature descriptions, the skill identifies related content blocks and proposes logical groupings to improve navigation. It goes beyond simple suggestions by generating a fully interactive, dark-themed HTML mockup that can be viewed instantly in a browser, allowing developers and stakeholders to align on the UI structure before writing production code. Each workflow concludes with a detailed implementation guide, including component reuse strategies and deep-linking patterns.

Key Features

01Dark-themed slate palette design optimized for modern SaaS dashboards

02Automated extraction of content blocks and UI elements from existing code

030 GitHub stars

04Interactive HTML mockup generation with zero external dependencies

05Intelligent domain-affinity grouping for tab-based navigation

06Detailed implementation plans including shadcn/ui component mapping

Use Cases

01Rapid prototyping of new dashboard modules for stakeholder approval

02Planning UI/UX hierarchy for complex integration and account management views

03Refactoring long, scrolling settings pages into organized tabbed interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aventerica89/claude-codex dashboard-layout

For use in Claude.ai and ChatGPT

Key Features

01Dark-themed slate palette design optimized for modern SaaS dashboards

02Automated extraction of content blocks and UI elements from existing code

030 GitHub stars

04Interactive HTML mockup generation with zero external dependencies

05Intelligent domain-affinity grouping for tab-based navigation

06Detailed implementation plans including shadcn/ui component mapping

Use Cases

01Rapid prototyping of new dashboard modules for stakeholder approval

02Planning UI/UX hierarchy for complex integration and account management views

03Refactoring long, scrolling settings pages into organized tabbed interfaces