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

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
One-click install
npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-pagination
Or copy as Structured Prompt for Agent▼
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.

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
abdullahbeamabdullahbeam
2

hubspot-list-deals

Retrieve paginated HubSpot CRM deal records with cursor-based pagination.

Community
Intermediate
kirakuiinkirakuiin

obsidian-bases

Define and edit Obsidian .base files with YAML filters, formulas, and views.

Community
Intermediate
doanchienthangdevdoanchienthangdev
4

designing-frontend-patterns

Design scalable React component architectures with compound components, custom hooks, and state machines.

Community
Intermediate