login-flow について
login-flowは、モバイルファーストのログイン・認証画面を生成するスキルです。電話番号とSMS、パスワード、ソーシャルSSOに対応し、各種状態を含むHTMLプロトタイプをモバイル向け制約に沿って出力します。
主な機能
- 01モバイルファーストのログイン画面生成
- 02SMS・パスワード・ソーシャルSSO対応
- 03初期・読み込み・エラー状態の実装
- 04単独HTMLファイルの出力
- 05モバイルレイアウト制約への準拠
活用シーン
- 01モバイルアプリのログイン画面制作
- 02電話番号とSMS認証の試作
- 03パスワードまたはソーシャルSSOログインの試作
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/login-flowを入力して読み込まれたか確認します。
同梱ファイルexample.htmlreferences/checklist.md
詳細
ログインフロースキル
モバイルファーストのログイン画面と認証画面を生成するためのスキルです。電話番号とSMSによる認証、パスワード認証、ソーシャルSSOのオプションなど、モバイルアプリのサインイン体験をユーザーが求めている場合に使用します。
ワークフロー
- まず参照ファイルを読む（以下を参照）
- 認証方法を確認する：電話番号／SMS、パスワード、またはソーシャルSSO
- チェックリストの確認 —
<artifact>を出力する前にP0項目を確認する - 適切な状態（初期状態、読み込み中、エラー）を備えたHTMLプロトタイプを作成する
- 出力ファイルを参照する
<artifact>タグで囲む
関連ファイル
references/checklist.md— P0／P1の受け入れ基準
出力
以下を備えた、単独で動作するHTMLファイルを1つ作成します。
- 入力欄の上にラベルを配置（プレースホルダーのみの表示は不可）
- 表示／非表示を切り替えられるパスワード欄
- SVGアイコン付きソーシャルSSOボタン
- 入力欄の下に表示するエラー状態
- 主要CTA内の読み込みスピナー
- タッチ領域は最小44px
モバイルファーストの制約
- ビューポート：幅375px（標準的なiPhone）
- 水平方向のスクロールなし
- ノッチ付きデバイスのセーフエリアインセットに対応
- 入力用キーボード：電話番号には
tel、パスワード欄にはpasswordを使用
コメント
Markdown 対応