Configure UDesign Compact layouts for connected controls in pure JSX.
npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-compact
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
帮助 AI 正确使用 UDesign Compact 组件以实现控件之间的连接式布局，避免常见的排版与样式偏差。
在需要使用 Compact 时，请向 AI 提供一个包含两个控件并排布局的 JSX 示例。
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
xobotyiEnforce React component discipline for pure components, minimal state, and correct hook usage.
rattamnoonAssess and improve layout spacing and visual rhythm across web interfaces.
UCloud-FEGuide AI usage of the UDesign Combine component for React form layouts.
Legal-and-GeneralApply the Canopy lgRowGap directive to standardize row-gap spacing in Angular grid and flex layouts.
