skills.rest
lgtm-hq
lgtm-hqOFFICIAL
Explore all skills by this author →
GitHub

dashboard-redesign

Redesign a scalable SPA dashboard with sidebar and tab navigation.

Updated Aug 23, 2026
Search Tags:#architecture#layout#frontend#navigation#dashboard#UI redesign
One-click install
npx skills add https://github.com/lgtm-hq/claude-skills --skill dashboard-redesign
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard-redesign
Source: https://github.com/lgtm-hq/claude-skills/tree/main/skills/dashboard-redesign
Command: npx skills add https://github.com/lgtm-hq/claude-skills --skill dashboard-redesign

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide for redesigning the Flowscout SPA dashboard, enhancing usability and scalability.

Core Features & Use Cases

  • Design Vision & Implementation: Outlines a new two-tier navigation architecture with a vertical sidebar and horizontal tabs for improved user experience.
  • Component Guidance: Details the layout and interaction among various UI components such as pages, flows, site graph, and page objects.
  • Use Case: For developers working on the dashboard, it offers a step-by-step framework to implement the redesigned structure aligned with the specified architecture.

Quick Start

Use the dashboard-redesign skill to review the latest design and implementation guidelines for the dashboard layout.

Frequently Asked Questions about dashboard-redesign

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I redesign a dashboard layout with sidebar and tab navigation?▼

Redesigning a dashboard layout with sidebar and tab navigation involves defining a two-tier architecture, specifying layout components, interaction patterns, and data flow considerations to ensure scalable and user-friendly SPA navigation.

What is the best way to structure frontend architecture for a scalable dashboard UI?▼

Structuring frontend architecture for a scalable dashboard UI requires defining component integration, establishing a vertical sidebar with horizontal tabs, and mapping data flow considerations to support efficient navigation and graph modeling workflows.

Do I need SPA architecture knowledge to implement a dashboard redesign?▼

Yes, implementing a dashboard redesign requires a clear understanding of SPA architecture, component integration, and sidebar navigation, as these are foundational to defining layout components and interaction patterns.

How do I define interaction patterns for dashboard components like pages and flows?▼

Defining interaction patterns for dashboard components involves detailing the layout and interaction among pages, flows, site graphs, and page objects within a redesigned structural architecture for efficient user experience.

Can I use this dashboard architecture for UI testing workflows?▼

Yes, this dashboard architecture applies to UI testing and graph modeling workflows by providing structural architecture and design rationale for implementing a scalable, user-friendly interface with defined layout components.

Related Skills

Explore More Design & Creative Skills→
mauriciodelriomauriciodelrio
3

vite-routing-rules

Set up Vite React SPA routing with createBrowserRouter, auth guards, and Zod-validated search parameters.

Community
Intermediate
legoutlegout
3

marimo-pair

Execute code and manage cells in running marimo notebook kernels via HTTP API.

Community
Advanced
gyalamanch001agyalamanch001a

vercel-composition-patterns

Refactor React components into explicit compound components with lifted state.

Community
Intermediate
Mohamed-ElkahefMohamed-Elkahef

frontend-enhancer

Enhance Next.js frontends with pre-built UI components and design system resources.

Community
Intermediate