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

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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.