skills.rest
qashsolutions
qashsolutionsCOMMUNITY
Explore all skills by this author →
GitHub

skill-layout-system

Replace a 256px sidebar with responsive bottom navigation and icon rail in Next.js dashboards.

1|Updated Jun 18, 2025
Search Tags:#layout#navigation#shadcn/ui#nextjs#responsive#tailwind#icon-rail
One-click install
npx skills add https://github.com/qashsolutions/myhealthguide --skill skill-layout-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skill-layout-system
Source: https://github.com/qashsolutions/myhealthguide/tree/main/.claude/skills/skill-layout-system
Command: npx skills add https://github.com/qashsolutions/myhealthguide --skill skill-layout-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Core responsive layout system replacing the legacy 256px sidebar with a mobile-friendly bottom navigation and a left icon rail for tablet/desktop, enabling consistent navigation across breakpoints.

Core Features & Use Cases

  • Mobile devices use a bottom navigation bar and minimal header to maximize content space.
  • Tablet and desktop use a 56px left icon rail with a minimal header, preserving existing routes and wrappers.
  • Works with Tailwind CSS + shadcn/ui patterns, Lucide icons, and project layout constraints.

Quick Start

Modify the dashboard layout to remove the sidebar, introduce BottomNav for mobile and IconRail for tablet/desktop, and adjust padding to accommodate the new navigation structure.

Frequently Asked Questions about skill-layout-system

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

FAQPage Schema
How do I replace a 256px sidebar with a responsive icon rail and bottom navigation in Next.js?▼

To replace a 256px sidebar with responsive navigation, remove the sidebar component and introduce a 56px left icon rail for tablet/desktop alongside a bottom navigation bar for mobile, adjusting content padding to fit the new layout structure.

What is the best way to make a dashboard layout adaptive across mobile, tablet, and desktop breakpoints?▼

An adaptive dashboard layout uses a bottom navigation bar with a minimal header for mobile devices, and transitions to a 56px left icon rail for tablet and desktop screens to maximize content space while preserving route wrappers.

Does this responsive layout approach work with Tailwind CSS and shadcn/ui components?▼

Yes, the responsive layout system uses Tailwind CSS and shadcn/ui patterns. It also incorporates Lucide icons and maintains existing project layout constraints like ProtectedRoute and FCMProvider wrappers.

Can I refactor my Next.js dashboard navigation without modifying authentication logic or API calls?▼

Yes, you can refactor dashboard navigation without touching authentication logic, API calls, payments, or database queries. The layout system strictly preserves existing wrappers like ElderProvider and FCMProvider during the UI update.

How do I set up a minimal header and bottom nav for mobile dashboards?▼

To set up mobile dashboard navigation, implement a bottom navigation bar paired with a minimal header. This configuration maximizes vertical content space on mobile devices while keeping navigation accessible.

Related Skills

Explore More Software Engineering Skills→
JordiNodeJSJordiNodeJS

component-development

Create accessible React 19 UI components with Shadcn UI and Tailwind CSS 4.

Community
Intermediate
raphaelmansraphaelmans

adapt

Create context-driven UI adaptation plans with responsive layouts and interaction changes.

Community
Advanced
billydeeii136billydeeii136

ui-styling

Generate UI components using shadcn/ui and Tailwind CSS utility classes.

Community
Intermediate
Impertio-StudioImpertio-Studio

shadcn-syntax-sidebar

Build shadcn ui sidebar navigation shells with correct composition and cookie persistence.

Official
Intermediate