用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归；中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。
The English summary is being prepared. Showing the original description.
bovinphang/frontend-craft22Updated Sep 26, 2026
FreePublished on GitHub
fec-form-handling
用于构建或审查较复杂表单，包括 React Hook Form、Zod schema、类型化校验、动态字段、受控第三方输入、文件上传、多步骤流程、依赖校验或表单性能。不要用于没有校验的 1-3 个字段小表单；中文触发词包括 表单、表单校验、动态字段。
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installFiles included (2)
- SKILL.md3.3 KB
- references/advanced-form-patterns.md3.9 KB
SKILL.md (original)
Review the instructions the agent will receive before you install.
表单处理
用途
管理表单状态、校验和提交，避免复杂表单输入卡顿。
流程
- 先识别框架、项目既有表单库、schema 校验库、组件库和复杂度；10+ 字段、动态字段、联动校验、文件上传、多步流程或输入卡顿时再引入专门表单方案。
- 按项目栈选型：React 可考虑 React Hook Form + Zod；Vue 可考虑 vee-validate / FormKit + Zod、Yup 或 Valibot；简单表单可用框架原生状态和基础校验。
- 用运行时 schema 或明确校验函数守住外部输入边界；TypeScript 类型可从 schema 推导，但不要只写 TS 类型。
- 明确默认值、字段注册、受控/非受控边界和组件库适配；错误提示用
aria-invalid、aria-describedby和role="alert"。 - 提交时处理 loading、服务端错误、重复提交和 reset；大型表单用局部订阅和子组件隔离控制重渲染。
React 快速开始
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
const loginSchema = z.object({
email: z.string().email("请输入有效的邮箱地址"),
password: z.string().min(8, "密码至少 8 个字符"),
});
type LoginForm = z.infer<typeof loginSchema>;
export function LoginFormView() {
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<LoginForm>({
resolver: zodResolver(loginSchema),
defaultValues: { email: "", password: "" },
});
return (
<form onSubmit={handleSubmit((data) => api.login(data))} noValidate>
<label htmlFor="email">邮箱</label>
<input id="email" {...register("email")} aria-invalid={!!errors.email} />
{errors.email && <span role="alert">{errors.email.message}</span>}
<label htmlFor="password">密码</label>
<input id="password" type="password" {...register("password")} />
{errors.password && <span role="alert">{errors.password.message}</span>}
<button disabled={isSubmitting}>
{isSubmitting ? "提交中..." : "提交"}
</button>
</form>
);
}
详细参考
涉及是否需要表单库、框架选型、Controller、useFieldArray、联动校验、文件上传、多步表单、异步校验和性能模式时，加载 references/advanced-form-patterns.md。
约束
- 沿用仓库既有表单库、schema 库和组件库适配方式，不为单个表单引入第二套体系。
- 默认值必须完整，避免 undefined 触发受控/非受控警告或初始化抖动。
- reset 应传服务器返回或明确的完整默认对象。
- 异步校验必须 debounce 或放到提交边界，避免每次键入请求。
- schema 级联动校验的错误 path 必须指向实际字段。
预期输出
产出类型安全、可访问、提交状态明确的表单；复杂字段和文件上传有 schema 约束，输入过程无明显卡顿，服务端错误能回填到用户可理解的位置。
Reviews
No reviews yet. Tell others what you thought.
Comments
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
More skills from this repository
Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels, screen reader behavior, WCAG 2.2 issues, touch accessibility, or assistive-technology regressions; Chinese triggers include accessibility, accessibility, a11y, WCAG, screen reader.
The English summary is being prepared. Showing the original description.
bovinphang/frontend-craft22Updated Sep 26, 2026
fec-alchemy
FreeUse when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.
The English summary is being prepared. Showing the original description.
bovinphang/frontend-craft22Updated Sep 26, 2026
fec-alchemy
Free用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践，并通过原创的项目内重设计转化为当前项目能力，而不是复制原实现。
The English summary is being prepared. Showing the original description.
bovinphang/frontend-craft22Updated Sep 26, 2026
用于设计、实现或审查前后端 API 集成、类型化 API client、REST/tRPC/OpenAPI 客户端选型、认证刷新、API 错误映射、上传流程、SSE/WebSocket/轮询选择、CORS 相关前端行为或跨边界 loading/error 状态。不要用于纯后端服务架构或仅 TanStack Query 缓存策略；中文触发词包括 API 集成、前后端联调、typed API client、接口错误处理、SSE、WebSocket。
The English summary is being prepared. Showing the original description.
bovinphang/frontend-craft22Updated Sep 26, 2026
Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client choices, auth refresh, API error mapping, upload flows, SSE/WebSocket/polling choices, CORS-facing frontend behavior, or cross-boundary loading/error states. Do not use for backend-only service architecture or TanStack Query cache policy alone; Chinese triggers include API integration, front-end and back-end joint debugging, typed API client, Interface error handling, SSE, WebSocket.
The English summary is being prepared. Showing the original description.
bovinphang/frontend-craft22Updated Sep 26, 2026