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

naive-ui-design-typography

Document and enforce typography standards for Naive UI projects.

8|3|Updated Mar 13, 2026
Search Tags:#typography#design-system#css-variables#header#font-family#naive-ui#text-styles
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill naive-ui-design-typography
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: naive-ui-design-typography
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/naive-ui-design-typography
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill naive-ui-design-typography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Naive UI typography design specs provide a centralized guide to ensure consistent font families, sizes, line-heights, and header styles across Naive UI components for better readability and design coherence.

Core Features & Use Cases

  • Standard font-family stacks for cross-platform consistency
  • Standardized font sizes, weights, and line-heights
  • Predefined header and text components usage guidelines
  • Use Case: apply typography rules to a product page to achieve consistent typography across sections

Quick Start

Import and apply the typography design system to your Naive UI project by loading the CSS variables and typography components for consistent styling.

Frequently Asked Questions about naive-ui-design-typography

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

FAQPage Schema
How do I ensure consistent typography across Naive UI components?▼

Standardize Naive UI typography by applying centralized CSS variables and text tokens that enforce consistent font families, sizes, weights, and line-heights across all components and pages.

What font sizes and line-heights should I use in a Naive UI design system?▼

Use standardized font sizes, weights, and line-heights defined as CSS variables and text tokens to maintain cross-platform consistency and readability across Naive UI application sections.

How do I apply typography rules to a Naive UI product page?▼

Import the centralized typography design system and load predefined CSS variables with header components to apply consistent text styling across all Naive UI product page sections.

Does Naive UI provide predefined header components for text styling?▼

Yes, Naive UI typography standards include predefined header components and text style guidelines that integrate with centralized CSS variables to standardize header styling and ensure design coherence.

What is the best way to manage font-family stacks for cross-platform consistency in Naive UI?▼

Manage cross-platform font-family stacks in Naive UI through a centralized typography design spec using CSS variables to standardize font families across all components and platforms.

Related Skills

Explore More Design & Creative Skills→
wikimediawikimedia
7

codex-typography

Enforce canonical text styles across prototype UI typography.

Official
Basic
89jobrien89jobrien

figma-generate-design

Generate full-page Figma screens from code or descriptions using a shared design system.

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
jiaiyanjiaiyan
21

element-plus-design-typography

Define typography conventions and CSS variables for Element Plus components.

Community
Intermediate