cpn-basic-spin

Guide React UI development using the UDesign Spin component as a wrapper div.

1|Updated Apr 14, 2026

Search Tags:#react #component #animation #wrapper #spin #udesign

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

AI 在使用 UDesign Spin 组件时容易出现错误的实现或缺失样式的问题。本 Skill 提供规范化的使用方法，确保 Spin 外层容器正确应用自转样式以及对父组件的原生属性透传。

Core Features & Use Cases

正确使用: 将 Spin 作为外层 div 包裹，确保自转样式生效，且可透传 style、className 等原生属性。
使用场景: 适用于加载状态的文本或内容块的 UI 场景，提升交互的视觉反馈。
可复用性: 提供一致的 Spin 容器行为，便于跨页面复用。

Quick Start

将 Spin 作为外层容器包裹需要自转的内容，并确保传入的原生属性（如 style、className）在外层 div 上生效。

Frequently Asked Questions about cpn-basic-spin

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

FAQPage Schema

How do I use a React Spin component as a wrapper for loading content?▼

To use a React Spin component correctly, wrap it as an outer div around the content block that needs a loading state, ensuring the rotation styles apply to the container and native props like style and className are forwarded.

Why does my Spin component not animate or apply styles in React?▼

A Spin component fails to animate when styles are not applied to the outer wrapper div. You must ensure the self-rotation styles target the outer element and that native props are properly forwarded to that container.

Can I pass native props like className and style to a Spin wrapper in React?▼

Yes, you can pass native props such as style and className to a Spin wrapper. The component forwards these attributes directly to the outer div element to ensure custom styling applies correctly to the loading container.

When do I need to use a Spin component in React UI development?▼

You need a Spin component in React UI development when displaying loading states for text or content blocks. It provides visual feedback during asynchronous interactions by wrapping the loading content with rotation styles.

What is the best way to structure a React loading spinner wrapper?▼

The best way to structure a React loading spinner wrapper is to separate automated code generation from manual curation blocks, providing a structured guide with import statements, basic usage, and demo sections for consistent behavior.