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

n-thing

Display structured entity information using a slot-driven layout.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

n-thing provides a flexible layout to present an entity with avatar, header, description, content, and actions in a cohesive card-like structure, simplifying consistent UI composition.

Core Features & Use Cases

  • Flexible slots for avatar, header, header-extra, description, content, footer, and action to compose rich entity cards.
  • Supports content-indented layout for alignment with avatar and header, and easy composition with other components like n-card or n-descriptions.
  • Real-world usage includes user profiles, product listings, or any entity summary that benefits from structured sections.

Quick Start

Create an n-thing with an avatar and header, then add a description and content to display a concise entity summary.

Frequently Asked Questions about n-thing

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

FAQPage Schema
How do I display structured entity information with avatar and header sections in Vue?▼

You can display structured entity information by using a slot-driven layout component that provides named slots for avatar, header, description, content, and actions, allowing flexible composition of card-like presentations in Vue.

Can I use naive-ui components to build a user profile card with indented content?▼

Yes, you can build a user profile card with indented content by applying a layout component that supports content indentation to align with the avatar and header, ensuring consistent UI composition alongside other naive-ui elements.

What is the best way to compose a product listing card with avatar, description, and action slots?▼

The best way to compose a product listing card is using a props-based API for titles alongside named slots for avatar, description, content, footer, and action, simplifying consistent entity summary composition.

Does this entity presentation layout work with n-card or n-descriptions for dashboard summaries?▼

Yes, the entity presentation layout is designed for easy composition with components like n-card or n-descriptions, enabling structured sections for dashboards and other card-like presentations requiring cohesive alignment.

Why use a slot-driven layout for presenting entity summaries instead of building a custom card?▼

Using a slot-driven layout for entity summaries solves the problem of inconsistent UI composition by providing predefined sections like header-extra and footer, ensuring cohesive alignment without building custom card structures from scratch.

Related Skills

Explore More Design & Creative Skills→
jiaiyanjiaiyan
8

naive-ui-i18n

Configure Naive UI internationalization with NConfigProvider and createLocale for Vue 3 apps.

Community
Advanced
jiaiyanjiaiyan
8

n-card

Create configurable Naive UI card components with slots and props.

Community
Intermediate
jiaiyanjiaiyan
8

n-flex

Configure n-flex component props for responsive Vue layouts.

Community
Intermediate
jiaiyanjiaiyan
8

naive-ui-design-layout

Design responsive Naive UI layouts using Grid, Flex, Space, and Layout components.

Community
Intermediate