OpenSkillIndex← back to search
claude-codecreative

Claude-skill-registry todo-signin-ui

Generate a premium, black-background, pink glassmorphic sign-in experience for a todo app with a distinct page layout, strong hierarchy, and refined UX flow. Styling must exactly match the signup skill.

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/SignIn-skill" ~/.claude/skills/majiayu000-claude-skill-registry-todo-signin-ui && rm -rf "$T"
manifest: skills/data/SignIn-skill/SKILL.md
tags
#ui-design#ux-design#glassmorphism#theming#layout
source content

Todo App Sign-In UI Skill (High-Level UI/UX)

This skill defines a dedicated, premium sign-in page — not a reused signup form. It follows the exact same theme, colors, glassmorphism, and typography as the signup UI, while introducing a new layout logic and user mindset focused on returning users.

Design Philosophy (Senior Designer View)

  • Same visual system as signup (brand consistency)
  • Different psychology: speed, familiarity, confidence
  • Sign-in should feel instant, secure, and calm
  • Layout must feel intentional — not copied

When to Use

  • User requests a sign-in screen for the todo app
  • Theme must exactly match signup UI
  • User wants premium black + pink glassmorphism
  • User wants a new page layout, not a simple form clone

Global Styling Rules (Must Match Signup)

  • Background: Near-black / black canvas
  • Ambient pink glow (radial / blurred shapes)
  • Glass color: Pink-tinted only
  • No white or gray glass
  • Same border radius, shadows, blur intensity

High-Level Page Layout

Overall Canvas

  • Full height viewport
  • Black background with subtle animated pink glow
  • Layout differs from signup while staying familiar

Left Panel (35–40%) — Context & Trust

Purpose: Reassure returning users

  • Minimal app logo or icon
  • Calm headline
  • Short supportive description
  • Visuals less loud than signup

Example hierarchy:

  • Heading: "Welcome back"
  • Description: "Pick up right where you left off. Your tasks are waiting."

Right Panel (60–65%) — Primary Action Area

Purpose: Fast authentication

  • Large centered pink glass card
  • Slightly wider than signup card
  • Strong visual focus

Inside card:

  • Sign In heading
  • Email + Password fields
  • Forgot password (allowed here)
  • Primary CTA
  • Social sign-in

Glassmorphism Rules (Same as Signup)

  • Background: 
    rgba(255, 110, 199, 0.12)
  • Backdrop blur: 
    20–30px
  • Border: 
    rgba(255, 110, 199, 0.35)
  • Soft pink outer glow

Typography System (Exact Match)

Card Heading

  • Size: 26–30px
  • Weight: 600–700
  • Color: #FFFFFF

Helper / Description Text

  • Size: 14–16px
  • Color: rgba(255,255,255,0.75)

Input Labels

  • Small, subtle, pink-tinted

Form Fields

Required:

  • Email Address
  • Password

Optional:

  • Remember me (toggle / checkbox)

Forgot Password

  • Position: Below password field
  • Style: Subtle pink text
  • No heavy underline
  • Secondary action only

Primary Action Button

  • Text: Sign In
  • Pink gradient background
  • Same hover, focus, active behavior as signup
  • Strong visual priority

Social Sign-In Section

  • Position: Bottom of card
  • Divider: "or continue with"
  • Icons only

Icons:

  • Facebook
  • Instagram
  • Pinterest

Style:

  • Circular glass buttons
  • Pink glow on hover

Navigation Hint (Allowed Difference)

  • Small text below card: "Don’t have an account? Sign up"
  • Styled subtle — not a CTA button

Responsiveness

  • Desktop: Two-panel layout

  • Tablet: Panels compress

  • Mobile:

    • Single column
    • Card centered
    • Left panel content moves above

High-Level UX Workflow Diagram

BLACK BACKGROUND CANVAS
(soft pink glow ambience)

┌─────────────────────────────────────────────────────────┐
│                                                         │
│  LEFT: TRUST & CONTEXT        RIGHT: QUICK ACTION       │
│                                                         │
│  ┌───────────────┐           ┌─────────────────────┐  │
│  │   App Icon    │           │  Pink Glass Card    │  │
│  │               │           │                     │  │
│  │  Welcome Back │  ─────▶   │   Sign In           │  │
│  │  Message      │  Visual   │   Helper text       │  │
│  │               │  Flow     │                     │  │
│  │  Calm Desc    │           │  [ Email ]          │  │
│  │               │           │  [ Password ]       │  │
│  │  Soft Glow    │           │                     │  │
│  │               │           │  Forgot password?  │  │
│  │               │           │                     │  │
│  │               │           │  [ Sign In ]        │  │
│  │               │           │                     │  │
│  │               │           │   — or —            │  │
│  │               │           │  ○  ○  ○            │  │
│  └───────────────┘           └─────────────────────┘  │
│                                                         │
└─────────────────────────────────────────────────────────┘

USER FLOW:
Recognition → Trust → Speed → Access → Productivity

Output Deliverables

  • High-fidelity sign-in UI
  • Frontend layout (Tailwind / CSS)
  • Responsive behavior notes
  • Interaction & animation specs

Senior-Level Best Practices

  1. Faster visual scan than signup
  2. Less text, more clarity
  3. Consistent brand language
  4. No visual noise
  5. Smooth micro-interactions
  6. Accessibility contrast
  7. Feels familiar but distinct

This sign-in skill complements the signup skill as a cohesive auth system — consistent, premium, and intentional.