Agent skill

Project Form Patterns

Form implementation guidance for the aghub desktop app. An agent skill from AkaraChen/aghub.

MITAuto-check passedDevelopment

Install Project Form Patterns

skills CLI

$ npx skills add AkaraChen/aghub --skill project-form-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install AkaraChen/aghub project-form-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/AkaraChen/aghub.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/project-form-patterns .claude/skills/project-form-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "project-form-patterns" agent skill from https://github.com/AkaraChen/aghub/tree/main/.agents/skills/project-form-patterns into .claude/skills/project-form-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "project-form-patterns", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/AkaraChen/aghub/tree/main/.agents/skills/project-form-patterns

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add AkaraChen/aghub --skill project-form-patterns -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install AkaraChen/aghub project-form-patterns --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/AkaraChen/aghub.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/project-form-patterns .agents/skills/project-form-patterns && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "project-form-patterns" agent skill from https://github.com/AkaraChen/aghub/tree/main/.agents/skills/project-form-patterns into .agents/skills/project-form-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "project-form-patterns", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add AkaraChen/aghub --skill project-form-patterns -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install AkaraChen/aghub project-form-patterns --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/AkaraChen/aghub.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/project-form-patterns .cursor/skills/project-form-patterns && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "project-form-patterns" agent skill from https://github.com/AkaraChen/aghub/tree/main/.agents/skills/project-form-patterns into .cursor/skills/project-form-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "project-form-patterns", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/AkaraChen/aghub.git --path .agents/skills/project-form-patterns

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add AkaraChen/aghub --skill project-form-patterns -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install AkaraChen/aghub project-form-patterns --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/AkaraChen/aghub.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/project-form-patterns .gemini/skills/project-form-patterns && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "project-form-patterns" agent skill from https://github.com/AkaraChen/aghub/tree/main/.agents/skills/project-form-patterns into .gemini/skills/project-form-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "project-form-patterns", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install AkaraChen/aghub project-form-patterns

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add AkaraChen/aghub --skill project-form-patterns -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/AkaraChen/aghub.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/project-form-patterns .github/skills/project-form-patterns && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "project-form-patterns" agent skill from https://github.com/AkaraChen/aghub/tree/main/.agents/skills/project-form-patterns into .github/skills/project-form-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "project-form-patterns", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add AkaraChen/aghub --skill project-form-patterns -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install AkaraChen/aghub project-form-patterns --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/AkaraChen/aghub.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/project-form-patterns .opencode/skills/project-form-patterns && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "project-form-patterns" agent skill from https://github.com/AkaraChen/aghub/tree/main/.agents/skills/project-form-patterns into .opencode/skills/project-form-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "project-form-patterns", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: project-form-patterns
GitHub stars: 272
Token cost: ~1.1k tokens
SKILL.md length: 466 words
Files: 1
Skills in repo: 2
Repo updated: Oct 5, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Form implementation guidance for the aghub desktop app. An agent skill from AkaraChen/aghub.

Refactoring forms in crates/desktop/src
SKILL.md covers Source of Truth, Default Stack, Validation Behavior and Error Rendering, plus 4 more sections
Calls bun; reaches v3.heroui.com
Especially HeroUI v3 + React forms

What it does

Project Form Patterns is an agent skill from AkaraChen/aghub. 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.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering React components and Refactoring. It works with Model Context Protocol and React. The repository describes itself as: One hub for every AI coding agent. Unified configuration management for 22+ assistants. The licence is MIT.

When your agent uses it

Refactoring forms in crates/desktop/src
Especially HeroUI v3 + React forms
RHF integration
Error presentation

Example prompts

“/project-form-patterns”

What it can do on your machine

Read from SKILL.md and the folder at commit 61a7ee7. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- bun
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- v3.heroui.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Project Form Patterns loads about 1.1k tokens when it runs. Until then it costs about 100 tokens; SKILL.md has 466 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~100
When it runs · the whole SKILL.md, loaded when a task matches: ~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from AkaraChen/aghub at commit 61a7ee7, republished under its MIT licence (© AkaraChen). 466 words, ~1,062 tokens.

Download SKILL.mdSave it as .claude/skills/project-form-patterns/SKILL.md (or your agent's skills folder).

name: project-form-patterns
description: 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.

aghub Form Patterns

Follow these rules when building forms in this project.

Source of Truth

Check the official docs first, not memory and not bundled/local docs, when form behavior is in question.
For HeroUI, prefer the official site:
- https://v3.heroui.com/docs/react/components/form
- https://v3.heroui.com/docs/react/components/text-field
- https://v3.heroui.com/docs/react/components/field-error
- https://v3.heroui.com/docs/react/components/select
Use local skill docs only as a convenience after confirming the official API.

Default Stack

Prefer react-hook-form for non-trivial forms.
Use Controller for HeroUI Select and any custom controlled widgets.
Keep one form state. Do not create a second derived validation state unless there is a concrete need the form library cannot express.

Validation Behavior

When RHF controls validation, set HeroUI form fields to validationBehavior="aria".
Do not rely on HeroUI/native validation defaults together with RHF. Native validation can steal focus and submission flow while bypassing the error UI you expect from RHF.
Let RHF own validation rules and submission blocking.

Error Rendering

For HeroUI text fields, use:
- isInvalid={Boolean(fieldState.error)}
- Conditionally render <FieldError>{fieldState.error.message}</FieldError> inside the same TextField.
Do not invent unsupported props. In particular, do not assume TextField supports an errorMessage prop.
Keep the official anatomy:

tsx

<TextField isInvalid={Boolean(fieldState.error)} validationBehavior="aria">
	<Label>Name</Label>
	<Input {...inputProps} />
	{fieldState.error && <FieldError>{fieldState.error.message}</FieldError>}
</TextField>

For non-form or custom composite controls, prefer HeroUI ErrorMessage instead of hand-rolled error text.
Use ErrorMessage for collection-style or custom editors that are not true form fields, including key/value editors, tag selectors, and similar composite controls.

Custom Editors

Custom widgets like AgentSelector, EnvEditor, HttpHeaderEditor, and KeyPairEditor should still be registered in RHF through Controller.
For custom editors that manage arrays or compound values, compute validation from the current field value and surface one aggregated error below the editor when possible.
For that aggregated error, prefer HeroUI ErrorMessage.
Do not inject per-row error UI into tight horizontal layouts unless the design explicitly calls for it.

Show full SKILL.md (186 more words)Show less

Key/Value Editors

Keep row layout simple:
- two inputs
- one delete button
- no extra wrappers that change flex behavior unless necessary
Prefer aggregate error text below the whole editor over inline row errors. This avoids breaking spacing and alignment.
Implement that aggregate error with HeroUI ErrorMessage, not a custom <p> block.
If you must show row-level issues, redesign the layout first; do not bolt error blocks into a row that was designed as a single-line control.

Practical Rules

Prefer onPress for HeroUI buttons.
Use type="button" for non-submit buttons inside forms.
Preserve existing visual patterns in this repo; do not restyle forms while adding validation.
After form changes, run bun run build in crates/desktop when possible and separate unrelated existing build failures from the changes you made.

Anti-Patterns

Do not mix RHF validation with a parallel validationErrors state for the same fields.
Do not depend on HeroUI default native validation when you expect RHF errors to drive the UI.
Do not push validation messages into each key/value row unless you intentionally redesign that editor.
Do not trust remembered HeroUI APIs for forms without checking the official site first.

Files

Just SKILL.md in .agents/skills/project-form-patterns of AkaraChen/aghub.

Open the folder on GitHubat commit 61a7ee7

Compare with similar skills

Project Form Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Project Form Patterns compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Project Form Patterns this skillAkaraChen/aghub	272	—	~1.1k	Automated safety check: Pass	MIT	yesterday
No Use Effectmattiacerutti/supernova	187	2 repos	~1.7k	Automated safety check: Pass	MIT	today
React Best Practicesshapeshift/web	206	1 repos	~2k	Automated safety check: Pass	MIT	today
Migrate Componentasyncapi/generator	1.1k	—	~3k	Automated safety check: Pass	Apache-2.0	2 days ago
React Performanceaffaan-m/ECC	274k	1 repos	~4.5k	Automated safety check: Pass	MIT	2 days ago
Feature Archpproenca/dot-skills	214	—	~2k	Automated safety check: Pass	MIT	1 mo ago

Similar skills

No Use Effect
mattiacerutti/supernova
Enforce the no-useEffect rule when writing or reviewing React code.
187 GitHub starsUsed in 2 repos~1.7k tokens
DevelopmentAuto-check passed
React Best Practices
shapeshift/web
Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering.
206 GitHub starsUsed in 1 repo~2k tokens
DevelopmentAuto-check passed
Migrate Component
asyncapi/generator
Promote a duplicated React/JSX template-local component into the shared @asyncapi/generator-components package.
1.1k GitHub stars~3k tokensUpdated 2 days ago
DevelopmentAuto-check passed
React Performance
affaan-m/ECC
React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills).
274k GitHub starsUsed in 1 repo~4.5k tokens
DevelopmentAuto-check passed
Feature Arch
pproenca/dot-skills
React feature-based architecture guidelines for scalable applications.
214 GitHub stars~2k tokensUpdated 1 mo ago
DevelopmentAuto-check passed
React
pproenca/dot-skills
React 19/19.2 modern patterns for concurrent rendering, Server Components, actions, ref-as-prop, document metadata, resource hints, hooks, and memoization — plus a category-major review/refactor…
214 GitHub stars~4.1k tokensUpdated 1 mo ago
DevelopmentAuto-check passed

Questions about Project Form Patterns

What does Project Form Patterns do?

Form implementation guidance for the aghub desktop app. An agent skill from AkaraChen/aghub. Project Form Patterns is an agent skill from AkaraChen/aghub. Form implementation guidance for the aghub desktop app.

When should I use Project Form Patterns?

Project Form Patterns fits situations like: refactoring forms in crates/desktop/src; especially HeroUI v3 + React forms; RHF integration; error presentation.

How do I install Project Form Patterns in Claude Code?

Run `npx skills add AkaraChen/aghub --skill project-form-patterns -a claude-code`. Or copy the skill folder (.agents/skills/project-form-patterns in AkaraChen/aghub) into .claude/skills/project-form-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Project Form Patterns in Codex?

Run `npx skills add AkaraChen/aghub --skill project-form-patterns -a codex`. Or copy the skill folder (.agents/skills/project-form-patterns in AkaraChen/aghub) into .agents/skills/project-form-patterns in your project. Codex loads it when a task matches its description.

Can I use Project Form Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AkaraChen/aghub --skill project-form-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/project-form-patterns, .gemini/skills/project-form-patterns, .github/skills/project-form-patterns and .opencode/skills/project-form-patterns in your project.

What does Project Form Patterns need to run?

Going by SKILL.md and its folder, Project Form Patterns needs the command-line tools its instructions call (bun).

Does Project Form Patterns access the network?

SKILL.md names 1 domain. In commands or code: v3.heroui.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Project Form Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Project Form Patterns use?

Project Form Patterns is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Project Form Patterns use?

About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Project Form Patterns?

Skills that share tags, products or a category with Project Form Patterns: No Use Effect (mattiacerutti/supernova, 187 stars), React Best Practices (shapeshift/web, 206 stars), Migrate Component (asyncapi/generator, 1.1k stars) and React Performance (affaan-m/ECC, 274k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Project Form Patterns?

AkaraChen (a GitHub user) maintains it in AkaraChen/aghub, which has 272 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on October 5, 2026.

Source: AkaraChen/aghub on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Project Form Patterns

Install Project Form Patterns

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

aghub Form Patterns

Source of Truth

Default Stack

Validation Behavior

Error Rendering

Custom Editors

Key/Value Editors

Practical Rules

Anti-Patterns

Files

Compare with similar skills

Similar skills

No Use Effect

React Best Practices

Migrate Component

React Performance

Feature Arch

React

More from AkaraChen/aghub

Init Deep

Questions about Project Form Patterns

Install Project Form Patterns

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

aghub Form Patterns

Source of Truth

Default Stack

Validation Behavior

Error Rendering

Custom Editors

Key/Value Editors

Practical Rules

Anti-Patterns

Files

Compare with similar skills

Similar skills

No Use Effect

React Best Practices

Migrate Component

React Performance

Feature Arch

React

More from AkaraChen/aghub

Init Deep

Related

Questions about Project Form Patterns