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

cpn-basic-time-picker

Guide UDesign TimePicker integration with size, format, and state configurations.

1|Updated Apr 14, 2026
Search Tags:#react#code-generation#timepicker#component-usage#ui-design-system#time-format#u-design
One-click install
npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-time-picker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cpn-basic-time-picker
Source: https://github.com/UCloud-FE/udesign-cli/tree/main/skills/cpn-basic-time-picker
Command: npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-time-picker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TimePicker usage guidance helps AI correctly use the UDesign TimePicker component by providing consistent usage patterns and examples when the component is required in UI scenarios.

Core Features & Use Cases

  • Import and render TimePicker with configurable size, format, and state (nullable, disabled) to cover common scenarios.
  • Illustrate typical usage patterns within UDesign-based projects and ensure adherence to design system constraints and coding standards.
  • Provide quick references for API expectations and best practices to speed up automated code generation and human review.

Quick Start

Load a TimePicker example with size 'md' and format 'HH:mm:ss' to verify basic rendering and event handling.

Frequently Asked Questions about cpn-basic-time-picker

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

FAQPage Schema
How do I implement a TimePicker in a React UI design system?▼

To implement a TimePicker in a React UI design system, import the UDesign component and configure attributes like size, format, and state to ensure consistent rendering and event handling in your application.

What time formats can I use with the UDesign TimePicker component?▼

The UDesign TimePicker component supports configurable time formats such as 'HH:mm:ss'. You can specify the desired string format to control how time values are displayed and parsed within your UI code.

Can I set the TimePicker to be nullable or disabled in my application?▼

Yes, the TimePicker can be set to nullable or disabled states. This allows you to handle scenarios where no time is selected or restrict user interaction based on specific UI conditions.

How does AI code generation ensure safe usage patterns for the TimePicker?▼

AI code generation ensures safe usage patterns by following predefined import conventions, API expectations, and design system constraints, resulting in maintainable and consistent TimePicker implementations.

What are the limitations when integrating TimePicker for automated code generation?▼

Limitations involve adhering strictly to UDesign-based project constraints and coding standards. Deviating from established API expectations or design system guidelines may cause inconsistent component behavior.

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
salmanrranasalmanrrana
7

TanStack Forms

Integrate TanStack Forms with React for form construction, validation, and submission.

Community
Advanced
UCloud-FEUCloud-FE
1

cpn-basic-date-picker

Configure UDesign DatePicker props for React form UIs.

Official
Advanced
PiercingXXPiercingXX
1

motion-frames

Generate self-contained HTML motion posters with inline CSS animations.

Community
Basic