Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add rungchan2/frontend-skills --skill form-validationgit clone --depth 1 https://github.com/rungchan2/frontend-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/rungchan2/frontend-skills/form-validation)<a href="https://agentmods.dev/skills/rungchan2/frontend-skills/form-validation"><img src="https://agentmods.dev/badge/skills/rungchan2/frontend-skills/form-validation/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/rungchan2/frontend-skills/form-validation"><img src="https://agentmods.dev/badge/skills/rungchan2/frontend-skills/form-validation.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00128 | $0.00969 |
| Opus 5 | $0.00064 | $0.00485 |
| Sonnet 5 | $0.00026 | $0.00194 |
| Haiku 4.5 | $0.00013 | $0.00097 |
Grade A, and why
form-validation scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
Form Validation 표준 (react-hook-form + zod + shadcn)
폼 작성 표준을 한 번에 깐다.
왜 이 조합인가
| 요소 | 역할 |
|---|---|
| zod | 단일 진실 원천. 스키마에서 TS 타입을 자동 도출 (z.infer) — 타입과 검증 분리 금지 |
| react-hook-form | uncontrolled + 리렌더 최소화 폼 상태 관리 |
| shadcn/ui Form | 에러 메시지 표시, 라벨 연결, 접근성 자동 처리 |
| @hookform/resolvers/zod | 위 셋을 잇는 어댑터 |
이 조합 없이 useState + onChange + 수동 검증을 쓰면, 폼 개수만큼 다른 코드가 생기고 에러 표시 일관성이 깨진다.
워크플로우
1. 패키지 설치
pnpm add react-hook-form zod @hookform/resolvers
2. shadcn Form 컴포넌트 추가
npx shadcn@latest add form input button
(이미 있으면 건너뛴다.)
3. 표준 예시 파일 배치
assets/form-example.tsx를 components/forms/login-form.tsx 같은 곳에 복사.
실제 프로젝트에 로그인 폼이 필요한 경우 그대로 출발점으로 쓰고, 아니면 참고용으로 둔다.
사용자에게: "어떤 폼이 첫 폼인가요? 로그인이면 그대로 두고, 다른 거면 (회원가입/검색/필터 등) 같은 패턴으로 변환해 만들어드립니다."
4. 패턴 핵심 4가지
표준 예시가 보여주는 규칙:
- zod 스키마는 컴포넌트 밖에. 같은 스키마를 서버 액션에서도 재검증할 수 있어야 한다.
z.infer<typeof schema>로 타입 도출. 별도interface FormValues작성 금지 — 스키마와 타입 동기화 깨진다.- shadcn Form 래핑 필수.
<input {...register} />직접 사용 금지 — 에러 표시 일관성 깨짐. - 서버 에러는
form.setError로. 폼 컴포넌트 안에 별도errorMessagestate 두지 않는다.
5. CLAUDE.md 사용 규칙 (선택)
## 폼 작성 규칙
- 모든 폼은 react-hook-form + zod + shadcn Form 조합 사용. useState 기반 폼 금지.
- zod 스키마는 컴포넌트 외부에 정의. 가능하면 같은 스키마를 서버 액션에서도 사용.
- 타입은 `z.infer<typeof schema>`로 도출. 별도 interface 정의 금지.
- 서버 검증 에러는 `form.setError("필드명", { message })`로 매핑. 별도 errorMessage state 두지 않음.
- 제출 중 비활성화: `disabled={form.formState.isSubmitting}`.
산출물
package.json에react-hook-form,zod,@hookform/resolvers추가- shadcn
form,input,button컴포넌트 components/forms/login-form.tsx(참고용 예시)- (선택) CLAUDE.md 사용 규칙
비-목표
- 이 스킬은 모든 폼을 미리 만들어두지 않는다. 첫 폼 1개 + 패턴만 박는다.
- 서버 액션 자체는 다루지 않음. (별도 스킬 영역)
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 76 lines · 128 tokens per session scan A e88fe9da0346
form-validation is a skill published in the GitHub repository rungchan2/frontend-skills (2 stars, last pushed 4mo ago), licensed Apache-2.0. It adds 128 tokens to every session and 969 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
local-ai-agents
Build local-first AI agents that run entirely on a developer workstation with Microsoft Foundry Local and Qwen function-calling models. Covers Small Language Models (SLMs), the OpenAI-compatible local endpoint, sandboxed local tools, local RAG with Chroma, local MCP servers, hybrid cloud/local routing, and the…
next-cache-components-adoption
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…
next-cache-components-optimizer
Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…
next-partial-prefetching-adoption
Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the partialPrefetching flag, opt routes in with export const prefetch = 'partial', audit Link prefetch={true} behavior, preserve existing prefetched UI with…
chronicle
Analyze Copilot session history for standup reports, usage tips, session search, and session reindexing. Use when the user asks for a standup, daily summary, usage tips, workflow recommendations, wants to search or find past sessions by keyword/file/PR, wants to reindex their session store, or asks about deleting…