skills.rest
Fldicoahkiin
FldicoahkiinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

project-form-patterns

Provides implementation guidance for building and refactoring forms in AGhub desktop apps.

1|Updated Apr 5, 2026
Search Tags:#react#validation#forms#react-hook-form#form-patterns#heroui#editors
One-click install
npx skills add https://github.com/Fldicoahkiin/SYNCHRONICITY_Route_Planner --skill project-form-patterns-fldicoahkiin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: project-form-patterns
Source: https://github.com/Fldicoahkiin/SYNCHRONICITY_Route_Planner/tree/main/.agents/skills/project-form-patterns
Command: npx skills add https://github.com/Fldicoahkiin/SYNCHRONICITY_Route_Planner --skill project-form-patterns-fldicoahkiin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Form implementation guidance for the aghub desktop app. Use when building or refactoring forms in crates/desktop/src, especially HeroUI v3 + React forms, RHF integration, validation, custom editors, and error presentation. Triggers: MCP forms, settings dialogs, create/edit panels, TextField, FieldError, Select, react-hook-form, key-value editors, validation behavior.

Core Features & Use Cases

  • Guidance for implementing forms in the aghub desktop app using HeroUI v3, react-hook-form, and robust validation patterns.
  • Clear patterns for error presentation, custom editors, and common UI controls like TextField and Select.
  • Use Cases include creating settings dialogs, MCP forms, and create/edit panels.

Quick Start

Build or refactor a form in crates/desktop/src following this guide, applying HeroUI v3, RHF integration, and consistent validation.

Frequently Asked Questions about project-form-patterns

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

FAQPage Schema
How do I build forms with react-hook-form and HeroUI v3?▼

Build forms with react-hook-form and HeroUI v3 by maintaining a single form state with RHF, referencing official docs, and using HeroUI v3 components like TextField and Select for consistent validation and error presentation.

What is the best way to handle form validation and error presentation in React desktop apps?▼

Handle form validation and error presentation in React desktop apps by integrating react-hook-form to manage a single state and using HeroUI v3 FieldError components to display consistent validation messages across custom editors.

How do I create custom editors for key-value pairs in React?▼

Create custom editors for key-value pairs in React by applying react-hook-form integration patterns with HeroUI v3 controls, ensuring proper validation behavior and error presentation for each editor field.

Can I use react-hook-form for settings dialogs and MCP forms?▼

Yes, you can use react-hook-form for settings dialogs and MCP forms by leveraging its integration patterns with HeroUI v3 components to maintain single form state and ensure robust validation.

Why does my form state not stay synchronized when using custom editors?▼

Form state desynchronization with custom editors typically occurs when not maintaining a single form state with react-hook-form, which is required for proper validation and error presentation across HeroUI v3 components.

Related Skills

Explore More Software Engineering Skills→
wilfriedagowilfriedago
2

heroui-react

Develop React applications with HeroUI v3 components and Tailwind CSS v4.

Community
Intermediate
yonetim258852yonetim258852

form-design

Enforce helper text, placeholders, and validation across form inputs.

Community
Intermediate
beemanbeeman
12

heroui-react

Implement HeroUI v3 components in React with Tailwind CSS v4 theming.

Community
Intermediate
Wahidul123Wahidul123

forms

Validate and manage React form inputs with react-hook-form and TypeScript.

Community
Intermediate