ux-navigation-layout

Create page layouts with collapsible sidebars, navbars, and dark mode toggling.

Updated Mar 6, 2026

Search Tags:#ui #layout #frontend #design system #components #navigation #ux

Ready to run

npx skills add https://github.com/Holymir/liquid-arc --skill ux-navigation-layout

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ux-navigation-layout
Source: https://github.com/Holymir/liquid-arc/tree/main/.claude/skills/frontend-skills/ux-navigation-layout
Command: npx skills add https://github.com/Holymir/liquid-arc --skill ux-navigation-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides pre-built, reusable patterns for common UI elements like sidebars, navigation bars, page headers, and responsive layouts, ensuring consistency and accelerating development.

Core Features & Use Cases

Layout Structure: Implement master page layouts with collapsible sidebars and main content areas.
Navigation Components: Utilize ready-made components for sidebars, navbars, and profile menus with active states and dark mode toggling.
Data Display: Integrate filtering, pagination, and responsive card/feature grids for efficient data presentation.
Use Case: When building a new internal dashboard, use these patterns to quickly set up a consistent navigation structure, user profile dropdown, and a paginated list of items, ensuring a professional and user-friendly interface.

Quick Start

Apply the ux-navigation-layout skill to create a standard page layout with a sidebar and navbar.

Frequently Asked Questions about ux-navigation-layout

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

FAQPage Schema

How do I build a responsive frontend layout with a collapsible sidebar?▼

Build a responsive frontend layout by applying pre-built UI patterns that include a master page structure with a collapsible sidebar and main content area. This provides a consistent navigation structure and accelerates dashboard development.

What is the best way to implement dark mode and active states in a navigation bar?▼

The best way to implement dark mode and active states in a navigation bar is to use ready-made navigation components. These patterns provide built-in dark mode toggling and active state management for sidebars, navbars, and profile menus.

How do I add pagination and filtering to a responsive card grid?▼

Add pagination and filtering to a responsive card grid by integrating pre-built data display patterns. These UI components facilitate efficient data presentation and rapid development of user-friendly interfaces.

Can I use these UI layout patterns for an internal dashboard without external dependencies?▼

Yes, you can use these UI layout patterns for an internal dashboard without external dependencies. The skill provides self-contained, reusable components for navigation, layout, and user experience to ensure professional interface consistency.

Do I need a specific frontend framework to set up a page header and profile menu?▼

No specific frontend framework is required to set up a page header and profile menu. The skill provides reusable UI components and patterns that facilitate rapid development of consistent interfaces across your frontend environment.