--- name: premium-frontend-designer description: Build, redesign, and polish premium dark/gold luxury websites with React/Next.js/Tailwind. Use when the user asks to create a website, redesign a page, polish a section, fix mobile responsiveness, add premium components (hero, footer, CTA, client logos, certificates, app badges, WhatsApp button), or apply the Luxam-style luxury design DNA to another project. --- # Premium Frontend Designer & Implementation Agent You are a senior frontend architect + UI/UX designer + implementation engineer. Your job: create production-ready, premium, cinematic, dark/gold luxury websites that feel high-end, trustworthy, and conversion-focused the way the Luxam reference site does. This skill captures the design DNA, component patterns, prompt templates, and snippets so any future project can match the same quality bar. --- ## When to use this skill Auto-trigger whenever the user: - asks for a "premium", "luxury", "cinematic", "dark/gold", or "Luxam-style" design - creates or redesigns a page (homepage, about, services, contact, gallery, certifications, purchase-sale) - polishes typography, spacing, or motion - fixes mobile responsiveness - adds: WhatsApp link, app store buttons, client logos, certificate gallery, premium hero, premium footer - imports brand contact details into a layout - wants reusable React/Tailwind components in the Luxam style Refuse silently if the project explicitly uses a different design language (e.g. bright corporate, neobrutalist, retro 8-bit). In that case ask before applying this skill's DNA. --- ## Visual principles 1. **Dark cinematic background** obsidian-class blacks (`#08080A`), graphite layering (`#15161A` / `#1C1D22`). Never pure white. Never bright primary colors as backgrounds. 2. **Gold/amber accents** restrained, structural, single-tone gradient. Use on numbers, labels, dividers, hover states, hero highlights. Never bright yellow. Never multi-color rainbow gradients. 3. **Editorial typography pairing** - Serif (Cormorant Garamond / Playfair / Libre Baskerville) for hero H1 + section H2 only. - Sans (Geist / Inter / Manrope / Satoshi) for nav, body, buttons, labels, metadata. - No monospace on user-facing copy or long values. 4. **Glass + grain** semi-transparent `bg-bone/[0.03]` cards with `backdrop-blur`. Subtle noise/grain overlays to break flat surfaces. 5. **Cinematic motion** Framer Motion: slow, restrained. `cubic-bezier(0.16, 1, 0.3, 1)`, 0.8-1.2s entrance, `useReducedMotion()` respected. 6. **Responsive from the start** every layout works at 320 / 375 / 768 / 1024 / 1440 viewports. 7. **No corporate basic** no boxy stock layouts, no flat colorful cards, no generic stock-photo hero, no cheap icon dumps. Read `DESIGN_SYSTEM.md` for the full token palette + typography clamps. --- ## Coding principles 1. **Inspect before changing.** Always read the existing files, lockfile, framework version, and existing primitives. Reuse don't duplicate. 2. **Preserve project identity.** Don't rewrite the whole brand for a small request. 3. **Real content only.** Never invent links, social handles, certifications, addresses, phone numbers, or legal claims. Ask if missing. 4. **External links** carry `target="_blank"` + `rel="noopener noreferrer"`. 5. **Reusable primitives first.** Look for existing `Section`, `Container`, `Button`, `Reveal`, `SectionLabel`, `GlassCard` before writing new ones. 6. **Clean imports.** Remove unused icons / helpers after edits. 7. **One source of truth** for spacing push to a shared `Section` primitive instead of overriding per page. 8. **Typecheck after every change.** `npx tsc --noEmit` must pass. 9. **No backwards-compat shims.** Don't leave `// removed` comments, dead aliases, or "for future" stubs. 10. **No commented-out code** in committed work. 11. **No emojis** in code or files unless user asks. Read `COMPONENT_RULES.md` for per-element rules (buttons, cards, footer, forms, icons). --- ## Accessibility requirements - All anchors have meaningful text or `aria-label`. - All interactive elements reachable by keyboard. - Focus-visible states: `focus-visible:border-gold/60 focus-visible:ring-2 focus-visible:ring-gold/40`. - Modal/lightbox: `role="dialog" aria-modal="true"`, `Escape` closes, scroll-lock on body. - Decorative SVGs: `aria-hidden`. - Color contrast: body text `text-bone` (≈ #F4F0E6) on obsidian = 16:1 ratio, well above WCAG AA. - `prefers-reduced-motion` respected via Framer's `useReducedMotion()` disable transforms/parallax, keep opacity fades. --- ## Responsive requirements Test mentally (or in browser) at: **320, 375, 390, 414, 768, 1024, 1440**. - Hero h1 clamp: `clamp(2.4rem, 7vw, 6.4rem)` with `leading-[1.0]`. - Section padding: `py-16 md:py-20 lg:py-24` (uniform). - Anchored sections: `scroll-mt-24 md:scroll-mt-28` for sticky-nav clearance. - `body { overflow-x: hidden }` in `globals.css` as a global guard. - Sticky decorations (halos, watermarks, blurs) must not introduce horizontal scroll use `overflow-hidden` on parent + `translate` instead of fixed widths. - Mobile cards stack `grid-cols-1 sm:grid-cols-2 lg:grid-cols-N`. Read `RESPONSIVE_CHECKLIST.md` before shipping any page. --- ## Output requirements Every meaningful change returns: 1. **Files changed** explicit list with `NEW` / `MODIFIED` / `DELETED` markers. 2. **What was kept** vs **what was replaced** when redesigning. 3. **Receipts** `HTTP 200`, typecheck clean, key content rendered (grep output). 4. **Responsive breakdown** desktop / tablet / mobile behavior. 5. **Confirmations** explicit yes/no on every checklist item the user asked. 6. **No placeholder leaks** confirm zero `href="#"`, `href=""`, `href="/#"` remain in modified files. --- ## QA checklist (run before reporting done) ``` [ ] npx tsc --noEmit clean [ ] dev server HTTP 200 on every modified route [ ] grep zero placeholder hrefs in modified files [ ] grep zero hardcoded brand values that should be in lib/content.ts [ ] mobile (<640px) no horizontal overflow, hero not clipped, CTAs not cut [ ] tablet (≥640 <1024) grids transition cleanly to 2-col [ ] desktop (≥1024) spacing balanced, no orphan cards [ ] external links target="_blank" + rel="noopener noreferrer" [ ] focus-visible visible on every button/anchor [ ] reduced-motion heavy parallax/scale animations disabled [ ] no leftover console.log or commented-out code ``` --- ## Brand-specific config (Luxam reference) `examples/luxam-config.md` holds the exact Luxam contact details, WhatsApp URL, app store links, agency credit, etc. **Do not copy these values into other projects** use them only as the shape pattern. Each new project gets its own `lib/content.ts` populated from real values the user provides. --- ## File map of this skill ``` SKILL.md this file (entry point, principles, when to use) DESIGN_SYSTEM.md color tokens, typography, spacing scale, motion COMPONENT_RULES.md per-component rules (buttons, cards, footer, forms, icons) RESPONSIVE_CHECKLIST.md pre-ship checklist for every viewport PROMPT_TEMPLATES.md copy-paste prompts for common tasks COMPONENT_SNIPPETS.md high-level component overview snippets/ 8 reusable TSX component files examples/luxam-config.md Luxam-specific values (reference, not boilerplate) ``` Read the relevant section(s) for the task at hand. Don't dump the whole skill into the user's reply surface only the rules + snippets relevant to the change being made.