| name | luxury-design-taste |
| description | Luxury streetwear design taste for SkyyRose surfaces — visual hierarchy, restraint, materials, motion, and imagery treatment. Use when doing any visual design, design review, or elevation work on skyyrose.co or the DevSkyy dashboard (mockups, theme CSS, hero sections, collection pages, motion passes). Do NOT use for generic non-SkyyRose UI work (use frontend-design) or native iOS glass surfaces (use liquid-glass-design). Replaces the lost high-end-visual-design / design-taste-frontend / image-taste-frontend skills. |
Luxury Design Taste — SkyyRose
Brand truth: "Luxury Grows from Concrete." Oakland-rooted luxury streetwear — NOT European maison minimalism. Canonical references: Kith, Oaklandish, Culture Kings, Fear of God, Palm Angels. Never Chanel/Dior/Celine lineage.
When to use
- A surface on skyyrose.co (theme templates, collection pages, PDP, hero sections) or the devskyy.app dashboard is being designed, restyled, reviewed, or "elevated".
- A mockup or design reference HTML is being graded against brand canon.
- A motion/animation pass is being added to any SkyyRose surface.
- Another design skill (impeccable, ui-ux-pro-max, frontend-design) produced output that must be filtered through SkyyRose canon before shipping.
When NOT to use: generic frontend work with no SkyyRose brand surface (frontend-design owns that); native iOS SwiftUI/UIKit (liquid-glass-design); 3D scene architecture (immersive-interactive-architect / skyyrose-3d-web-os); product-copy or SEO work (skyyrose-market plugins).
Inputs
Required before any taste judgment. If any is absent, stop and obtain it — never proceed on memory.
| Input | Canonical location | If absent |
|---|
| Brand tokens + fonts | CLAUDE.md §6 Brand; wordpress-theme/skyyrose-flagship/theme.json; data/brand/typography.json | Stop — read them; memory rots, tokens do not |
| Per-collection identity | wordpress-theme/skyyrose-flagship/data/collections/<slug>/identity.json | Stop — this is the SOT (see docs/CLAUDE.md); never invent a palette |
| Visual reference canon | docs/brand/visual-references.md (The Five) | Stop — read it; proposing European-maison references is a canon violation |
| Product imagery, if any product appears | data/sot-images.json via skyyrose.core.sot_images | Stop — filenames are not identity; SOT-resolve or do not show the product |
| The surface under review | the actual file(s), or a live URL | Stop — taste review of an unread surface is a guess |
The garment is the protagonist
Every surface serves the product photography. Copy, chrome, and motion are supporting cast.
- Imagery: on-model shots outrank ghost mannequins outrank flat lays. Full-bleed where possible.
- NEVER: urgency timers, countdown clocks, related-products/"wears with" cross-sell (retired canon), fake scarcity, discount-brand energy.
- Hero titles = brand-script lockup IMAGES (
assets/images/hero-overlays/ for BR/LH/SIG, assets/images/logos/ for Kids), never type-rendered. Fonts are for interior text only.
Restraint rules (what separates luxury from template)
- One accent per collection surface: Signature
#D4AF37, Black Rose #C0C0C0, Love Hurts #DC143C, Kids Capsule #B76E79, on dark #0A0A0A. Two accents on one screen = flea market.
- Whitespace is the luxury signal. If a section feels empty, that's usually correct. Density is for dashboards, not storefronts.
- Type scale: big display moments (Archivo, expanded via
font-variation-settings: 'wdth' 125) + tiny wide-tracked utility labels (Anton, 10-13px, 4-8px letter-spacing). The MIDDLE sizes are where generic creeps in — avoid 16-20px workhorse type on marketing surfaces.
- Materials: glass (rgba white 0.04-0.08 + blur), hairline borders (1px, low-alpha white), metallic gradients ONLY on brand-token hues. No drop shadows heavier than
0 24px 80px rgba(0,0,0,.4) on dark.
- Contrast is a brand constraint: crimson
#DC143C on #0A0A0A measures below WCAG AA for body text (see Verification) — fills/borders/glows only; de-emphasised text uses --color-text-muted (#B3B3B3, 9.44:1), never low-alpha white guessed by eye.
Motion taste
- Ease:
cubic-bezier(.16,1,.3,1) (the house curve, --ease-luxury). Duration 0.6-1.2s for reveals; nothing snaps.
- Motion must have narrative purpose: reveal on scroll, parallax depth, slow zoom (
heroZoom-style 20-30s ambient). Decorative twitching = slop.
- Everything animated pauses under
@media (prefers-reduced-motion: reduce) and stays legible when frozen.
- Auto-scrolling media (marquees, strips) must remain background texture: opacity ≤ 0.25 behind content, masked edges, and never compete with the lockup.
Imagery treatment
- Product pixels are identity — verify garment matches SKU (eyes-on, reading pixels) before any imagery ships. Wrong-garment is the #1 recurring defect (lh-005 fanny-pack hallucination).
- Editorial treatment for background/ambient use: desaturate 30-40%, brightness 0.7-0.8, contrast +5%, vignette-mask edges. Full color is reserved for the product being sold.
- Aspect discipline: portrait 3:4/2:3 for garments, wide only for scenes. Never stretch, never letterbox with visible bars.
Slop detectors (instant fail)
Centered-everything symmetric layouts; gradient text on headings; emoji in UI; 12-col bootstrap rhythm; uniform border-radius 8px everywhere; stock-photo energy (non-brand models, generic city b-roll); grey-on-white "SaaS clean" palettes; identical card grids without one broken/featured element for rhythm.
Procedure
- Load inputs (table above). Read the surface's actual CSS/HTML/template files — never review from a description.
- Identify the collection register from
identity.json for the surface; note its single permitted accent hex.
- Grade against each section above in order: protagonist → restraint → motion → imagery → slop detectors. Record each violation as
file:line + the rule it breaks.
- For every proposed change, state which rule it serves in one line. A change serving no rule is scope creep — drop it.
- If the surface is theme CSS/JS, every edit requires
cd wordpress-theme && npm run build — production serves .min (see skyyrose-design:theme-min-build).
- Run Verification below before reporting the pass/fail verdict.
Verification
Taste is judged; these floors are measured. A surface that fails a floor fails the review regardless of how it "feels".
- Contrast floor — measure, never eyeball:
python3 -c "
def lum(h):
r,g,b=[int(h[i:i+2],16)/255 for i in (0,2,4)]
f=lambda c: c/12.92 if c<=0.03928 else ((c+0.055)/1.055)**2.4
r,g,b=f(r),f(g),f(b); return 0.2126*r+0.7152*g+0.0722*b
fg,bg='DC143C','0A0A0A'
l1,l2=sorted((lum(fg),lum(bg)),reverse=True)
print(f'{(l1+0.05)/(l2+0.05):.2f}:1')
"
PASS: every body-text fg/bg pair ≥ 4.5:1, large-display pairs ≥ 3:1. [repro]
Observed 2026-07-28: #DC143C on #0A0A0A → 3.97:1 — below AA, which is WHY crimson is fills/borders/glows only.
- Cut-font guard — the four retired fonts never return as declarations:
grep -rniE "font-family[^;]*(playfair|cormorant|bebas|yellowtail)" \
wordpress-theme/skyyrose-flagship/assets/css wordpress-theme/skyyrose-flagship/theme.json
PASS: exits 1, prints nothing. [repo] (Observed 2026-07-28: clean. A bare name-grep false-positives on the fonts.css:13 changelog comment — scope to font-family declarations as above.)
- Accent-discipline census — the palette in use must be the brand palette:
grep -rhoE '#[0-9a-fA-F]{6}\b' wordpress-theme/skyyrose-flagship/assets/css/*.css \
| grep -v '.min.css' | tr 'A-F' 'a-f' | sort | uniq -c | sort -rn | head -8
PASS: top counts are brand tokens (#b76e79 #0a0a0a #d4af37 #dc143c #c0c0c0) + neutrals; a non-token hue appearing in the top ranks is a drift finding. [repo]
- Eyes-on render (mobile 390px + desktop) via Playwright/Chrome DevTools is a BROWSER aspect this skill cannot self-execute headlessly. A SKIP is not a PASS — flag it explicitly for the caller or run
verify:theme aspect responsive in a browser-capable session. Severity claims about the live site require that [live] probe.
Rule inherited from docs/skill-authoring-standard.md: if any check above errors or times out, its empty output is an artifact, not a pass — re-run by hand. Before attributing a census/grep finding to your change, run the same command against a pristine tree (git archive HEAD wordpress-theme | tar -x -C <scratch>), never git stash.
Worked example
Real session, 2026-07-28, this repo. Grading the theme's token discipline before a design pass:
$ grep -rhoE '#[0-9a-fA-F]{6}\b' wordpress-theme/skyyrose-flagship/assets/css/*.css \
| grep -v '.min.css' | tr 'A-F' 'a-f' | sort | uniq -c | sort -rn | head -8
478
146
103
49
48
46
31
14
Verdict: top 8 are all brand tokens or neutrals (#050505/#2a2a2a are dark-surface steps) — no palette drift [repo]. The contrast probe on the same session returned 3.97:1 for crimson-on-dark [repro], confirming the fills/borders/glows-only rule is load-bearing, not stylistic.
Failure modes
- Wrong-garment imagery ships — the #1 recurring defect (lh-005; bug-096 ×30 hallucinated brand canon on 30 SKUs). Cause: trusting filenames/manifests instead of reading pixels. Fix: SOT-resolve + eyes-on before anything ships.
- "Looks like a plausible BR/LH look" passes QC — lenient-QC defect (bug-276 class); cost 16cr of bad hero clips. QC only against the canonical reference asset, side-by-side.
- Crimson used for body text — reads fine to the eye on a bright monitor, fails AA at 3.97:1. Always measure (Verification #1).
- Cut fonts reintroduced via a well-meaning "elegant serif" suggestion (ui-ux-pro-max recommends Cormorant for luxury queries — observed 2026-07-28). Filter every external recommendation through Verification #2.
- Second accent creeps in when composing sections from different collections onto one surface. One accent per surface, always.
- Stale
.min shipped — source CSS edited, .min not rebuilt; production serves .min (bug-287 adjacent). npm run build + verify:theme --only min-sync closes it.
Precedence
When design sources disagree: project .impeccable.md > this skill > impeccable > ui-ux-pro-max tables > interactive-web-development examples. ui-ux-pro-max's html-tailwind default and Liquid Glass recommendation are overridden for this project (vanilla CSS; glassmorphism banned outside product-card-holo). impeccable's reflex-font rejection does not apply to locked brand fonts (Archivo, Hanken Grotesk, Anton, Cinzel, Inter, plus the per-collection name-scripts: SkyyRose Black Rose Script, SkyyRose Love Hurts Graffiti, Pinyon Script, Grand Hotel — lockup images only, never interior).
