auto winn
This commit is contained in:
Faizulhaq F.N
@@ -0,0 +1,268 @@
|
||||
---
|
||||
name: ui-design
|
||||
description: Panduan design system, CSS variables, layout, dan visual styling untuk Tour Planner App. Gunakan skill ini ketika menulis CSS, membangun layout, atau memastikan konsistensi visual antar halaman.
|
||||
---
|
||||
|
||||
# Skill: UI Design — Tour Planner App
|
||||
|
||||
## Design System Lengkap
|
||||
|
||||
Semua token harus didefinisikan di `src/index.css` di dalam `:root`.
|
||||
|
||||
```css
|
||||
/* === src/index.css === */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-primary: hsl(220, 90%, 56%);
|
||||
--color-primary-dark: hsl(220, 90%, 42%);
|
||||
--color-primary-light: hsl(220, 90%, 70%);
|
||||
--color-primary-glow: hsl(220, 90%, 56%, 0.3);
|
||||
|
||||
--color-accent: hsl(38, 95%, 55%);
|
||||
--color-accent-dark: hsl(38, 95%, 40%);
|
||||
--color-accent-light: hsl(38, 95%, 70%);
|
||||
|
||||
--color-bg-base: hsl(222, 28%, 8%);
|
||||
--color-bg-surface: hsl(222, 22%, 13%);
|
||||
--color-bg-elevated: hsl(222, 18%, 18%);
|
||||
--color-bg-overlay: hsla(222, 28%, 5%, 0.8);
|
||||
|
||||
--color-text-primary: hsl(210, 40%, 96%);
|
||||
--color-text-secondary: hsl(210, 20%, 65%);
|
||||
--color-text-muted: hsl(210, 15%, 45%);
|
||||
|
||||
--color-border: hsl(220, 15%, 22%);
|
||||
--color-border-light: hsl(220, 15%, 28%);
|
||||
|
||||
--color-success: hsl(142, 70%, 45%);
|
||||
--color-success-bg: hsl(142, 70%, 45%, 0.15);
|
||||
--color-warning: hsl(38, 95%, 55%);
|
||||
--color-warning-bg: hsl(38, 95%, 55%, 0.15);
|
||||
--color-danger: hsl(0, 75%, 55%);
|
||||
--color-danger-bg: hsl(0, 75%, 55%, 0.15);
|
||||
|
||||
/* Typography */
|
||||
--font-body: 'Inter', -apple-system, sans-serif;
|
||||
--font-display: 'Outfit', sans-serif;
|
||||
--font-hero: 'Playfair Display', serif;
|
||||
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-4xl: 2.25rem;
|
||||
--text-5xl: 3rem;
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--space-20: 5rem;
|
||||
|
||||
/* Border Radius */
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.5rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 3px hsla(0,0%,0%,0.3);
|
||||
--shadow-md: 0 4px 16px hsla(0,0%,0%,0.35);
|
||||
--shadow-lg: 0 8px 32px hsla(0,0%,0%,0.4);
|
||||
--shadow-glow: 0 0 24px var(--color-primary-glow);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Z-Index */
|
||||
--z-dropdown: 100;
|
||||
--z-modal: 200;
|
||||
--z-toast: 300;
|
||||
--z-tooltip: 400;
|
||||
}
|
||||
```
|
||||
|
||||
## CSS Utility Classes Wajib
|
||||
|
||||
```css
|
||||
/* Base reset */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background-color: var(--color-bg-base);
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Glassmorphism */
|
||||
.glass {
|
||||
background: hsla(222, 22%, 18%, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Layout container */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-4);
|
||||
}
|
||||
|
||||
/* Grid layouts */
|
||||
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
|
||||
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
|
||||
|
||||
/* Responsive grid */
|
||||
@media (max-width: 1024px) {
|
||||
.grid-4 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid-3 { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
|
||||
}
|
||||
```
|
||||
|
||||
## Pola Layout Halaman
|
||||
|
||||
```jsx
|
||||
// Setiap page menggunakan struktur ini:
|
||||
<div className="page-wrapper">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Judul</h1>
|
||||
<p className="page-subtitle">Deskripsi</p>
|
||||
</div>
|
||||
<div className="page-content">
|
||||
{/* konten */}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Komponen Hero (Home Page)
|
||||
|
||||
```css
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 50%, hsl(220, 90%, 20%, 0.4) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 80% 20%, hsl(38, 95%, 20%, 0.3) 0%, transparent 60%),
|
||||
var(--color-bg-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,..."); /* subtle grid pattern */
|
||||
opacity: 0.03;
|
||||
}
|
||||
```
|
||||
|
||||
## Warna Kategori Aktivitas
|
||||
|
||||
```javascript
|
||||
export const CATEGORY_COLORS = {
|
||||
wisata: 'hsl(220, 90%, 56%)',
|
||||
makan: 'hsl(142, 70%, 45%)',
|
||||
transportasi: 'hsl(280, 70%, 60%)',
|
||||
'check-in': 'hsl(38, 95%, 55%)',
|
||||
lainnya: 'hsl(210, 20%, 55%)',
|
||||
};
|
||||
```
|
||||
|
||||
## Warna Kategori Budget
|
||||
|
||||
```javascript
|
||||
export const BUDGET_CATEGORY_COLORS = {
|
||||
transportasi: '#4f8ef7',
|
||||
akomodasi: '#a78bfa',
|
||||
makan: '#34d399',
|
||||
aktivitas: '#fbbf24',
|
||||
'oleh-oleh': '#f87171',
|
||||
lainnya: '#94a3b8',
|
||||
};
|
||||
```
|
||||
|
||||
## Breakpoints
|
||||
|
||||
```css
|
||||
/* Mobile first */
|
||||
/* xs: 0+ (default) */
|
||||
/* sm: 640+ */
|
||||
@media (min-width: 640px) { }
|
||||
/* md: 768+ */
|
||||
@media (min-width: 768px) { }
|
||||
/* lg: 1024+ */
|
||||
@media (min-width: 1024px) { }
|
||||
/* xl: 1280+ */
|
||||
@media (min-width: 1280px) { }
|
||||
```
|
||||
|
||||
## Animasi Framer Motion Standar
|
||||
|
||||
```javascript
|
||||
// Import di setiap komponen yang butuh animasi
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
// Fade in dari bawah (item list, card)
|
||||
export const fadeInUp = {
|
||||
initial: { opacity: 0, y: 24 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
exit: { opacity: 0, y: -12 },
|
||||
transition: { duration: 0.3 }
|
||||
};
|
||||
|
||||
// Stagger container
|
||||
export const staggerContainer = {
|
||||
animate: {
|
||||
transition: { staggerChildren: 0.08, delayChildren: 0.1 }
|
||||
}
|
||||
};
|
||||
|
||||
// Scale pop (modal, tooltip)
|
||||
export const scalePop = {
|
||||
initial: { opacity: 0, scale: 0.92 },
|
||||
animate: { opacity: 1, scale: 1 },
|
||||
exit: { opacity: 0, scale: 0.92 },
|
||||
transition: { type: 'spring', stiffness: 300, damping: 24 }
|
||||
};
|
||||
|
||||
// Slide in dari kiri (sidebar)
|
||||
export const slideInLeft = {
|
||||
initial: { x: -300, opacity: 0 },
|
||||
animate: { x: 0, opacity: 1 },
|
||||
exit: { x: -300, opacity: 0 },
|
||||
transition: { type: 'spring', stiffness: 260, damping: 28 }
|
||||
};
|
||||
```
|
||||
Reference in New Issue
Block a user