form

Name: form
Author: lightpointventures

36stars6forks

How to install form?

lightpointventures/claude-code-starter/form

$npx -y skills add lightpointventures/claude-code-starter --skill form

Installs into the current project.

Summary

当用户想做表单、联系表单、注册表单、问卷调查、报名页时使用 — 生成带验证的表单页面

Files · 1

View on GitHub

SKILL.md

1	# 生成表单
2
3	帮用户快速生成一个带验证的、可直接使用的表单。
4
5	## 步骤
6
7	### 1. 确定表单类型
8
9	如果用户已经说了，直接开始。否则问：
10
11	> 你需要什么类型的表单？常见的有：
12	> - 联系表单（姓名、邮箱、留言）
13	> - 注册/登录表单
14	> - 问卷调查
15	> - 报名表
16	> - 订单表单
17	> - 多步骤向导（如注册流程：基本信息 > 偏好设置 > 确认提交）
18	> 也可以直接告诉我需要哪些字段。
19
20	### 2. 确认字段
21
22	根据表单类型列出默认字段，让用户确认：
23
24	> 这个表单包含以下字段：
25	> （列出字段名、类型、是否必填）
26	> 需要增减字段吗？
27
28	支持的字段类型：
29	- 文本输入、密码、邮箱、电话、数字
30	- 下拉选择、单选/多选、开关切换
31	- 日期选择、时间选择
32	- 文件上传（支持拖拽、文件类型限制、大小限制、多文件）
33	- 富文本编辑器、颜色选择器
34	- 条件字段（根据其他字段的值动态显示/隐藏，例：选择"其他"时出现补充说明输入框）
35
36	### 3. 生成表单
37
38	检测项目技术栈，生成对应的表单代码：
39
40	- 字段组件 — 根据上一步确认的类型生成对应组件
41	- 实时验证 — 必填检查、格式验证（邮箱、手机号）、长度限制、自定义规则
42	- 错误提示 — 每个字段下方显示具体错误信息，提交时滚动到第一个错误字段
43	- 提交处理 — loading 状态、防重复提交、成功提示、错误处理
44	- 样式 — 整洁的布局，移动端友好
45
46	多步骤向导额外包含：
47	- 步骤指示器（当前步骤高亮）
48	- 上一步/下一步按钮，每步独立验证
49	- 最后一步显示所有填写内容的确认摘要
50
51	无障碍要求（所有表单必须满足）：
52	- 每个输入框关联 label（使用 for/id 或嵌套）
53	- 错误信息使用 aria-describedby 关联到对应字段
54	- 必填字段标注 aria-required="true"
55	- 支持纯键盘操作：Tab 切换字段、Enter 提交、Escape 关闭弹窗
56	- 焦点管理：页面加载后聚焦第一个字段，提交失败后聚焦第一个错误字段
57
58	### 4. 确认
59
60	> 表单已生成。需要调整字段、样式或验证规则吗？
61
62	完成后提示：
63	> 用 /api 生成表单提交的后端接口。用 /email 配置表单提交后发送通知邮件。
64
65	## 遇到问题
66
67	- 验证不生效 — 检查是否在 submit handler 中调用了验证函数；确认验证规则绑定到了正确的字段 name/id
68	- 提交后页面刷新导致数据丢失 — form 的 onSubmit 中需要 e.preventDefault()；如果用 action 属性提交，改为 JS 异步提交
69	- 文件上传失败 — 确认 form 标签有 enctype="multipart/form-data"；检查后端接收文件的大小限制配置
70	- 手机端键盘遮挡输入框 — 输入框获取焦点时用 scrollIntoView() 滚动到可见区域；避免 fixed 定位的提交按钮遮挡底部字段
71	- 多步骤表单切换步骤后数据丢失 — 确保每步的数据存在父组件 state 中，而不是各步骤的局部 state

People who liked this also viewed

6 picks

Type

web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026483k29k
lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026332k16k
design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026280k66k
ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026280k109k
caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026249k92k
codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026225k182k

form

36stars6forks

View on GitHub

How to install form?

lightpointventures/claude-code-starter/form

$npx -y skills add lightpointventures/claude-code-starter --skill form

Installs into the current project.

Summary

当用户想做表单、联系表单、注册表单、问卷调查、报名页时使用 — 生成带验证的表单页面

Files · 1

View on GitHub

SKILL.md

1	# 生成表单
2
3	帮用户快速生成一个带验证的、可直接使用的表单。
4
5	## 步骤
6
7	### 1. 确定表单类型
8
9	如果用户已经说了，直接开始。否则问：
10
11	> 你需要什么类型的表单？常见的有：
12	> - 联系表单（姓名、邮箱、留言）
13	> - 注册/登录表单
14	> - 问卷调查
15	> - 报名表
16	> - 订单表单
17	> - 多步骤向导（如注册流程：基本信息 > 偏好设置 > 确认提交）
18	> 也可以直接告诉我需要哪些字段。
19
20	### 2. 确认字段
21
22	根据表单类型列出默认字段，让用户确认：
23
24	> 这个表单包含以下字段：
25	> （列出字段名、类型、是否必填）
26	> 需要增减字段吗？
27
28	支持的字段类型：
29	- 文本输入、密码、邮箱、电话、数字
30	- 下拉选择、单选/多选、开关切换
31	- 日期选择、时间选择
32	- 文件上传（支持拖拽、文件类型限制、大小限制、多文件）
33	- 富文本编辑器、颜色选择器
34	- 条件字段（根据其他字段的值动态显示/隐藏，例：选择"其他"时出现补充说明输入框）
35
36	### 3. 生成表单
37
38	检测项目技术栈，生成对应的表单代码：
39
40	- 字段组件 — 根据上一步确认的类型生成对应组件
41	- 实时验证 — 必填检查、格式验证（邮箱、手机号）、长度限制、自定义规则
42	- 错误提示 — 每个字段下方显示具体错误信息，提交时滚动到第一个错误字段
43	- 提交处理 — loading 状态、防重复提交、成功提示、错误处理
44	- 样式 — 整洁的布局，移动端友好
45
46	多步骤向导额外包含：
47	- 步骤指示器（当前步骤高亮）
48	- 上一步/下一步按钮，每步独立验证
49	- 最后一步显示所有填写内容的确认摘要
50
51	无障碍要求（所有表单必须满足）：
52	- 每个输入框关联 label（使用 for/id 或嵌套）
53	- 错误信息使用 aria-describedby 关联到对应字段
54	- 必填字段标注 aria-required="true"
55	- 支持纯键盘操作：Tab 切换字段、Enter 提交、Escape 关闭弹窗
56	- 焦点管理：页面加载后聚焦第一个字段，提交失败后聚焦第一个错误字段
57
58	### 4. 确认
59
60	> 表单已生成。需要调整字段、样式或验证规则吗？
61
62	完成后提示：
63	> 用 /api 生成表单提交的后端接口。用 /email 配置表单提交后发送通知邮件。
64
65	## 遇到问题
66
67	- 验证不生效 — 检查是否在 submit handler 中调用了验证函数；确认验证规则绑定到了正确的字段 name/id
68	- 提交后页面刷新导致数据丢失 — form 的 onSubmit 中需要 e.preventDefault()；如果用 action 属性提交，改为 JS 异步提交
69	- 文件上传失败 — 确认 form 标签有 enctype="multipart/form-data"；检查后端接收文件的大小限制配置
70	- 手机端键盘遮挡输入框 — 输入框获取焦点时用 scrollIntoView() 滚动到可见区域；避免 fixed 定位的提交按钮遮挡底部字段
71	- 多步骤表单切换步骤后数据丢失 — 确保每步的数据存在父组件 state 中，而不是各步骤的局部 state

People who liked this also viewed

6 picks

Type