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

n-descriptions

Display structured key-value data in a compact, readable layout.

8|3|Updated Mar 13, 2026
Search Tags:#layout#vue#read-only#ui-components#key-value#descriptions#naive-ui
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-descriptions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-descriptions
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-descriptions
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-descriptions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Descriptions component provides a clean and adaptable way to present key-value data in Naive UI, reducing markup boilerplate for detail panels and read-only views.

Core Features & Use Cases

  • Flexible Layout: control the number of columns and how labels align and wrap.
  • Bordered Mode: render borders around data blocks for a dense, card-like appearance.
  • Column Span: allow items to span multiple columns to emphasize important fields.
  • Size Options: choose small, medium, or large descriptions to match your UI rhythm.
  • Custom Styling: independently style labels and content for visual distinction.
  • Header Support: optionally add a header slot for titles or actions.

Quick Start

Create an n-descriptions instance and populate it with n-descriptions-item entries to display your data in a structured key-value layout.

Frequently Asked Questions about n-descriptions

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

FAQPage Schema
How do I display key-value data in a Vue read-only dashboard?▼

To display key-value data in a Vue read-only dashboard, use a descriptions component to render structured entries in a compact layout, reducing markup boilerplate for detail panels. You populate it with item entries for clear presentation.

Can I customize the column layout for a Naive UI detail panel?▼

Yes, you can customize the column layout for a Naive UI detail panel by adjusting the column count and label alignment. You can also enable bordered mode for a dense, card-like appearance and allow specific items to span multiple columns.

What is the best way to structure labeled user profile data in Naive UI?▼

The best way to structure labeled user profile data in Naive UI is using a descriptions component, which supports flexible column counts, sizing options, and independent styling for labels and content to ensure visual distinction.

Does the Naive UI descriptions component support a header slot for titles?▼

Yes, the Naive UI descriptions component supports an optional header slot. This allows you to add titles or action elements directly into the layout for configuration panels and read-only views.

How do I change the sizing of key-value blocks in a Vue configuration panel?▼

You change the sizing of key-value blocks in a Vue configuration panel by selecting small, medium, or large size options. This matches your UI rhythm while maintaining a clean and adaptable presentation of labeled data.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

n-slider

Expose a Vue 3 n-slider component with v-model binding for range and single-value selection.

Community
Intermediate
mhattingpetemhattingpete
657

dashboard-creator

Generate HTML dashboards with KPI cards, SVG charts, and data tables.

Community
Basic
jiaiyanjiaiyan
8

n-form

Validate and manage user input in Naive UI forms.

Community
Advanced
tonehqtonehq
11

frontend_cards

Generate a card-grid listing page with split components for the Tone frontend.

Official
Advanced