Nuude ecommerce

Skill BAKUGOS1/SkilledAgents-Toolkit/skills/projects/nuude/nuude-ecommerce

Build and review the NUUDE premium lipstick e-commerce experience, including homepage sections, product pages, shade selection, conversion flows, responsive behavior, and brand-specific visual rules. Use for NUUDE storefront work in Stitch or frontend code.From its SKILL.md

Install

npx -y skills add BAKUGOS1/SkilledAgents-Toolkit --skill nuude-ecommerce

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.0 KB, 769 tokens by cl100k_base, as published. Nobody here has run it

NUUDE E-Commerce Build Skill

Purpose

Build the NUUDE premium lipstick e-commerce website using Stitch. Every component must feel premium, modern, and conversion-optimised.

Homepage Sections (Build in This Order)

1. AnnouncementBar

Sticky on mobile. Black background (#0D0D0D), cream text (#FAF7F2)
Content: "Free shipping on ₹999+ | Cruelty-Free & Vegan | Launch: 25% Off"
Single line. No close button.

2. Navigation

Items: SHOP | SHADES | OUR STORY | SHADE FINDER | Cart icon
Logo: "NUUDE" in Playfair Display, center-aligned
Transparent over hero on desktop, solid on scroll
No dropdowns on mobile — hamburger to full-screen menu

3. HeroSection

Full-bleed background (solid deep wine #6B1D2A or image placeholder)
"NUUDE" in large Playfair Display, white
Tagline: "Colour, considered." below
CTA button: "SHOP NOW" — black fill, cream text, sharp rectangle
Mobile: 80vh height. CTA in thumb-reach zone (bottom 40% of screen)

4. BestsellerStrip

Horizontal scroll on mobile
4 shade swatches as coloured circles (use actual hex colours from shade data)
Below each: shade name + "₹699" price
Tap = links to product page

5. BrandPromiseBar

Three columns, single row
Icon + label each: "10-Hr Stay" | "Hydrating Formula" | "Cruelty-Free"
Minimal. No paragraphs.

6. ShadeFinderCTA

Full-width section, cream background
Heading: "Find Your Perfect Shade in 60 Seconds"
Button: "TAKE THE QUIZ" — wine (#6B1D2A) fill, cream text

7. SocialProofGrid

Grid of 4–6 placeholder squares (representing UGC)
Label: "Real shades. Real skin."

8. BrandStoryTeaser

2 lines max: "Born from a belief that lip colour should feel as extraordinary as the woman wearing it."
Link: "Read Our Story →"

9. EmailCapture

Heading: "Join the inner circle"
Subtext: "Get 15% off your first order"
Single input field + submit button

10. Footer

Links: Shop | FAQ | Shipping & Returns | Contact
Social: Instagram icon
Payment badges placeholder
"Made in India with love"

Product Page Structure

Image Area

Left side on desktop, full-width on mobile
Swipeable gallery with dot indicators
First image: shade colour block (not product photo)

Product Info

Product title: "NUUDE Velvet Matte — [Shade Name]"
Price: ₹899 strikethrough, ₹699 active
Shade selector: row of colour dots, tap to select
Shade description: one evocative line
Skin tone hint: "Best for: [match]"
Add to Cart: full-width black button, sticky on mobile
Below button: "Ships in 2–3 days | Free returns"
Trust badges: 4 icons in a row

Below the Fold

Ingredients accordion
How to Wear (3 looks)
Complete the Look (cross-sell)
Reviews section
Recently Viewed strip

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.