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

n-card

Create configurable Naive UI card components with slots and props.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Card-based layouts often require repetitive boilerplate to achieve consistent visuals and behavior. The n-card skill provides a reusable, slot-driven Card component to standardize content containers across UIs built with Naive UI.

Core Features & Use Cases

  • Slot System: cover, header, header-extra, default, footer, and action slots for flexible composition.
  • Styling & Layout: bordered or borderless, hoverable shadows, embedded styling, and content-scrollable regions.
  • Sizes & API: supports multiple sizes (small to huge) and a rich props/slots API for customization.
  • Use Cases: dashboards, panels, forms, image cards, and modal content wrappers.

Quick Start

Create a simple n-card with a header, content, and footer to display a user profile.

Frequently Asked Questions about n-card

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

FAQPage Schema
How do I build consistent card-based layouts in Vue3 without repetitive boilerplate?▼

To build consistent card-based layouts in Vue3, use a slot-driven component to standardize content containers across Naive UI interfaces, eliminating repetitive boilerplate. It provides configurable headers, covers, and footers for dashboards and panels.

What slots are available for composing content containers in a Vue3 design system?▼

Available slots for composing content containers include cover, header, header-extra, default, footer, and action slots. These slots enable flexible composition and customization for dashboards, data panels, forms, and image cards within your Vue3 design system.

Can I configure card sizes and borders for data panels using Naive UI?▼

Yes, you can configure card sizes and borders for data panels using Naive UI. The component supports multiple sizes from small to huge, along with bordered, borderless, hoverable shadows, and embedded styling options for various panel requirements.

How do I create scrollable content regions within a Vue3 card component?▼

To create scrollable content regions within a Vue3 card component, utilize the content-scrollable configuration. This feature allows you to build data panels and forms with fixed headers while the main content area scrolls independently.

Does the n-card skill support segmented layouts for dashboards?▼

Yes, the n-card skill supports segmented layouts for dashboards. It provides a rich API for props and slots, enabling various card configurations including segmented sections, embedded styling, and hoverable shadows specifically for dashboard and panel use cases.

Related Skills

Explore More Software Engineering Skills→
windyskywindysky

moai-domain-uiux

Establish domain UI/UX foundations with design tokens and theming for React and Vue.

Community
Basic
jiaiyanjiaiyan
21

el-skeleton

Display skeleton placeholders during asynchronous content loading in Vue components.

Community
Intermediate
tonehqtonehq
11

frontend_cards

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

Official
Advanced
coastdigitalgroupcoastdigitalgroup
2

container-queries-implementation

Implement container-aware UI components using @container queries and container-relative units.

Official
Intermediate