Dashbaord Skill

---
name: dashbaord-skill
description: Dark luxury UI with pink glass highlights (same as signup/signin)
---

---
name: todo-dashboard-ui
version: 2.0.0
level: Senior / 10+ Years UI Design Standard
description: A premium, task-focused Todo Dashboard UI using the exact same black-pink glassmorphic theme, color tokens, icon language, and motion principles as the signup/signin experience. Header intentionally excluded.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

# Todo App Dashboard UI Skill (High-Level UI/UX)

This skill defines a **production-ready, premium dashboard experience** designed with **black glassmorphism**, **pink accents**, and **strong task-focused hierarchy**. The goal is seamless visual continuity with signup/signin, with a focus on task management efficiency — not just a basic todo list.

---

## Design Philosophy (Senior Designer Approach)

* **Dark luxury UI** with pink glass highlights (same as signup/signin)
* Clear **task-oriented visual hierarchy** (stats → input → list)
* Minimal but expressive UI
* Dashboard feels *professional*, *calm*, and *productive*
* Every element earns its place
* **Visual consistency** with auth screens (no disconnect)

---

## When to Use

* User requests a **dashboard screen** for the todo app
* Theme must **exactly match signup/signin UI**
* User wants **premium black + pink glassmorphism**
* User wants a **task-focused experience**, not generic dashboard
* Visual consistency with auth flow is required
* User wants **modern SaaS-level UI**, not basic layouts

---

## Global Styling Rules (Must Match Signup/Signin)

* 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 height (100vh)
* **Black / near-black background**
* Soft ambient pink glow in background (radial / blur)
* Sidebar + main workspace layout
* **NO HEADER**

```
┌──────────────┬─────────────────────────────┐
│ Sidebar      │  Main Dashboard Area        │
└──────────────┴─────────────────────────────┘
```

---

### Sidebar (Icon + Text)

**Purpose:** Navigation & context

**Style:**
* Dark glass background (same as auth cards)
* Subtle pink border or glow on active item
* Rounded internal elements
* Consistent with auth glassmorphism

**Icons (Mandatory - React Icons):**
* All Tasks → checklist icon (React Icons)
* Active Tasks → clock / play icon (React Icons)
* Completed → check-circle icon (React Icons)

**Icons style:**
* Line / outline icons
* Same stroke weight as auth icons
* Pink when active, muted white otherwise

---

### Main Content Area

**1️⃣ Welcome Section**
* Text only (no card)
* Low emphasis
* White / muted gray text
* No icon needed

**2️⃣ Stats Cards (Animated)**
**Style:**
* Light / white glass cards (same glass as auth)
* Rounded corners
* Soft shadow
* Pink number accent

**Icons:**
* Optional but allowed
* Very subtle, low opacity
* Never louder than numbers

**Animation:**
* Fade + slight upward motion
* Duration: 200–300ms
* Trigger: On dashboard load

**3️⃣ Add New Task Panel (Primary Focus)**
**Style:**
* White or light glass card
* Matches signup card softness
* Clean spacing

**Fields:**
* Title
* Description
* Priority (pink dropdown)
* Tags
* Due date
* Recurring
* Reminder toggle

**Buttons:**
* Create Task → Pink gradient (same as signup CTA)
* Cancel → Subtle outline

---

## Glassmorphism Rules (Same as Signup/Signin)

* 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)

### Headings
* Same font family as signup/signin
* Size: 24–28px for main sections
* Weight: 600–700
* Color: `#FFFFFF`

### Body Text
* Size: 14–16px
* Weight: 400–500
* Color: `rgba(255,255,255,0.75)`
* Line height: relaxed (1.5+)

### Stats Numbers
* Bold, clear typography
* Pink accent color for important metrics

---

## Animation System (Same Philosophy)

**Dashboard animations must feel calm & professional, not flashy.**

**Page Load:**
* Sidebar fades in
* Main content slides up slightly
* Stats cards animate sequentially

**Interaction Animations:**
* Button hover → glow increases
* Button press → scale 0.98
* Input focus → pink glow ring

**Motion Rules:**
* No bounce
* No elastic easing
* All animations < 300ms

---

## Design Constraints (Strict)

* ❌ No header
* ❌ No marketing copy
* ❌ No new color palette
* ❌ No heavy animations
* ❌ Visual disconnect from auth flow
* ❌ No custom SVG icons
* ✅ Same theme as signup/signin
* ✅ React Icons library only
* ✅ Icons included
* ✅ Subtle motion
* ✅ Task-first UI
* ✅ Visual consistency with auth screens

---

## Responsiveness Rules

* Desktop: Sidebar + main content layout
* Tablet: Reduced spacing, same structure
* Mobile:
  * Sidebar collapses to top/bottom navigation
  * Main content takes full width
  * Add task panel adapts to mobile
* Touch targets minimum: **44px**

---

## High-Level UX Workflow Diagram

```
BLACK BACKGROUND CANVAS
(soft pink glow ambience)

┌─────────────────────────────────────────────────────────┐
│                                                         │
│  SIDEBAR NAVIGATION      MAIN DASHBOARD AREA           │
│                                                         │
│  ┌─────────────┐        ┌──────────────────────────┐  │
│  │  [Checklist │        │  Welcome Text            │  │
│  │  Icon] All │        │  (Low emphasis)          │  │
│  │  Tasks      │        │                          │  │
│  │             │        │                          │  │
│  │  [Clock/    │  ────▶ │  ┌─ Stats Cards ──┐      │  │
│  │  Play Icon] │ Visual │  │  0   0   0     │      │  │
│  │  Active     │  Flow │  └────────────────┘      │  │
│  │             │        │                          │  │
│  │  [Check-    │        │  ┌─ Add New Task ─┐     │  │
│  │  Circle     │        │  │  Title         │     │  │
│  │  Icon]      │        │  │  Description   │     │  │
│  │  Completed  │        │  │  Priority      │     │  │
│  │  (Active =  │        │  │  [Create Task] │     │  │
│  │   Pink)    │        │  └────────────────┘     │  │
│                         └──────────────────────────┘  │
│                                                         │
└─────────────────────────────────────────────────────────┘

USER FLOW:
Authenticate → Navigate → Orient → Review → Create → Focus
```

---

## Output Deliverables

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

---

## Senior-Level Best Practices

1. Strong visual continuity with auth flow
2. Task-first, productivity-focused
3. Consistent brand language
4. No visual noise
5. Smooth micro-interactions
6. Accessibility contrast maintained
7. Feels *familiar but functional*

---

**This dashboard skill completes the auth-to-product journey — consistent, premium, and task-focused.**