Skills
.Work. You
Rest

naive-ui-design-layout

Community

Build responsive layouts with Naive UI components.

Design & Creative#layout#responsive#ui-design#grid#naive-ui#flex
Authorjiaiyan
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Naive UI projects often struggle with establishing a consistent, responsive layout across pages. This Skill provides a cohesive layout system (Grid, Flex, Space, and Layout) to standardize page composition and accelerate UI development.

Core Features & Use Cases

  • Grid System (n-grid) with a 24-column baseline for responsive layouts.
  • Flex Component (n-flex) for precise horizontal and vertical alignment.
  • Space Component (n-space) for uniform spacing between elements.
  • Layout Components (n-layout family) for header, content, and footer with optional sider support.
  • Use Cases: dashboards, admin panels, documentation pages, and marketing layouts, all benefiting from consistent structure and breakpoints.
  • Responsive behavior: breakpoint-aware props and adaptive sizing across xs to xxl.

Quick Start

Create a simple two-column dashboard layout using n-grid for structure and n-layout for header, content, and footer.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: naive-ui-design-layout
Download link: https://github.com/jiaiyan/naive-ui-skills/archive/main.zip#naive-ui-design-layout

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.