skills.rest
Holymir
HolymirCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/Holymir/liquid-arc --skill ux-navigation-layout
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
SSujitXSSujitX
11

Frontend Development

Provides architectural guidance for authenticated Vite and React dashboard interfaces.

Community
Intermediate
angelriera-devangelriera-dev

web-design-methodology

Standardize production-grade HTML/CSS with BEM naming, semantic tokens, and responsive breakpoints.

Community
Advanced
sgcarstrendssgcarstrends
21

component-docs

Generate or update UI component documentation with props tables and Storybook stories.

Official
Intermediate