n-thing

Name: n-thing
Availability: InStock
Author: jiaiyan

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

Ready to run

npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-thing

💬 Prompt for ChatGPT / Claude Chat▼

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.