nexu-io/open-design

login-flow

Mobile login and authentication flow screens

Voir la source
Document Skill original

Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.

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
du même dépôt

Autres Skills

Tous les Skills
nexu-io
Communauté

8-bit-orbit-video-template

Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.

installations
1
GitHub Stars
94,8 k
Mis à jour
8 sept.
nexu-io
Communauté

ad-creative

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

installations
1
GitHub Stars
94,8 k
Mis à jour
8 sept.
nexu-io
Communauté

after-hours-editorial-template

Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when the user asks for premium fashion-style motion pages, moody serif-led storytelling, or a high-end dark presentation aesthetic with rich transitions.

installations
1
GitHub Stars
94,8 k
Mis à jour
8 sept.
nexu-io
Communauté

agent-browser

Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, reading selected OpenDesign browser-tab context, testing web apps, dogfooding OpenDesign previews, QA, bug hunts, or reviewing app quality. Prefer local OpenDesign preview URLs unless the user explicitly asks for external browsing.

installations
1
GitHub Stars
94,8 k
Mis à jour
8 sept.