cleen-ui-forms

Create forms and data collection UIs with @cleen/ui components.

Updated Mar 4, 2026

Search Tags:#developer tools #state management #input validation #forms #ui components #cleen-ui

Ready to run

npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-forms

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: cleen-ui-forms
Source: https://github.com/shawnlivermore/cleen-ui-skills/tree/main/skills/cleen-ui-forms
Command: npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-forms

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of creating user interfaces for data collection, eliminating the need to manually manage form state, validation, and component rendering.

Core Features & Use Cases

Comprehensive Component Library: Provides ready-to-use input components like Input, Select, DatePicker, Switch, CheckboxGroup, and more.
State Management: Integrates useForm for efficient form state tracking and updates.
Validation: Offers useValidation for robust per-field error handling and display.
Layout Helpers: Includes FormGroup for consistent form row structuring.
Use Case: Quickly build a complex settings page, an edit modal for user profiles, or a multi-step onboarding wizard, ensuring a consistent and user-friendly experience.

Quick Start

Use the cleen-ui-forms skill to create a form with fields for name and email, including validation for both.

Frequently Asked Questions about cleen-ui-forms

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

FAQPage Schema

How do I build forms with state management and input validation?▼

To build forms with state management and input validation, use the cleen-ui-forms skill to leverage `useForm` for state tracking and `useValidation` for per-field error handling, eliminating manual state management. It provides ready-to-use input components like `Input`, `Select`, and `DatePicker`.

What is the best way to create a multi-step wizard or settings panel UI?▼

The best way to create a multi-step wizard or settings panel UI is using the cleen-ui-forms skill, which offers `FormGroup` layout helpers for consistent row structuring and comprehensive data collection components to ensure a user-friendly experience without manual rendering.

Can I use this approach for edit dialogs and filter forms?▼

Yes, you can use this approach for edit dialogs, filter forms, settings panels, and multi-step wizards. The cleen-ui-forms skill enables the creation of any UI requiring user input by providing ready-to-use components like `Switch`, `CheckboxGroup`, and `DatePicker`.

How do I handle per-field errors when creating data collection UIs?▼

To handle per-field errors when creating data collection UIs, use the `useValidation` hook provided by the cleen-ui-forms skill. It offers robust error handling and display capabilities, ensuring consistent validation across form components without manual error tracking logic.

Do I need to manually manage component rendering for form layouts?▼

No, you do not need to manually manage component rendering for form layouts. The cleen-ui-forms skill includes `FormGroup` layout helpers for consistent form row structuring and integrates `useForm` to handle efficient form state updates automatically.