MCP HubMCP Hub
← スキル一覧に戻る

todo-signin-ui

majiayu000
更新日 Yesterday
25 閲覧
58
9
58
GitHubで表示
メタdesign

について

このスキルは、ブラック背景とピンクのグラスモーフィズムを採用した専用のプレミアムサインインUIを生成し、サインアップページとの正確な視覚的一貫性を保証します。新規登録フローと同じ高級デザインシステムに準拠した、スピードと使い慣れた操作性に焦点を当てた、既存ユーザー向けに最適化された独自のレイアウトを作成します。サインアップフローと同一の高品質デザインシステムに沿った、統一されたサインインインターフェースが必要な場合にご利用ください。

クイックインストール

Claude Code

推奨
プラグインコマンド推奨
/plugin add https://github.com/majiayu000/claude-skill-registry
Git クローン代替
git clone https://github.com/majiayu000/claude-skill-registry.git ~/.claude/skills/todo-signin-ui

このコマンドをClaude Codeにコピー＆ペーストしてスキルをインストールします

ドキュメント

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.

GitHub リポジトリ

majiayu000/claude-skill-registry
パス: skills/data/SignIn-skill

関連スキル

content-collections

メタ

This skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.

スキルを見る

creating-opencode-plugins

メタ

This skill provides the structure and API specifications for creating OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It offers implementation patterns for JavaScript/TypeScript modules that intercept and extend the AI assistant's lifecycle. Use it when you need to build event-driven plugins for monitoring, custom handling, or extending OpenCode's capabilities.

スキルを見る

polymarket

メタ

This skill enables developers to build applications with the Polymarket prediction markets platform, including API integration for trading and market data. It also provides real-time data streaming via WebSocket to monitor live trades and market activity. Use it for implementing trading strategies or creating tools that process live market updates.

スキルを見る

langchain

メタ

LangChain is a framework for building LLM applications using agents, chains, and RAG pipelines. It supports multiple LLM providers, offers 500+ integrations, and includes features like tool calling and memory management. Use it for rapid prototyping and deploying production systems like chatbots, autonomous agents, and question-answering services.

スキルを見る