К основному содержанию
affpapa.org
RU EN
скилл Claude Code CX Codex Cursor GitHub Copilot

login-flow — скилл для Claude Code: экраны входа

Создаёт HTML-прототип экрана входа для мобильного приложения с выбранным способом авторизации. Пригодится, когда нужно продумать состояния формы и её поведение на телефоне.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add nexu-io/open-design --skill login-flow -a claude-code
Открыть на GitHub

Что делает login-flow

Скилл уточняет, нужна ли авторизация по телефону и SMS, по паролю или через социальный SSO. Затем проверяет обязательные пункты чек-листа и собирает отдельный HTML-файл с состояниями загрузки и ошибки. Перед работой он читает references/checklist.md.

В форме должны быть подписи над полями, переключатель видимости пароля, кнопки SSO с SVG-иконками и индикатор загрузки в основной кнопке. Для телефона используется тип поля tel, для пароля — password. Это прототип под ширину 375px: он учитывает вырезы экрана и не должен прокручиваться по горизонтали.

Какие задачи решает

  • Собрать мобильный экран входа по телефону и SMS
  • Добавить вход по паролю с переключателем видимости
  • Показать ошибки и загрузку в форме авторизации
  • Подготовить кнопки социального SSO для прототипа

Примеры запросов агенту

  • Сделай мобильный экран входа по номеру телефона с проверкой через SMS.
  • Собери экран входа по паролю и добавь показ или скрытие пароля.
  • Подготовь прототип авторизации с кнопками социального SSO.

Как установить login-flow

1Через Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill login-flow -a claude-code

2Вручную: положить файлы

~/.claude/skills/login-flow/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/login-flow/

Из того же набора106

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок design-md nexu-io Создаёт и ведёт DESIGN.md с направлением дизайна, токенами и визуальными правилами. Пригодится, когда агенту нужен единый документ по дизайн-системе. Claude Code CX Codex Cursor +1 3 100установок

Похожие

expo-data-fetching expo Скилл настраивает сетевые запросы, кэширование и обработку ошибок в Expo. Помогает прописать состояния экранов и интеграцию с TanStack Query. Claude Code CX Codex Cursor +1 27 200установок expo-examples expo Помогает переносить официальные примеры интеграций из каталога expo/examples в текущий проект или создавать новые приложения через шаблон. Claude Code CX Codex Cursor +1 26 200установок google-mobile-ads-validate официальный google Проверяет интеграцию Google Mobile Ads SDK в проектах iOS, Android и Unity. Подходит для полного аудита перед запуском или проверки отдельного участка. Claude Code Gemini CLI CX Codex 3 300установок argent-lens software-mansion Скилл для выбора визуальных вариантов интерфейса в нативном окне Argent Lens. Помогает сравнить несколько дизайнов кнопки или экрана на симуляторе. Claude Code CX Codex Cursor +1 22 400установок vercel-react-native-skills vercel Набор правил по React Native и Expo для ИИ-агента: списки, анимации, навигация. Пригодится, когда агент правит мобильный код и надо, чтобы он делал это одинаково. Claude Code CX Codex Cursor +1 253 900установок animate-expo emilkowalski Создаёт мобильные анимации для React Native и Expo на базе Reanimated и Gesture Handler. Помогает избежать просадок кадров на реальных устройствах. Claude Code CX Codex Cursor +1 135 900установок mobile-native emilkowalski Убирает мелочи, из-за которых веб-приложение на телефоне выдаёт себя: залипающий hover, вспышку при тапе, ошибку с 100vh. Claude Code CX Codex Cursor +1 84 500установок aso coreyhaines31 Анализирует страницы приложений в App Store и Google Play по правилам поисковой оптимизации. Находит слабые места в метаданных, графике и конверсии. Claude Code CX Codex Cursor +1 74 900установок

Вопросы о login-flow

Как установить login-flow в Claude Code?

Выполните npx skills add nexu-io/open-design --skill login-flow -a claude-code. Путь к установленному файлу: ~/.claude/skills/login-flow/SKILL.md.

Что делает login-flow?

Скилл создаёт отдельный HTML-прототип мобильного экрана входа. Он поддерживает авторизацию по SMS, паролю или через социальный SSO и добавляет состояния загрузки и ошибки.

Какой чек-лист использует login-flow?

Перед созданием прототипа скилл читает references/checklist.md и проверяет обязательные пункты.

Исходный текст

SKILL.md · Apache-2.0 
---
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

© nexu-io · Apache-2.0 · nexu-io/open-design

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором