Agent skill

fashion-styling

Complete styling guide for women's fashion boutique theme. Apply phase by phase for complete restyling. Modern editorial aesthetic with elegant typography, geometric accents, and sophisticated animations. (project)

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/fashion-styling

SKILL.md

Fashion Boutique Theme

Brand Voice: Modern, sophisticated, confident, feminine, editorial Target Feel: High-end fashion magazine meets accessible boutique

Usage

Apply phases in order:

  1. "Apply fashion-styling phase 1" → Foundation
  2. "Apply fashion-styling phase 2" → Layout
  3. "Apply fashion-styling phase 3" → Homepage & Products
  4. "Apply fashion-styling phase 4" → Cart, Checkout & Auth
  5. "Apply fashion-styling phase 5" → Dashboard & Static Pages

Clear context between phases if needed.

Phase 1: Foundation

Files:

src/app/globals.css
src/lib/fonts.ts
tailwind.config.ts

Colors (globals.css)

Add these CSS variables:

Name HSL Role
blush 350 60% 75% Primary accent
champagne-gold 45 50% 70% Secondary accent
soft-ivory 40 30% 98% Background
pearl 40 20% 96% Card backgrounds
midnight 220 25% 15% Text, dark sections
whisper-pink 350 40% 95% Subtle backgrounds
wine 350 50% 35% Sale, errors
stone 30 10% 50% Secondary text

Fonts (fonts.ts)

Role Font Usage
Primary Cormorant Garamond Headings, titles
Secondary Inter Body, buttons

Tailwind Config

  • Map all color variables
  • Set border-radius to 2px (minimal rounding)
  • Add font-primary and font-secondary

CSS Utilities (globals.css)

css
.text-gradient-fashion {
  background: linear-gradient(135deg, hsl(350 60% 65%), hsl(45 50% 70%), hsl(350 60% 75%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.shimmer-fashion {
  background: linear-gradient(110deg, transparent 20%, hsl(45 60% 85% / 0.3) 40%, hsl(350 60% 90% / 0.4) 50%, hsl(45 60% 85% / 0.3) 60%, transparent 80%);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

Phase 2: Layout & Navigation

Files:

src/components/Navigation/StickyNavbar.tsx
src/components/Navigation/Navbar.tsx
src/components/Navigation/NavbarLinks.tsx
src/components/Navigation/MobileLinks.tsx
src/components/Navigation/CustomerDropdown.tsx
src/components/Footer.tsx
src/app/(auth)/(dashboard)/layout.tsx

Styling Rules

Backgrounds: bg-soft-ivory or bg-pearl Text: text-midnight headings, text-midnight/70 body Borders: border-blush/20 or border-stone/20 Hovers: Transition to blush or champagne-gold

Navigation Pattern

tsx
{/* Link with underline animation */}
<a className="relative font-secondary text-sm text-midnight hover:text-blush transition-colors">
  Link Text
  <span className="absolute bottom-0 left-1/2 w-0 h-[1px] bg-blush transition-all duration-300 group-hover:w-full group-hover:left-0" />
</a>

Footer Pattern

tsx
<footer className="bg-soft-ivory border-t border-blush/20">
  <div className="h-[1px] bg-gradient-to-r from-transparent via-blush/30 to-transparent" />
  {/* Content */}
</footer>

Dashboard Sidebar

tsx
<aside className="bg-pearl border border-blush/10 p-6">
  <h2 className="font-primary text-xl text-midnight mb-4">My Account</h2>
  <div className="h-[1px] bg-gradient-to-r from-blush/40 to-transparent mb-4" />
  {/* Nav links */}
</aside>

Phase 3: Homepage & Products

Files:

src/app/(storefront)/page.tsx
src/components/Hero.tsx
src/components/subtitle.tsx
src/components/Homepage/CategorySection.tsx
src/components/Homepage/AboutMeSection.tsx
src/components/Product/ProductCarousel.tsx
src/components/ProductCard.tsx
src/components/PriceDisplay.tsx
src/components/ImageSlider.tsx
src/components/imageSliderWithZoom.tsx
src/components/Product/ProductDetail.tsx
src/components/Product/WishlistButton.tsx
src/components/Product/Breadcrumbs.tsx
src/components/Product/SortOptions.tsx
src/components/Product/Pagination.tsx
src/app/(storefront)/products/[...slug]/page.tsx
src/app/(storefront)/product/[slug]/page.tsx

Section Header Pattern

tsx
<div className="flex items-center justify-center gap-4 mb-6">
  <div className="w-16 h-[1px] bg-gradient-to-r from-transparent to-blush/60" />
  <div className="w-2 h-2 rounded-full border border-blush/60" />
  <div className="w-16 h-[1px] bg-gradient-to-l from-transparent to-blush/60" />
</div>
<h2 className="text-3xl md:text-4xl font-primary text-midnight text-center">
  Section Title
</h2>

Hero Pattern

tsx
<section className="relative min-h-[70vh] bg-soft-ivory">
  {/* Image with overlay */}
  <div className="absolute inset-0 bg-gradient-to-t from-midnight/40 via-transparent to-transparent" />

  <div className="relative z-10">
    <h1 className="text-5xl md:text-7xl font-primary text-soft-ivory tracking-tight">
      Headline
    </h1>
    <button className="px-8 py-4 bg-soft-ivory text-midnight font-secondary text-sm tracking-wider uppercase hover:bg-blush transition-colors">
      Shop Now
    </button>
  </div>
</section>

Product Card Pattern

tsx
<div className="group relative bg-soft-ivory overflow-hidden">
  {/* Image */}
  <div className="aspect-[3/4] overflow-hidden">
    <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
  </div>

  {/* Sale badge */}
  <span className="absolute top-3 left-3 px-2 py-1 bg-wine text-soft-ivory text-xs font-secondary uppercase">
    -30%
  </span>

  {/* Wishlist button */}
  <button className="absolute top-3 right-3 p-2 bg-soft-ivory/80 text-midnight hover:text-blush transition-colors">
    <Heart className="w-5 h-5" />
  </button>

  {/* Content */}
  <div className="p-4">
    <h3 className="font-primary text-lg text-midnight">Product Name</h3>
    <p className="text-sm font-secondary text-stone">Brand</p>
    <div className="mt-2 flex items-center gap-2">
      <span className="font-secondary text-midnight">€99.00</span>
      <span className="font-secondary text-stone line-through text-sm">€129.00</span>
    </div>
  </div>
</div>

Category Card Pattern

tsx
<a className="group relative aspect-[3/4] overflow-hidden">
  <img className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
  <div className="absolute inset-0 bg-gradient-to-t from-midnight/70 via-midnight/20 to-transparent" />
  <div className="absolute bottom-6 left-6">
    <h3 className="font-primary text-2xl text-soft-ivory">Category</h3>
    <span className="text-sm font-secondary text-soft-ivory/70">24 products</span>
  </div>
</a>

Phase 4: Cart, Checkout & Auth

Files:

src/app/(storefront)/cart/page.tsx
src/components/Cart/Cart.tsx
src/components/Cart/CartItem.tsx
src/components/Cart/CartPage.tsx
src/components/Cart/AddToCartButton.tsx
src/components/Cart/CheckoutButton.tsx
src/components/Cart/CampaignAddedCartItems.tsx
src/components/Checkout/CheckoutSteps.tsx
src/components/Checkout/CustomerDataForm.tsx
src/components/Checkout/SelectShipmentMethod.tsx
src/components/Checkout/StripeCheckoutPage.tsx
src/components/Checkout/PaytrailCheckoutPage.tsx
src/components/Checkout/PaytrailPaymentSelection.tsx
src/app/(storefront)/payment/success/[orderId]/page.tsx
src/app/(auth)/login/page.tsx
src/app/(auth)/register/page.tsx
src/components/Auth/Loginform.tsx
src/components/Auth/RegisterForm.tsx
src/components/Auth/ForgotPasswordForm.tsx
src/components/Auth/ResetPasswordForm.tsx

Button Patterns

tsx
{/* Primary CTA */}
<button className="w-full px-8 py-4 bg-midnight text-soft-ivory font-secondary text-sm tracking-wider uppercase transition-all duration-300 hover:bg-blush hover:text-midnight">
  Add to Cart
</button>

{/* Secondary */}
<button className="px-8 py-4 border border-midnight/30 text-midnight font-secondary text-sm tracking-wider uppercase hover:border-blush hover:bg-blush/10 transition-all">
  Continue Shopping
</button>

Form Input Pattern

tsx
<div className="space-y-2">
  <label className="text-sm font-secondary text-midnight">Email</label>
  <input className="w-full px-4 py-3 bg-pearl border border-stone/20 text-midnight placeholder:text-stone/50 focus:outline-none focus:ring-2 focus:ring-blush/50 transition-all" />
</div>

Card with Corner Accents

tsx
<div className="group relative bg-soft-ivory p-6">
  {/* Border */}
  <div className="absolute inset-0 border border-blush/10 pointer-events-none group-hover:border-blush/25 transition-colors" />

  {/* Corner accents */}
  <div className="absolute top-0 left-0 w-4 h-4 border-l border-t border-blush/20 group-hover:w-6 group-hover:h-6 transition-all duration-300" />
  <div className="absolute top-0 right-0 w-4 h-4 border-r border-t border-blush/20 group-hover:w-6 group-hover:h-6 transition-all duration-300" />
  <div className="absolute bottom-0 left-0 w-4 h-4 border-l border-b border-blush/20 group-hover:w-6 group-hover:h-6 transition-all duration-300" />
  <div className="absolute bottom-0 right-0 w-4 h-4 border-r border-b border-blush/20 group-hover:w-6 group-hover:h-6 transition-all duration-300" />

  {/* Content */}
</div>

Checkout Steps Pattern

tsx
<div className="flex items-center justify-center gap-4">
  {/* Completed step */}
  <div className="w-8 h-8 rounded-full bg-blush text-midnight flex items-center justify-center">
    <Check className="w-4 h-4" />
  </div>

  {/* Line */}
  <div className="w-12 h-[1px] bg-blush/50" />

  {/* Current step */}
  <div className="w-8 h-8 rounded-full border-2 border-blush text-midnight flex items-center justify-center font-secondary text-sm">
    2
  </div>

  {/* Line */}
  <div className="w-12 h-[1px] bg-stone/30" />

  {/* Future step */}
  <div className="w-8 h-8 rounded-full border border-stone/30 text-stone flex items-center justify-center font-secondary text-sm">
    3
  </div>
</div>

Toast Styling

tsx
{/* Success */}
className="bg-blush/10 border border-blush/30 text-midnight"

{/* Error */}
className="bg-wine/10 border border-wine/30 text-wine"

Phase 5: Dashboard & Static Pages

Files:

src/app/(auth)/(dashboard)/mypage/page.tsx
src/app/(auth)/(dashboard)/myorders/page.tsx
src/app/(auth)/(dashboard)/mywishlist/page.tsx
src/app/(auth)/(dashboard)/myinfo/page.tsx
src/components/CustomerDashboard/EditCustomerForm.tsx
src/app/(storefront)/about/page.tsx
src/components/Aboutpage/AboutHero.tsx
src/components/Aboutpage/AboutBlock.tsx
src/components/Aboutpage/AboutCTA.tsx
src/app/(storefront)/contact/page.tsx
src/components/Contactpage/ContactForm.tsx
src/app/(storefront)/privacy-policy/page.tsx
src/app/(storefront)/terms/page.tsx
src/app/(storefront)/gallery/page.tsx

Page Header Pattern

tsx
<div className="mb-8">
  <div className="flex items-center gap-3 mb-2">
    <div className="w-2 h-2 rounded-full border border-blush/60" />
    <h1 className="text-2xl md:text-3xl font-primary text-midnight">Page Title</h1>
  </div>
  <p className="font-secondary text-midnight/60 ml-5">Page description</p>
</div>

Status Badges

tsx
{/* Pending */}
<span className="px-3 py-1 bg-champagne-gold/20 text-midnight border border-champagne-gold/40 text-xs font-secondary uppercase">
  Pending
</span>

{/* Paid/Success */}
<span className="px-3 py-1 bg-blush/20 text-midnight border border-blush/40 text-xs font-secondary uppercase">
  Paid
</span>

{/* Shipped */}
<span className="px-3 py-1 bg-blush/30 text-midnight border border-blush/50 text-xs font-secondary uppercase">
  Shipped
</span>

Empty State Pattern

tsx
<div className="relative bg-soft-ivory p-12 text-center">
  {/* Border */}
  <div className="absolute inset-0 border border-blush/10 pointer-events-none" />

  {/* Corner accents */}
  <div className="absolute top-0 left-0 w-8 h-8 border-l border-t border-blush/30" />
  <div className="absolute top-0 right-0 w-8 h-8 border-r border-t border-blush/30" />
  <div className="absolute bottom-0 left-0 w-8 h-8 border-l border-b border-blush/30" />
  <div className="absolute bottom-0 right-0 w-8 h-8 border-r border-b border-blush/30" />

  <Icon className="w-16 h-16 text-midnight/20 mx-auto mb-6" />
  <h3 className="text-xl font-primary text-midnight mb-3">No items yet</h3>
  <p className="text-sm font-secondary text-midnight/60 mb-6">Description text</p>
  <a href="/products" className="inline-flex px-8 py-3 bg-midnight text-soft-ivory font-secondary text-sm tracking-wider uppercase hover:bg-blush hover:text-midnight transition-all">
    Start Shopping
  </a>
</div>

About Page Blocks

tsx
{/* Alternating layout */}
<div className="grid md:grid-cols-2 gap-12 items-center">
  <div className={reverse ? "md:order-2" : ""}>
    <img className="w-full aspect-[4/5] object-cover" />
  </div>
  <div>
    <span className="text-xs tracking-[0.2em] uppercase font-secondary text-stone">Our Story</span>
    <h2 className="mt-2 text-3xl font-primary text-midnight">Headline</h2>
    <div className="mt-2 w-12 h-[1px] bg-gradient-to-r from-blush to-transparent" />
    <p className="mt-6 font-secondary text-midnight/70 leading-relaxed">Content</p>
  </div>
</div>

Quick Reference

Typography

tsx
font-primary    → Headings (Cormorant Garamond)
font-secondary  → Body/buttons (Inter)

text-midnight        → Dark text
text-midnight/70     → Body text
text-stone           → Muted text
text-soft-ivory      → Light text (on dark bg)

Backgrounds

tsx
bg-soft-ivory   → Main background
bg-pearl        → Cards, sections
bg-midnight     → Dark sections
bg-blush/10     → Subtle highlight

Accents

tsx
border-blush/20     → Subtle borders
border-blush/40     → Corner accents
bg-blush            → Hover states
bg-wine             → Sale badges
bg-champagne-gold   → Premium accents

Decorative

tsx
{/* Circle */}
<div className="w-2 h-2 rounded-full border border-blush/60" />

{/* Gradient line */}
<div className="h-[1px] bg-gradient-to-r from-blush/40 to-transparent" />

{/* Center line */}
<div className="h-[1px] bg-gradient-to-r from-transparent via-blush/30 to-transparent" />

Checklist

  • Phase 1: Foundation (3 files)
  • Phase 2: Layout & Navigation (7 files)
  • Phase 3: Homepage & Products (17 files)
  • Phase 4: Cart, Checkout & Auth (20 files)
  • Phase 5: Dashboard & Static (14 files)

Didn't find tool you were looking for?

Be as detailed as possible for better results