跳到主内容
智客 ZICQ

技能库 智客分类:Agent 工作流 login-flow

Login Flow

移动登录和认证流程屏幕

官方网址:GitHub

技能介绍

先看中文介绍;官方 description 原文单独保留,不改写 SKILL.md。

做什么

移动登录和认证流程屏幕

何时用

官方 description 未单独写出 Use when。按规范,代理会在用户任务与这段 description 的关键词匹配时激活本技能。

代理如何加载

按 Agent Skills 渐进披露:启动时只加载 name 与 description(约 100 token);任务匹配后才读入整份 SKILL.md 正文;scripts/、references/、assets/ 仅在需要时再读。 本文件正文结构:Login Flow Skill、Workflow、Side Files、Output、Mobile-First Constraints。 其中含规范建议的小节:分步指令。

文件分析

文件分析:除 SKILL.md 外,正文引用了 references/checklist.md,属于带资源的技能包,这些文件按需再读。

官方 description(原文)

Mobile login and authentication flow screens

Login Flow SkillWorkflowSide FilesOutputMobile-First Constraints

来源分类:GitHub skill

SKILL.md 与 Agent 调用

官方规范 ↗
name
login-flow
description
Mobile login and authentication flow screens
  1. 发现技能客户端向 Agent 提供名称与描述目录。
  2. 匹配与调用用户指定或任务匹配后,载入 SKILL.md 指令。
  3. 按需加载按步骤读取参考文档、使用脚本与素材。
指令中引用的文件 · 1
  • references/checklist.md

以下路径提取自原文;文件是否齐全请以来源仓库中的完整目录为准。

具体调用语法与可用工具以目标 Agent 客户端为准。 查看调用机制说明 ↗

安装这个技能

Skills CLI ↗

先选择目标 Agent 和安装范围,保留技能包的附属文件,安装后检查客户端能否发现该技能。

该技能引用了附属文件,请从来源获取完整目录;仅复制 SKILL.md 可能缺少依赖。

交给 Agent 安装

复制安装指令给支持 Agent Skills 的代理,确认其中的目标目录与客户端匹配。

把 Agent Skill「login-flow」安装到我的项目:SKILL.md 原文与官方 description 见 https://zicq.com/zh/skills/skl-d4772f49355ae065-Login-Flow.html
请存为 .cursor/skills/login-flow/SKILL.md 或 .claude/skills/login-flow/SKILL.md,frontmatter 的 name 与 description 保持原样,不要改写。
该技能还带 scripts/、references/、assets/ 等文件,请从 https://github.com/nexu-io/open-design/tree/HEAD/skills/login-flow 取完整目录,不要只建一个 SKILL.md。

GitHub 完整包 ↗

终端安装 · Skills CLI

需要 Node.js 与 npx。先查看仓库技能列表,确认实际名称。

npx skills add 'https://github.com/nexu-io/open-design/tree/HEAD/skills/login-flow' --list

npx skills add 'https://github.com/nexu-io/open-design/tree/HEAD/skills/login-flow' --skill 'login-flow'

CLI 会交互选择目标 Agent,默认安装到项目;用户级安装使用 -g。先通过查看命令核对仓库内容,再用 npx skills list 检查已安装技能。

阅读排版
--- name: login-flow description: Mobile login and authentication flow screens od: mode: prototype platform: mobile triggers: - login - sign in - 注册登录 - 登录注册 - 手机号登录 - 验证码登录 - 密码登录 --- # Login Flow Skill A skill for generating mobile-first login and authentication screens. Use this when the user wants a sign-in experience for a mobile app, including phone + SMS verification, password-based login, and social SSO options. ## Workflow 1. **Read reference files first** (see below) 2. **Clarify auth method**: phone/SMS, password, or social SSO 3. **Checklist gate** — verify P0 items before emitting `` 4. **Build the HTML prototype** with proper states (default, loading, error) 5. **Wrap in `` tag** referencing the output file ## Side Files - `references/checklist.md` — P0/P1 acceptance criteria ## Output A single standalone HTML file implementing the login screen with: - Labels above inputs (never placeholder-only) - Password field with show/hide toggle - Social SSO buttons with SVG icons - Error states below fields - Loading spinner in primary CTA - Touch targets minimum 44px ## Mobile-First Constraints - Viewport: 375px wide (iPhone standard) - No horizontal scroll - Safe area insets for notched devices - Input keyboards: `tel` for phone, `password` for password fields

相关技能

Agent 工作流

Skill Creator

创造有效技能指南。 当用户想创造出新的技能(或更新现有的技能),以专业知识,工作流程,或工具集成来扩展克洛德的能力时,应该使用这种技能.

Agent 工作流

Clawdhub

使用ClawdHub CLI搜索,安装,更新并发布从taladhub.com的代理技能. 需要获取苍蝇上的新技能时使用,将安装的技能同步到最新版本或特定版本,或者发布 npm-instainddhub CLI 的新/更新的技能文件夹.

Agent 工作流

Agent Team Orchestration

管弦乐团多代理团队,任务设定周期,交接协议,审查工作流程. 使用时间: (1)建立2+特派员队伍,具有不同专业,(2)确定任务路线和生命周期(收录框_ spec_建设_审查_完成),(3)在特派员之间制定交接协议,(4)建立审查和质量关口,(5)管理特派员之间的交流和文物共享.

Agent 工作流

Superpowers

Spec-first,TDD,子代理驱动的软件开发工作流程. 当:(1)构建任何新功能或应用——触发脑暴_计划_子代理执行回路,(2)调试出一个bug或测试失败——触发系统性的根起过程,(3)用户说"让我们构建","帮助我计划","我想添加X",或"这个被打破",(4)完成一个功…