Skip to content
Design
Auto-invokedWhat is this?This plugin ships a FLOW.md router the engine fires, so the matching skill runs itself. No slash command to remember.Learn how →Skill

/login-flow

Mobile login and authentication flow screens

BOOST
Guide
@nexu-ionexu-io@nexu-io
From plugin
open-design
107k170 skills1 command1 MCP

Claude Code

$ npx -y skills add nexu-io/open-design --skill login-flow --agent claude-code

SKILL.md

login-flow.SKILL.md
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 `<artifact>` 4. **Build the HTML prototype** with proper states (default, loading, error) 5. **Wrap in `<artifact>` 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
Read it on GitHub ↗
Stats
JavaScriptReactVueshadcn/uiHTMLCSSDockerGitHubAnthropicOpenAIMCPFigma
107,035
Stars
12,174
Forks
Active
Maintenance
TypeScript
Language
Apache-2.0
License
Last commit
Created

Repo: nexu-io/open-design

In this plugin
170 skills1 command1 MCP
See everything inside
@nexu-io
Ships withopen-design

The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create motion, prototypes, websites, apps, dashboards, presentations, images, and videos with your team and AI agents. Share work, exchange feedback, and iterate together in one workspace.

107k170 skills1 MCP
Get the whole plugin, auto-invoked

Stars on GitHub

Momentum

stars in total
106.9k
Star history of nexu-io/open-design on GitHub, a chart by star-history.com
See what's trending this week

Other skills on open-design.

od-contribute
Auto-invoked

od-contribute

One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or…

open-design
@nexu-io@nexu-ioInstall Skill
ad-creative
Auto-invoked

ad-creative

Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad…

open-design
@nexu-io@nexu-ioInstall Skill
agent-browser
Auto-invoked

agent-browser

Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages,…

open-design
@nexu-io@nexu-ioInstall Skill
ai-music-album
Auto-invoked

ai-music-album

Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album…

open-design
@nexu-io@nexu-ioInstall Skill
See all 170 skills in open-design

More skills from other plugins.

impeccable

impeccable

Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…

impeccabletoday107k
@pbakaus@pbakausInstall Skill
animate

animate

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at…

skills1d56k
@emilkowalski@emilkowalskiInstall Skill

Questions about login-flow.

Which coding agents can use login-flow?
login-flow installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.