skills.rest
Aqsagull99
Aqsagull99COMMUNITY
Explore all skills by this author →
GitHub

todo-signin-ui

Design a two-panel sign-in UI with pink glassmorphism for the Todo app.

Updated Dec 31, 2025
Search Tags:#authentication#frontend#glassmorphism#ui-design#sign-in#pink-theme
One-click install
npx skills add https://github.com/Aqsagull99/hackathon-2-todo-app --skill todo-signin-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: todo-signin-ui
Source: https://github.com/Aqsagull99/hackathon-2-todo-app/tree/main/.claude/skills/SignIn-skill
Command: npx skills add https://github.com/Aqsagull99/hackathon-2-todo-app --skill todo-signin-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill delivers a dedicated, premium sign-in UI for the Todo app, providing returning users with a fast, secure, and calm authentication entry while preserving brand alignment with the signup UI.

Core Features & Use Cases

  • Two-panel layout: Left context panel for trust and context; right panel for primary sign-in actions.
  • Glassmorphism pink theme: Pink-tinted glass surfaces with controlled glow to match signup aesthetics.
  • Responsive behavior: Desktop two-column, tablet compensated, mobile single-column with the sign-in card centered.
  • Use Case: Returning users sign in quickly without relearning the flow, maintaining consistency across auth screens.

Quick Start

Use the Sign-In UI skill to generate a premium black-background sign-in page that matches the signup UI theme, including layout, typography, and interactions.

Frequently Asked Questions about todo-signin-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a premium sign-in UI with glassmorphism for a web app?▼

You can design a premium sign-in UI using a two-panel layout with pink-tinted glass surfaces, controlled glow, and responsive behavior to deliver a fast, secure authentication experience for returning users.

What is the best way to make an authentication screen responsive across desktop and mobile?▼

The best way to make an authentication screen responsive is using a desktop two-column layout, tablet compensated layout, and mobile single-column layout with the sign-in card centered for optimal viewing on all devices.

How does a two-panel layout improve the sign-in experience for returning users?▼

A two-panel layout improves the sign-in experience by placing trust and context on the left panel while isolating primary sign-in actions on the right, allowing returning users to authenticate quickly without relearning the flow.

Can I match my sign-in screen's visual system to an existing signup UI?▼

Yes, you can match a sign-in screen to an existing signup UI by mirroring the pink glassmorphism theme, typography, and black-background aesthetics to maintain brand consistency and a familiar entry flow across auth screens.

Does a glassmorphism pink theme support accessibility considerations for frontend design?▼

A glassmorphism pink theme supports accessibility by enforcing controlled glow, readable typography, and responsive behavior within the frontend design to ensure the sign-in UI remains usable and secure for all returning users.

Related Skills

Explore More Design & Creative Skills→
OzeroHAXOzeroHAX
32

coder-frontend-design

Define frontend design tokens, typography, color, layout, and accessibility standards.

Community
Intermediate
addisualemuaddisualemu

expo-auth-flow

Implement login, signup, and logout flows for Expo apps with Zustand and Expo Router.

Community
Intermediate
Aqsagull99Aqsagull99

todo-homepage-ui

Create a glassmorphism homepage UI for Todo apps with a single CTA.

Community
Advanced
hoainam183hoainam183

design-taste-frontend

Guide frontend interface design with responsive layouts and calibrated motion.

Community
Advanced