effectslisted
Install: claude install-skill woogi-kang/woogi-harness
# Effects Skill
시각적 효과 및 배경 디자인 스킬입니다.
모던 웹 디자인의 Gradient Mesh, Glassmorphism, Neumorphism 등을 구현합니다.
## Triggers
- "효과", "배경", "effects", "background"
- "그라디언트", "글래스모피즘", "뉴모피즘"
- "노이즈", "텍스처", "패턴"
- "애니메이티드 배경"
---
## Input
| 항목 | 필수 | 설명 |
|------|------|------|
| `effectType` | ✅ | 효과 유형 (gradient, glass, neumorphism, noise, pattern, animated) |
| `colorScheme` | ❌ | 색상 구성 (light, dark, brand) |
| `intensity` | ❌ | 효과 강도 (subtle, medium, strong) |
| `performance` | ❌ | 성능 우선순위 (quality, balanced, performance) |
---
## Gradient Mesh Implementation
### CSS Gradient Mesh
```css
/* globals.css - Gradient Mesh 배경 */
/* 1. 기본 Mesh Gradient */
.gradient-mesh {
background-color: oklch(0.95 0.02 280);
background-image:
radial-gradient(at 40% 20%, oklch(0.85 0.15 280) 0px, transparent 50%),
radial-gradient(at 80% 0%, oklch(0.80 0.12 320) 0px, transparent 50%),
radial-gradient(at 0% 50%, oklch(0.88 0.10 200) 0px, transparent 50%),
radial-gradient(at 80% 50%, oklch(0.82 0.14 150) 0px, transparent 50%),
radial-gradient(at 0% 100%, oklch(0.85 0.12 60) 0px, transparent 50%),
radial-gradient(at 80% 100%, oklch(0.90 0.08 30) 0px, transparent 50%);
}
/* 2. 다크모드 Mesh Gradient */
.dark .gradient-mesh {
background-color: oklch(0.15 0.02 280);
background-image:
radial-gradient(at 40% 20%, oklch(0.25 0.10 280) 0px, transparent 50%),
radial-gradient(at 80% 0%, oklch(0.20 0.08 320) 0px, transparent 50%),
radial-gradient(at 0% 50%, oklch(0.2