Vibe Index
🎯

fashion-styling

🎯Skill

from nikojuu/hienohelma

VibeIndex|
What it does

Designs comprehensive fashion boutique theme with elegant, modern styling across website phases, focusing on sophisticated typography and geometric accents.

πŸ“¦

Part of

nikojuu/hienohelma(2 items)

fashion-styling

Installation

npm runRun npm script
npm run dev
YarnRun with Yarn
yarn dev
pnpmRun with pnpm
pnpm dev
BunRun with Bun
bun dev
πŸ“– Extracted from docs: nikojuu/hienohelma
Need more details? View full documentation on GitHub β†’
0Installs
-
Last UpdatedJan 31, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

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)

Overview

# 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 /}

Link Text

```

Footer Pattern

```tsx

{/ Content /}

```

Dashboard Sidebar

```tsx

```

---

# 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

Section Title

```

Hero Pattern

```tsx

{/ Image with overlay /}

Headline

```

Product Card Pattern

```tsx

{/ Image /}

{/ Sale badge /}

-30%

{/ Wishlist button /}

{/ Content /}

Product Name

Brand

€99.00

€129.00

```

Category Card Pattern

```tsx

```

---

# 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 /}

{/ Secondary /}

```

Form Input Pattern

```tsx

```

Card with Corner Accents

```tsx

{/ Border /}

{/ Corner accents /}

{/ Content /}

```

Checkout Steps Pattern

```tsx

{/ Completed step /}

{/ Line /}

{/ Current step /}

2

{/ Line /}

{/ Future step /}

3

```

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

Page Title

Page description

```

Status Badges

```tsx

{/ Pending /}

Pending

{/ Paid/Success /}

Paid

{/ Shipped /}

Shipped

```

Empty State Pattern

```tsx

{/ Border /}

{/ Corner accents /}

No items yet

Description text

Start Shopping

```

About Page Blocks

```tsx

{/ Alternating layout /}

Our Story

Headline

Content

```

---

# 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 /}

{/ Gradient line /}

{/ Center line /}

```

---

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)

More from this repository1

🎯
pupun-korvat-styling🎯Skill

pupun-korvat-styling skill from nikojuu/hienohelma