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

cpn-basic-checkbox

Integrate and render UDesign Checkbox components in React projects.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

使用 AI 协助正确实现 UDesign 的 Checkbox 组件，避免风格不一致、实现错误，以及重复查找规范的时间成本。

Core Features & Use Cases

  • 提供符合 UDesign 规范的 Checkbox 使用示例与属性列表，确保一致性和可维护性。
  • 覆盖常见场景（必选/禁用、大小、样式风格等）的演示与最佳实践，方便快速落地。
  • 提供设计与实现中的注意事项，帮助团队在表单场景保持一致性。

Quick Start

请给出一个符合 UDesign 规范的最小可运行 Checkbox 使用示例。

Frequently Asked Questions about cpn-basic-checkbox

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

FAQPage Schema
How do I implement a React checkbox component that follows UDesign guidelines?▼

To implement a UDesign checkbox in React, use the official component specifications to ensure consistent behavior, styling, and accessibility across forms while avoiding external UI libraries.

What is the best way to handle checkbox states like disabled or required in a React form?▼

Handling checkbox states like disabled or required in a React form requires applying specific UDesign properties and best practices to maintain visual consistency and accessibility compliance.

Can I use other external UI libraries alongside the UDesign checkbox component?▼

You cannot use external UI libraries with the UDesign checkbox; you must follow project coding conventions and use only the provided UDesign component to ensure style consistency.

How do I ensure accessibility compliance when rendering checkboxes in React?▼

Ensuring accessibility compliance for React checkboxes involves following UDesign integration guidelines, which specify proper rendering behavior, semantic styling, and form constraints.

Why does my UI checkbox styling look inconsistent across different forms?▼

Your UI checkbox styling looks inconsistent due to deviating from UDesign specifications; applying the official component properties and usage constraints standardizes the visual output.

What are the constraints for using UDesign checkbox components in frontend development?▼

Constraints for using UDesign checkbox components include avoiding external UI libraries, adhering to project coding conventions, and matching the specified behavior for various sizes and styles.

Related Skills

Explore More Software Engineering Skills→
UCloud-FEUCloud-FE
1

cpn-basic-badge

Apply UDesign Badge component settings in React UI projects.

Official
Intermediate
kimjuyoung1127kimjuyoung1127

dangapp-form-step

Implement multi-step forms with Zustand and React Hook Form.

Community
Intermediate
kreuzberg-devkreuzberg-dev
836

form-element-handling

Convert HTML form elements into Markdown representations with labels.

Official
Intermediate
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced