关于 login-flow
login-flow 是用于生成移动优先登录与身份验证界面的技能，支持手机短信、密码和社交 SSO 方式。它输出包含默认、加载和错误状态的独立 HTML 原型，并遵循移动端布局约束。
主要功能
- 01生成移动优先登录界面
- 02支持短信、密码和社交 SSO
- 03包含默认、加载和错误状态
- 04输出独立 HTML 文件
- 05遵循移动端布局约束
适用场景
- 01为移动应用制作登录界面
- 02制作手机短信验证流程
- 03制作密码或社交 SSO 登录原型
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/login-flow确认已加载。
附带文件example.htmlreferences/checklist.md
详细介绍
登录流程技能
用于生成移动优先的登录和身份验证界面的技能。当用户想要为移动应用打造登录体验时使用，包括手机号 + 短信验证、密码登录和社交 SSO 选项。
工作流
- 先阅读参考文件（见下文）
- 确认身份验证方式：手机号/短信、密码或社交 SSO
- 检查清单关卡——输出
<artifact>前验证 P0 项 - 构建 HTML 原型，并设置适当的状态（默认、加载、错误）
- 使用
<artifact>标签封装，并引用输出文件
辅助文件
references/checklist.md— P0/P1 验收标准
输出
一个独立的 HTML 文件，实现登录界面，包含：
- 输入框上方显示标签（绝不只使用占位符）
- 带显示/隐藏切换功能的密码字段
- 带 SVG 图标的社交 SSO 按钮
- 字段下方显示错误状态
- 主 CTA 中显示加载旋转图标
- 触控目标至少为 44px
移动优先约束
- 视口宽度：375px（iPhone 标准尺寸）
- 不得出现水平滚动
- 为带刘海的设备设置安全区域内边距
- 输入键盘：手机号使用
tel，密码字段使用password
评论
支持 Markdown