cpn-basic-theme-provider

Wrap React applications with ThemeProvider from @ucloud-fe/react-components.

1|Updated Apr 14, 2026

Search Tags:#theming #react #best-practices #jsx #ui-components #design-tokens #theme-provider

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

ThemeProvider usage can be error-prone and inconsistent; this skill guides AI to apply theming consistently across a React app by wrapping the root and following design token conventions.

Core Features & Use Cases

Provide correct import and usage patterns for ThemeProvider from @ucloud-fe/react-components.
Demonstrate how to customize tokens and switch themes at runtime in a safe, JS/JSX environment.
Outline best practices and constraints for using UDesign theming without external libraries.

Quick Start

在应用入口处导入 ThemeProvider 并包裹整个应用，以应用自定义主题。

Frequently Asked Questions about cpn-basic-theme-provider

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

FAQPage Schema

How do I apply ThemeProvider to standardize theming across a React app?▼

To apply ThemeProvider theming, import ThemeProvider from @ucloud-fe/react-components and wrap your entire application at the root entry point. This ensures consistent design tokens and theme rendering across all UI components.

What's the best way to customize design tokens in a React JSX environment?▼

The best way to customize design tokens is by configuring the ThemeProvider in pure JSX. This approach avoids TypeScript and external libraries, safely customizing tokens and switching themes at runtime within a standard JS environment.

Can I use TypeScript or external libraries with @ucloud-fe/react-components theming?▼

No, applying ThemeProvider theming requires pure JSX code and explicitly avoids TypeScript and external libraries. You must generate standard JavaScript and rely solely on the @ucloud-fe/react-components package for UDesign theming.

Why does my ThemeProvider setup fail to render components under a consistent theme?▼

ThemeProvider setup fails if the root application is not properly wrapped or if external libraries interfere. Ensure correct import from @ucloud-fe/react-components and generate pure JSX to maintain consistent design token conventions.

When do I need to wrap an application with a ThemeProvider?▼

You need to wrap an application with ThemeProvider when standardizing theming across the app. This is required to customize design tokens, apply UDesign theming constraints, and render all UI components under a single consistent theme.