메뉴
Comprehensive luxury web design skill with reusable animation/interaction patterns, reference site analyses, and tool guides for building stunning React+TS+Tailwind websites
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Auto-review planning pipeline - runs CEO then design then eng reviews sequentially with auto-decisions. CARL TRIGGERS: autoplan, run the planning pipeline, full plan review, auto plan, plan everything. SOURCE: garrytan/gstack/autoplan, integrated as gs-autoplan on 2026-05-29.
Performance regression detection - baseline page load, Core Web Vitals, resource sizes. CARL TRIGGERS: benchmark, performance check, page speed, core web vitals, perf baseline. SOURCE: garrytan/gstack/benchmark, integrated as gs-benchmark on 2026-05-29.
Post-deploy canary monitoring - watches console errors, perf regressions, page failures. CARL TRIGGERS: canary monitor, post-deploy watch, after deploy check, monitor production, watch the deploy. SOURCE: garrytan/gstack/canary, integrated as gs-canary on 2026-05-29.
Safety guardrails - warns before destructive commands (rm -rf, DROP TABLE, force-push). CARL TRIGGERS: be careful, careful mode, destructive command warning, safety warning. SOURCE: garrytan/gstack/careful, integrated as gs-careful on 2026-05-29.
Chief Security Officer security audit - OWASP Top 10 plus STRIDE threat modeling. CARL TRIGGERS: security audit, OWASP audit, STRIDE, vulnerability check, security review, threat model, pen test mindset. SOURCE: garrytan/gstack/cso, integrated as gs-cso on 2026-05-29.
Generate missing documentation from scratch using the Diataxis framework. CARL TRIGGERS: generate docs, create documentation, draft docs, diataxis, write missing docs. SOURCE: garrytan/gstack/document-generate, integrated as gs-doc-generate on 2026-05-29.
| name | Premium Web Design |
| description | Comprehensive luxury web design skill with reusable animation/interaction patterns, reference site analyses, and tool guides for building stunning React+TS+Tailwind websites |
| recall_keywords | ["premium design","luxury website","animation","scroll animation","parallax","hero section","hover effect","page transition","clinic website","GSAP","framer motion","lenis","smooth scroll","reveal animation","staggered","magnetic button","cursor follower","before after slider","booking form","whatsapp button","review carousel","premium ui","stunning website","beautiful design","luxury ui","elegant","interactive"] |
Build stunning, award-winning websites with production-ready animation and interaction patterns. Designed for luxury brands, medical aesthetics clinics, and premium digital experiences.
| I need... | Use pattern | File |
|---|---|---|
| Elements appearing on scroll | Fade-In on Scroll, Staggered Reveal | patterns/scroll-animations.md |
| Depth/layers while scrolling | Parallax Background | patterns/scroll-animations.md |
| Horizontal scrolling section | Horizontal Scroll Section | patterns/scroll-animations.md |
| Reading progress indicator | Scroll Progress Bar | patterns/scroll-animations.md |
| Dramatic text entrance | Text Reveal Word-by-Word | patterns/scroll-animations.md |
| Content changing in sticky area | Sticky Section with Scroll-Driven Content | patterns/scroll-animations.md |
| Dramatic landing area | Full-Screen Text Reveal, Video Background | patterns/hero-sections.md |
| Layered depth on hero | Parallax Image Layers | patterns/hero-sections.md |
| Animated color background | Animated Gradient Background | patterns/hero-sections.md |
| Image + text side by side | Split-Screen Hero | patterns/hero-sections.md |
| Navbar changes on scroll | Transparent-to-Solid | patterns/navigation.md |
| Mobile hamburger menu | Full-Screen Hamburger Overlay | patterns/navigation.md |
| Animated link hover | Animated Underline Links | patterns/navigation.md |
| Bilingual language toggle | Bilingual Language Switcher | patterns/navigation.md |
| Button that pulls to cursor | Magnetic Button Effect | patterns/hover-cursor.md |
| Image color on hover | Grayscale-to-Color | patterns/hover-cursor.md |
| Card perspective effect | 3D Card Tilt | patterns/hover-cursor.md |
| Custom cursor that follows mouse | Custom Cursor Follower | patterns/hover-cursor.md |
| Route transitions | Fade, Clip-Path, Shared Layout | patterns/page-transitions.md |
| Animated card grid | Staggered Card Grid | patterns/content-elements.md |
| Numbers counting up | Counter Animation | patterns/content-elements.md |
| Before/after comparison | Image Comparison Slider | patterns/content-elements.md |
| Testimonial display | Testimonial Carousel | patterns/content-elements.md |
| Collapsible sections | Accordion with Smooth Height | patterns/content-elements.md |
| Progressive image loading | Blur-to-Sharp Lazy Load | patterns/content-elements.md |
| Service listing cards | Service Card | patterns/medical-spa.md |
| Doctor profiles | Doctor Profile Card | patterns/medical-spa.md |
| Treatment results display | Before/After Slider | patterns/medical-spa.md |
| Appointment booking | Multi-Step Booking Form | patterns/medical-spa.md |
| WhatsApp contact | WhatsApp Floating Button | patterns/medical-spa.md |
| Client reviews | Review Carousel with Stars | patterns/medical-spa.md |
| Context | Duration | Easing |
|---|---|---|
| Micro-interaction (hover, focus) | 150-250ms | ease-out |
| Element reveal on scroll | 400-600ms | ease-out or power2.out |
| Page transition | 300-500ms | ease-in-out |
| Stagger between items | 50-100ms | — |
| Background parallax | Continuous | linear |
| Number counter | 1500-2500ms | power3.out |
| Menu open/close | 300-400ms | ease-in-out |
| Modal/overlay | 200-300ms | ease-out |
#0D1B3E (deep navy) — Text, headers#C9A035 (gold) — CTAs, accent borders#FFFFFF (white) — Backgrounds#FAFBFC — Section backgrounds#F5F3F0 — Subtle dividers#B76E79 | Dark: #2C2C2C | Light: #F7F3F0#1B4332 | Accent: #D4AF37 | Neutral: #F8F6F2#111111 | Neutral: #E8E4DF | Light: #FFFFFF#E6D5B8 | Text: #4A4A4A | Light: #FEFDFBCustomize: Define your brand palette once in your project's Tailwind config + a design token file. Reference everywhere by semantic name (
bg-brand-primary), not hex.
| Role | Font | Weight | Size (desktop) |
|---|---|---|---|
| Hero headline | Georgia, Playfair Display | 300-400 | 48-72px |
| Section headline | Georgia, Cormorant Garamond | 400 | 32-40px |
| Body text | Inter, DM Sans | 400 | 16-18px |
| Button/CTA | Inter, DM Sans | 500-600 | 14-16px |
| Caption/meta | Inter, DM Sans | 400 | 12-14px |
| Arabic headlines | Noto Kufi Arabic | 400-500 | 32-48px |
| Arabic body | Noto Sans Arabic | 400 | 16-18px |
premium-web-design/
SKILL.md <- This file
patterns/
scroll-animations.md <- 8 scroll patterns
hero-sections.md <- 5 hero patterns
navigation.md <- 4 nav patterns
hover-cursor.md <- 4 hover/cursor patterns
page-transitions.md <- 3 transition patterns
content-elements.md <- 6 content patterns
medical-spa.md <- 6 medical spa patterns
references/
[domain].md <- Analyzed reference sites
tools/
ANIMATION-TOOLS.md <- GSAP, Framer Motion, Lenis reference
npm install gsap @gsap/react motion lenis
Note:
motionis the successor toframer-motion(rebranded mid-2025). Import frommotion/reactinstead offramer-motion.
| Source | What It Offers | When to Use |
|---|---|---|
| 21st.dev Magic (MCP) | Generate React+TS+Tailwind components from natural language | Before hand-coding standard UI components |
| Origin UI (coss.com/ui) | 400+ free copy-paste React+Tailwind components (MIT) | Browse for ready-made cards, forms, navbars, inputs |
| shadcn/ui | Accessible, composable React components | Base primitives that you customize |
| Radix UI | Unstyled accessible primitives | When you need total visual control |
dir="rtl"text-start not text-left)ps-4 not pl-4)Core thesis: In the AI era, the differentiator is interactivity and intentional design. Scroll-stopping websites beat generic AI output. Designs conceived in Figma; implemented in code with React + GSAP + Framer Motion + Lenis.
Signature techniques to replicate:
mix-blend-mode + z-index)ScrollTrigger with scrub)AnimatePresence)See references/ for full analyses of specific sites you want to learn from.
This skill is an UPGRADE LAYER. It works alongside existing skills, never replacing them.
| Skill | What It Does | When to Use It WITH premium-web-design |
|---|---|---|
| 21st-dev-magic | Generates base components from natural language via MCP | START here for standard components (cards, navs, forms), then apply premium-web-design animation patterns on top |
| frontend-design (Anthropic plugin) | Full frontend development workflow, component scaffolding | Use for project structure, build pipeline, component organization. premium-web-design adds the animation/interaction polish |
| impeccable | Design polish, micro-interactions, pixel-perfect refinement | Apply AFTER premium-web-design patterns are in place — impeccable is the final coat of paint |
| tailwind-patterns | Tailwind-specific utilities, responsive patterns, design tokens | Use for Tailwind class strategy |
| ui-ux-pro-max | UX strategy, user flows, information architecture | Use BEFORE premium-web-design — decide WHAT to build and WHY |
| react-patterns | React component architecture, hooks, state management | Use for component structure decisions |
| i18n-localization | Full i18n setup, RTL support, translation workflow | Use alongside — every premium-web-design pattern has RTL notes |
| instagram-access | Download Instagram assets (photos, reels, stories) | Use to pull real brand imagery and social proof content |
| MCP Server | What It Does | When to Use |
|---|---|---|
| @21st-dev/magic | Generate React+TS+Tailwind components from natural language | Before hand-coding — check if a ready-made component exists |
| context7 | Look up live library documentation | Before writing GSAP/Framer Motion/React code — get latest API syntax |
| playwright | Browser automation, visual testing, screenshots | Preview and test components in real browser |
| github | PRs, issues, repo management | Commit, push, review workflow |
| exa-web-search | Deep web research | Research design inspiration, competitor analysis |
~/.claude/references/awesome-design-md/) — DESIGN.md files from Airbnb, Apple, Linear, Spotify, Stripe. Use for design system principles from world-class teams.references/ subfolder) — Analyzed websites. Use for specific animation techniques and luxury design patterns.