skills.rest
UCloud-FE
UCloud-FEOFFICIAL
Explore all skills by this author →
GitHub

cpn-basic-card

Guide UDesign Card component usage with Header, Content, Action, and Footer subcomponents.

1|Updated Apr 14, 2026
Search Tags:#documentation#react#best-practices#design-system#card#ui-component
One-click install
npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-card
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cpn-basic-card
Source: https://github.com/UCloud-FE/udesign-cli/tree/main/skills/cpn-basic-card
Command: npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-card

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

该技能帮助 AI 更好地引导和使用 UDesign Card 组件，避免常见实现误差，提升协作效率。

Core Features & Use Cases

  • 指导 Card 组件的正确用法（Header、Content、Action、Footer、SubArea 等子组件的结构与组合）。
  • 提供设计约束与实现要点，确保组件风格保持一致且避免引入外部依赖。
  • Use Case: 在设计评审或代码评阅中，AI 可以输出符合设计规范的 Card 代码片段与最佳实践。

Quick Start

Provide a minimal Card example using Card.Header, Card.Content, and Card.Footer with UDesign components.

Frequently Asked Questions about cpn-basic-card

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

FAQPage Schema
How do I structure a React Card component with header, content, and footer?▼

To structure a React Card component, use designated subcomponents like Card.Header, Card.Content, and Card.Footer. This enforces a reusable approach by requiring these specific subareas to maintain UI consistency.

What is the best practice for maintaining design system consistency when building Card UI?▼

The best practice for Card UI consistency is restricting dependencies to your design system components and using a standardized subcomponent structure. This prevents implementation errors and avoids introducing external dependencies.

Can I use external UI libraries alongside UDesign Card components in React?▼

You cannot use external UI libraries alongside UDesign Card components, as this approach restricts dependencies to UDesign components only. Restricting dependencies ensures style consistency and avoids common implementation errors.

How does AI guidance improve React Card component generation?▼

AI guidance improves React Card generation by directing the AI on correct Card usage and structure. It streamlines building UI by enforcing a reusable approach across headers, content, actions, and footers to reduce implementation errors.

Why does my Card UI layout break when combining header, content, and actions?▼

Your Card UI layout may break if you do not use the required subcomponents like Card.Header, Card.Content, Card.Action, and Card.Footer correctly. Enforcing this specific subcomponent structure ensures proper composition and prevents layout errors.

Related Skills

Explore More Design & Creative Skills→
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
tapanshahtapanshah

atlassian-templates

Create and manage Jira and Confluence templates and blueprints.

Community
Intermediate
nguyenthienthanhnguyenthienthanh
24

nativewind-generator

Generate NativeWind-styled React Native components with TypeScript typings and dark mode support.

Community
Intermediate
Draft-OfficialDraft-Official

frontend-design

Create custom-designed frontend interfaces with detailed typography, color, motion, and layout.

Official
Advanced