Communitygithub.com

YepAPI/skills

React Hook Form 表单状态管理、Zod 校验以及多步骤向导流程。

skills 是什么?

该技能专为使用 React Hook Form、Zod 校验以及多步骤向导流程构建表单的开发人员设计。它提供了关于表单状态管理、客户端与服务器端共享 Zod 校验 schema、错误信息内联显示、多步骤表单实现(含独立步骤校验)、文件上传组件(含预览、拖拽上传和进度指示)、长表单的自动保存(防抖存储至服务器或 localStorage)、无障碍支持(标签、错误描述、聚焦管理)以及提交时禁用按钮防重复提交的明确规则。该技能适用于所有支持技能定义的主流 AI 平台(如 Claude Code、Cursor、Codex),通过清晰的规则说明帮助 AI 代理生成更规范、符合最佳实践的表单代码。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/forms

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

表单

规则

  • 使用 React Hook Form 管理表单状态 — useForm() + register() 或 Controller
  • 使用 Zod schema 进行校验 — 在客户端和服务器之间共享
  • 错误显示:在每个字段下方内联显示,红色文字,通过 aria-describedby 关联
  • 多步骤表单:采用向导模式,包含步骤状态,每个步骤独立校验
  • 文件上传:独立组件,包含预览、拖拽上传、进度指示器
  • 长表单的自动保存 — 防抖保存至服务器/localStorage
  • 无障碍支持:标签、错误描述、校验失败时的焦点管理
  • 加载时禁用提交按钮 — 显示旋转指示器,防止重复提交

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

YepAPI/skills

WCAG 2.1 AA — semantic HTML, keyboard navigation, screen readers.

YepAPI/skills

Experiment setup, variant splitting, statistical significance, and feature flag integration.

YepAPI/skills

CRUD generators, data tables, user management, role-based access, and bulk operations.

YepAPI/skills

Monitor what ChatGPT and Gemini say about your brand using YepAPI.

YepAPI/skills

Queue workers with BullMQ/Inngest/Trigger.dev, job retries, dead letter queues, concurrency.

YepAPI/skills

Commander.js, interactive prompts with Clack, spinners, colors, config files, exit codes, and npm publishing.

YepAPI/skills

cmdk integration, Cmd+K trigger, fuzzy search, grouped actions, keyboard navigation, and dynamic action registration.

YepAPI/skills

Content planning with trend and sentiment data from YepAPI.

YepAPI/skills

Content calendar, keyword-driven planning, and content briefs.

YepAPI/skills

Theme switching with CSS variables, system preference detection, next-themes, and persistence.

YepAPI/skills

Threaded comments, @mentions, reactions, moderation queue, optimistic UI, and cursor pagination.

YepAPI/skills

Competitive analysis between domains using YepAPI.

YepAPI/skills

Layout grids, KPI cards, data tables with sorting/filtering, sidebar navigation, and responsive breakpoints.

YepAPI/skills

Data encryption — TLS everywhere, AES-256-GCM for PII, bcrypt passwords, encrypted backups.

YepAPI/skills

Chart patterns with Recharts/Nivo/D3, responsive containers, color scales, and accessibility.

YepAPI/skills

Drizzle schema definition, push vs migrate, type-safe queries, relations, transactions, and prepared statements.

YepAPI/skills

Upload handling, resize/compress, CDN delivery, blur placeholders, and next/image patterns.

YepAPI/skills

Local business and Google Maps research using YepAPI.

YepAPI/skills

Cursor-based pagination, IntersectionObserver, virtualized lists with @tanstack/react-virtual, and scroll position restoration.

YepAPI/skills

Chat UI components, streaming responses with AI SDK, context window management, and RAG patterns.

相关技能