cpn-basic-pagination

Generate UDesign Pagination component configurations for React data lists.

1|Updated Apr 14, 2026

Search Tags:#react #ui-design #pagination #design-system #component-usage #pagination-demo

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

AI users often struggle to correctly integrate the UDesign Pagination component in React apps, leading to inconsistent UI and incorrect pagination behavior.

Core Features & Use Cases

Clear usage pattern for the Pagination API (total, pageSize, current, simple, etc.) within UDesign guidelines.
Demonstrates rendering Pagination in common UI scenarios such as data lists, tables, and responsive layouts.
Use Case: when building an itemized list that requires correct page navigation and total/item size display, the AI can generate appropriate Pagination configurations.

Quick Start

Provide a minimal React Pagination example that follows UDesign guidelines.

Frequently Asked Questions about cpn-basic-pagination

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

FAQPage Schema

How do I implement pagination in a React data table using UDesign?▼

To implement pagination in a React data table, configure the UDesign Pagination API by setting total, pageSize, and current properties to render correct page navigation and item size displays.

What is the correct way to handle varying total items and page sizes in a React list?▼

Handling varying total items and page sizes requires passing dynamic total and pageSize values to the Pagination component, ensuring the UI accurately reflects the current dataset boundaries.

Can I use external libraries with UDesign Pagination for React projects?▼

No, you cannot use external libraries with UDesign Pagination. The component enforces requirements to avoid external dependencies and strictly follow project guidelines for UI consistency.

How do I display a simple pagination layout in React without custom styling?▼

To display a simple pagination layout, utilize the simple property within the UDesign Pagination API, which provides a minimal, standard UI presentation suitable for responsive layouts.

Why does my React pagination component show incorrect page navigation behavior?▼

Incorrect pagination behavior often occurs when the API is misconfigured. Ensure you follow UDesign guidelines to properly sync current, total, and pageSize states with your data list.