dashboard-shell-setup

Set up a dashboard shell with resizable sidebar and two-level navigation.

Updated Aug 23, 2026

Search Tags:#responsive design #UI/UX #Next.js #navigation #dashboard #shadcn/ui #sidebar

One-click install

npx skills add https://github.com/nathanonn/next-sololedger --skill dashboard-shell-setup

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: dashboard-shell-setup
Source: https://github.com/nathanonn/next-sololedger/tree/main/.claude/skills/dashboard-shell-setup
Command: npx skills add https://github.com/nathanonn/next-sololedger --skill dashboard-shell-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-resizable-panels, lucide-react, shadcn/ui, and includes references (resource) components.

What problem does it solves? Building a flexible, responsive, and user-friendly dashboard layout from scratch is time-consuming. This skill provides a complete, production-ready dashboard shell with a resizable sidebar, two-level navigation, and mobile support, saving development effort and ensuring a polished user experience.

Core Features & Use Cases:

Resizable & Collapsible Sidebar: Implement a desktop-friendly sidebar with drag-to-resize and collapse-to-icon modes, persisting user preferences.
Mobile-Responsive Navigation: Provide seamless navigation on mobile devices via a drawer (Sheet component).
Use Case: Quickly set up the main protected layout for a new SaaS application, complete with user-specific UI preferences and support for multi-tenant organization switching.

Quick Start: Set up a dashboard shell with a resizable sidebar and two-level navigation for my Next.js application.