cpn-basic-compact

Configure UDesign Compact layouts for connected controls in pure JSX.

1|Updated Apr 14, 2026

Search Tags:#layout #react #jsx #design-guidelines #compact #uDesign

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

帮助 AI 正确使用 UDesign Compact 组件以实现控件之间的连接式布局，避免常见的排版与样式偏差。

Core Features & Use Cases

提供引导性示例，帮助在表单或工具面板中将多个控件水平并排排列。
规定导入方式、共享属性以及子控件的组合模式，确保符合设计规范。
Use Case: 在一个包含 Select 和 Input 的表单中，通过 Compact 将两个控件对齐并共享尺寸约束。

Quick Start

在需要使用 Compact 时，请向 AI 提供一个包含两个控件并排布局的 JSX 示例。

Frequently Asked Questions about cpn-basic-compact

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

FAQPage Schema

How do I align multiple React controls on a single row using JSX?▼

To align multiple React controls on a single row, use the UDesign Compact component to render connected layouts. It enforces horizontal alignment and shared sizing constraints for multiple controls in pure JSX.

What is the best way to connect a Select and Input component horizontally in a form?▼

The best way to connect a Select and Input component horizontally is using the UDesign Compact layout. It aligns the controls and allows them to share sizing constraints to prevent styling deviations.

Can I use TypeScript with the UDesign Compact component for connected layouts?▼

No, you cannot use TypeScript with the UDesign Compact component for connected layouts. The component enforces the use of pure JSX code and requires strict adherence to design guidelines.

How do sharedProps work when configuring nested components in a compact layout?▼

SharedProps in a compact layout allow multiple nested controls to share sizing and property constraints. Configuring sharedProps ensures all connected controls align properly without individual styling overrides.

Why does my connected control layout have styling deviations in React?▼

Connected control layouts have styling deviations when you bypass the UDesign Compact component. Applying manual styles instead of using the designated compact component and its design guidelines causes alignment errors.