cpn-basic-progress

Guides correct use of the UDesign Progress component in React projects.

1|Updated Apr 14, 2026

Search Tags:#ui #react #design-system #progress #token #component-usage

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

AI 面对 Progress 组件时缺乏明确的用法，容易产生错误实现。本 Skill 提供清晰的使用场景、参数与示例，确保一致性与可维护性。

Core Features & Use Cases

引导引入和基本用法：如何在页面中渲染 line/circle 类型的 Progress。
API 参数与设计控件：styleType、percent、color、format、strokeWidth 等。
设计令牌与实践：使用 Progress 的符号与风格在设计系统中的一致性。

Quick Start

在一个页面中引入 Progress 组件并显示一个简单的百分比示例。

Frequently Asked Questions about cpn-basic-progress

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

FAQPage Schema

How do I render a line or circle progress component in a React project?▼

To render a progress component in React, import the Progress component into your page and configure the type prop to display either a line or circle progress indicator, ensuring proper percentage visualization and UI consistency.

What API parameters are available for customizing progress bar appearance?▼

You can customize the progress bar appearance using API parameters including styleType, percent, color, format, and strokeWidth. These props allow you to control the visual style, progress value, color scheme, text formatting, and line thickness respectively.

When should I use design tokens with the Progress component?▼

Use design tokens with the Progress component when you need to maintain UI consistency within a design system. Design tokens enforce unified styling symbols and visual styles, ensuring that progress indicators align with broader design system standards across your React application.

Does the UDesign Progress component work without external dependencies?▼

Yes, the UDesign Progress component operates without external dependencies, requiring only the core React environment. You can directly import and use the component in your React project without installing additional libraries or packages.

Why does my Progress component implementation lack UI consistency?▼

Your Progress implementation lacks consistency if import patterns, props, or design tokens deviate from the documented standards. Align your styleType, color, and strokeWidth parameters with the design system specifications to enforce UI consistency and maintainability.