skills.rest
ZHLX2005
ZHLX2005COMMUNITY
Explore all skills by this author →
GitHub

ui-component-library

Indexes usage guides and component API references for Ant Design, Element Plus, Naive UI, and Arco Design.

3|1|Updated Apr 14, 2026
Search Tags:#react#ui components#vue 3#ant design#element plus#arco design#naive ui
One-click install
npx skills add https://github.com/ZHLX2005/sl --skill ui-component-library-zhlx2005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-component-library
Source: https://github.com/ZHLX2005/sl/tree/main/skills/ui-component-library
Command: npx skills add https://github.com/ZHLX2005/sl --skill ui-component-library-zhlx2005

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend developers frequently need to look up component APIs, import paths, theming options, and integration details across multiple UI libraries, and switching between Ant Design, Element Plus, Naive UI, and Arco Design documentation wastes time and causes API confusion. ## Core Features & Use Cases - Library Routing Index: Maps React and Vue 3 projects to the right component library with a selection guide comparing ecosystem, TypeScript support, and design language. - Per-Library Reference Docs: Provides installation, import patterns, theming, internationalization, and FAQ docs for antd 6.x, Element Plus 2.x, Naive UI 2.44, and Arco Design 2.66. - Cross-Library Component Comparison: Topic docs (form, data-display, feedback, navigation, layout, others) show side-by-side API differences such as Form field naming (name vs prop vs path vs field). - Use Case: When a user asks how to build a validated form with a date range picker in a Vue 3 + TypeScript project, the skill routes to Naive UI or Element Plus references and returns working code with correct import paths. ## Quick Start Ask how to use a specific component such as a table or form in Ant Design, Element Plus, Naive UI, or Arco Design and load the matching reference doc.

Frequently Asked Questions about ui-component-library

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

FAQPage Schema
How do I choose between Ant Design, Element Plus, Naive UI, and Arco Design?▼

Choose based on framework and needs: Ant Design for React enterprise apps with the largest ecosystem, Arco Design for React with ByteDance design language, Element Plus for Vue 3 with the most complete components, and Naive UI for Vue 3 with strict TypeScript-first typing.

How do I import Ant Design components in a React project?▼

Install antd via npm, then import components directly like `import { Button } from 'antd'` and include 'antd/dist/reset.css'. Antd v5/v6 supports tree-shaking by default, so no extra plugins are needed for on-demand loading.

How do I set up on-demand imports for Element Plus in Vite?▼

Install unplugin-vue-components and unplugin-auto-import, then configure both plugins with ElementPlusResolver in vite.config.ts. After that you can use el-* components in templates without manual imports, and styles load automatically.

Does Naive UI support dark mode and theme customization?▼

Yes, Naive UI supports dark mode by importing darkTheme and passing it to NConfigProvider's theme prop. Custom branding is done through the theme-overrides prop, which accepts common tokens like primaryColor plus per-component overrides.

What is the difference between Form field naming in antd, Element Plus, Naive UI, and Arco?▼

The form field identifier differs per library: Ant Design uses Form.Item name, Element Plus uses el-form-item prop, Naive UI uses n-form-item path, and Arco Design uses Form.Item field. Validation rules syntax is otherwise similar across all four.

Why are my Arco Design styles not taking effect?▼

Arco styles fail when the global CSS import '@arco-design/web-react/dist/css/arco.css' is missing. For on-demand loading you also need babel-plugin-import or the official arco-plugin-style plugin to load per-component styles.

Related Skills

Explore More Software Engineering Skills→
symbiosikasymbiosika

frontend-app

Scaffold and edit Vue 3 components and views with Vite and Tailwind CSS v4.

Official
Advanced
matchojeckimatchojecki
1

backend-ui-design

Standardize backend UIs using @open-mercato/ui components like Page, DataTable, and CrudForm.

Community
Advanced
VirtoCommerceVirtoCommerce
2

qa-storybook

Detect visual and behavioral regressions in Storybook components through structured QA testing.

Official
Advanced
Pixel-Process-UGPixel-Process-UG
1

ui-design-system

Create scalable design systems with token-first architecture and Tailwind CSS v4.

Official
Advanced