cpn-basic-combine

Guide AI usage of the UDesign Combine component for React form layouts.

1|Updated Apr 14, 2026

Search Tags:#react #combine #ai-skill #form-layout #ui-layout #u-design #shared-props

Ready to run

npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-combine

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: cpn-basic-combine
Source: https://github.com/UCloud-FE/udesign-cli/tree/main/skills/cpn-basic-combine
Command: npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-combine

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

帮助 AI 正确使用 UDesign Combine 组件来进行表单控件的布局组合，确保控件间对齐与一致性。

Core Features & Use Cases

提供 sharedProps 的用法示例以统一尺寸和共享参数，提升表单布局的一致性。
支持通过 Combine 组合多个控件来实现紧凑或分隔布局，并演示典型场景如搜索栏、表单行等。
提供示例和最佳实践来帮助开发者快速上手并在实际项目中应用。

Quick Start

Provide a minimal React example showing Combine wrapping two controls with a sharedProps size to illustrate proper usage.

Frequently Asked Questions about cpn-basic-combine

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

FAQPage Schema

How do I align multiple React form controls with consistent spacing?▼

To align multiple React form controls with consistent spacing, use the UDesign Combine component to arrange controls compactly. It ensures safe and predictable composition by specifying API parameters and shared props for uniform layout.

What is the best way to share props like size across multiple form controls?▼

The best way to share props like size across multiple form controls is using the sharedProps feature in UDesign Combine. This unifies dimensions and shared parameters to elevate form layout consistency across combined controls.

Can I use UDesign Combine for search bar layouts in React?▼

Yes, you can use UDesign Combine for search bar layouts in React. It supports combining multiple controls for compact or separated layouts, demonstrating typical scenarios like search bars and form rows with proper alignment.

How do I start using UDesign Combine to group form fields?▼

To start grouping form fields, use a minimal React example wrapping two controls in UDesign Combine with a sharedProps size. This illustrates proper usage and ensures compact alignment and consistent spacing for your form layout.

When should I not use component composition for form layouts?▼

You should not use component composition for form layouts when you cannot ensure safe and predictable composition. UDesign Combine requires specifying API parameters and usage guidelines to maintain alignment and consistent spacing across combined controls.