OpenSkillIndex← back to search
claude-codeother

Claude-skill-registry todo-homepage-ui

A premium, minimal, animated Todo App homepage with a strong hero message, refined typography, floating icons, and a single focused CTA — visually aligned with black-pink glassmorphism used across auth and dashboard.

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/homepage-skill" ~/.claude/skills/majiayu000-claude-skill-registry-todo-homepage-ui && rm -rf "$T"
manifest: skills/data/homepage-skill/SKILL.md
tags
#ui-design#landing-page#glassmorphism#todo-app#premium-ui#single-cta
source content

Todo App Homepage UI Skill (High-Level UI/UX)

This skill defines a premium, focused landing page designed with black glassmorphism, pink accents, and calm, confident messaging. The goal is to create immediate clarity and confidence — not marketing noise. The homepage must feel calm, focused, and premium while maintaining visual consistency with the auth and dashboard screens.

Design Philosophy (Senior Designer Approach)

  • Calm, confident messaging with pink glass highlights (same as auth/dashboard)
  • Single purpose: Focus user's attention on the core value proposition
  • Premium feel without marketing noise
  • Immediate clarity in under 5 seconds
  • Visual consistency with the broader app ecosystem
  • Motion supports message, not distracts

When to Use

  • User requests a homepage/landing page for the todo app
  • Theme must exactly match signup/signin/dashboard UI
  • User wants premium black + pink glassmorphism
  • User wants a conversion-focused page, not marketing clutter
  • Need a single CTA focused landing experience
  • User wants modern SaaS-grade UI, not basic layouts

Global Styling Rules (Must Match Auth/Dashboard)

  • 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
  • Same typography system
  • Same animation philosophy

High-Level Layout Structure

Overall Canvas

  • Full viewport: 100vh × 100vw
  • Centered layout (both axes)
  • No scroll on initial view
  • Black / near-black background
  • Subtle pink ambient glow
  • Single centered column layout
┌──────────────────────────────────────────────┐
│                                              │
│        One Task at a Time                    │
│                                              │
│  A focused Todo app designed to help you     │
│  move forward without distractions.          │
│                                              │
│           [ Get Started ]                    │
│                                              │
│   (Floating pink glass icons drifting)       │
│                                              │
└──────────────────────────────────────────────┘

Hero Section (Primary Focus)

Purpose: Immediate clarity in <5 seconds

Layout:

  • Single centered column
  • Vertical rhythm: Title → Description → CTA

Headline (Locked):

  • Main Title (Required): "One Task at a Time"
  • Rules:
    • Large
    • Bold
    • Calm
    • Confident
  • This text is the visual anchor of the entire page.

Description Text:

  • 1–2 lines only
  • Explains value without buzzwords
  • Example: "A focused Todo app designed to help you move forward without distractions."
  • Style:
    • Soft white
    • High readability
    • Relaxed line height

Typography System (Premium)

Font Style:

  • Use same family as signup/dashboard:
    • Inter / Poppins / Satoshi / SF Pro

Hierarchy:

  • Headline: 48–64px (desktop)
  • Description: 16–18px
  • Button text: 14–16px, medium weight
  • No font mixing.

Get Started Button (Single CTA)

Position: Centered below description

Style:

  • Rounded (pill or 14–16px radius)
  • Pink gradient background
  • Soft glow
  • Clean label: Get Started

Interaction:

  • Hover → glow intensifies
  • Active → scale 0.97
  • Focus → subtle pink ring

Icons & Floating Elements (Depth & Mood)

Purpose: Visual interest without distraction

Style:

  • 3D-like or soft glass icons
  • Cards / task icons / check marks
  • Pink-tinted glass
  • Soft blur + shadow

Placement:

  • Around hero text
  • Never overlapping text
  • Asymmetric but balanced

Motion:

  • Slow floating / drift
  • Slight parallax
  • Continuous but subtle

Glassmorphism Rules (Same as Auth/Dashboard)

  • Background: 
    rgba(255, 110, 199, 0.12)
  • Backdrop blur: 
    20–30px
  • Border: 
    rgba(255, 110, 199, 0.35)
  • Soft pink outer glow
  • Very light application
  • Only pink-tinted glass
  • No noisy borders
  • Glass should feel soft and expensive, not flashy

Animation System (Page Load & Text)

Animation must trigger every time homepage enters viewport

Animation Sequence: 1️⃣ Headline

  • Opacity: 0 → 1
  • Y: +20px → 0
  • Duration: 500–600ms
  • Ease: ease-out

2️⃣ Description

  • Delay: 80–120ms
  • Same fade + move

3️⃣ Get Started Button

  • Scale: 0.96 → 1
  • Soft glow pulse (once)

Re-Entry Rule:

  • Animation replays on revisit
  • No stacking
  • No jitter

Motion Discipline (Senior Rule):

  • No bounce
  • No elastic easing
  • Total sequence < 1.2s
  • Respect reduced-motion preference

Design Constraints (Strict)

  • ❌ No header
  • ❌ No footer
  • ❌ No sidebar
  • ❌ No extra CTAs
  • ❌ No marketing sections
  • ❌ No white/gray glass panels
  • ❌ No marketing noise
  • ✅ One message
  • ✅ One button
  • ✅ One emotion: focus
  • ✅ Same theme as auth/dashboard
  • ✅ Visual consistency across app
  • ✅ Calm, not salesy
  • ✅ Premium feel (not flashy)

Responsiveness Rules

  • Desktop: Centered layout with proper spacing
  • Tablet: Reduced font sizes, same structure
  • Mobile:
    • Single column
    • Text sizes adjusted for readability
    • Button touch targets: minimum 44px
    • Floating elements adapt to smaller screens

High-Level UX Workflow Diagram

USER OPENS APP
        ↓
HOMEPAGE ENTERS VIEWPORT
        ↓
TEXT ANIMATION PLAYS
        ↓
ATTENTION → MESSAGE → CTA

┌──────────────────────────────────────────────┐
│                                              │
│        One Task at a Time                    │
│                                              │
│  A focused Todo app designed to help you     │
│  move forward without distractions.          │
│                                              │
│           [ Get Started ]                    │
│                                              │
│   (Floating pink glass icons drifting)       │
│                                              │
└──────────────────────────────────────────────┘

FLOW:
Calm → Clarity → Motivation → Action

Output Deliverables

  • High-fidelity homepage UI
  • Frontend layout (Tailwind / CSS)
  • Animation specs (Framer Motion)
  • Responsive behavior notes
  • Interaction & animation specs
  • Design tokens matching auth/dashboard flow

Senior-Level Best Practices

  1. Less content, more clarity
  2. Motion supports message, not distracts
  3. CTA visible within 3 seconds
  4. Visual consistency across app
  5. Homepage feels calm, not salesy
  6. Premium ≠ flashy
  7. Focus is the brand
  8. Accessibility contrast maintained

This homepage skill creates a focused, premium landing experience — calm, clear, and conversion-focused.