skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-legacy-grid

Implement a legacy 24-column grid system for Naive UI with gutter, offset, and push/pull.

8|3|Updated Mar 13, 2026
Search Tags:#layout#grid-system#row#column#naive-ui#push-pull#legacy-grid
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-legacy-grid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-legacy-grid
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-legacy-grid
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-legacy-grid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Legacy grid system enables you to implement traditional 24-column layouts in Naive UI when modern grid is overkill or unsupported.

Core Features & Use Cases

  • 24-Column grid with row and column structure for classic layouts
  • Gutter support, including horizontal and vertical gutters
  • Offset, push and pull for basic reordering and alignment
  • Simple API designed for quick migration of legacy projects
  • Use Case: Maintaining an old dashboard that relies on a 24-column grid while gradually migrating to modern Grid

Quick Start

Create a basic 24-column grid example with two equal 12-span columns in a single row.

Frequently Asked Questions about n-legacy-grid

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

FAQPage Schema
How do I implement a traditional 24-column grid layout in Naive UI?▼

Implement a traditional 24-column grid layout in Naive UI using a legacy grid system that provides classic row-and-column structures with support for offsets, gutters, and push/pull reordering.

Can I use push and pull to reorder columns in a legacy Naive UI grid?▼

Yes, you can use push and pull properties to reorder columns in a legacy Naive UI grid, enabling basic alignment adjustments and column shifting within the 24-column row structure.

What is the best way to migrate an old dashboard with a 24-column grid to Naive UI?▼

The best way to migrate an old dashboard to Naive UI is using a legacy grid skill with a simple API designed for quick migration of classic 24-column row-and-column layouts.

Does the legacy Naive UI grid support both horizontal and vertical gutters?▼

Yes, the legacy Naive UI grid supports gutters, allowing you to set both horizontal and vertical spacing between columns within the 24-column layout structure.

When should I use a legacy grid over the modern Naive UI grid?▼

Use a legacy grid over the modern Naive UI grid when maintaining older codebases that rely on classic 24-column layouts, or when the modern grid is overkill or unsupported for your project.

Related Skills

Explore More Software Engineering Skills→
arthtyagiarthtyagi
1

react-best-practices

Review React and Next.js TSX files for performance, accessibility, hook, and component-pattern issues.

Community
Advanced
ryantsairyantsai
434

dashboard-widget-builder

Create, repair, and redesign KKTerm Dashboard widgets with script widgets and live data.

Community
Advanced
jiaiyanjiaiyan
8

n-grid

Arrange responsive CSS Grid layouts with Grid and GridItem props in Naive UI.

Community
Advanced
ancolemanancoleman
503

designing-layouts

Design responsive layouts with CSS Grid, Flexbox, and breakpoints.

Community
Advanced