yslootahrobotics/.claude/skills/premium-frontend-designer/PROMPT_TEMPLATES.md

Prompt Templates

Copy-paste prompts for common tasks. Replace {{placeholders}} with project specifics.

---

1. Create homepage from scratch

Act as a senior frontend architect.
Build a premium, cinematic, dark/gold luxury homepage for {{BRAND}} ({{INDUSTRY}}) using the design DNA in .claude/skills/premium-frontend-designer/.

Stack: Next.js 16 App Router · TypeScript · Tailwind v4 · Framer Motion · lucide-react.

Composition (top → bottom):
1. Nav (fixed, scroll-aware)
2. Hero (min-h-100svh, parallax halos, 2 CTAs, eyebrow + serif h1 + sub + body)
3. BrandStrip (marquee of capability keywords)
4. About / Story (split 5/7, copy + visual)
5. WhyUCO-style problem→solution comparison
6. Services overview (6 cards)
7. Trusted Clients marquee (use ONLY logos I provide)
8. Stats / Impact metrics (animated counters)
9. Cinematic reel (lazy video)
10. Process / Closed loop (timeline)
11. Industries served
12. Certifications
13. Gallery (4-image bento)
14. Final CTA section
15. Footer (4 columns, no duplication)

Brand details I will provide:
{{BRAND_LEGAL_NAME, PHONE, EMAIL, WHATSAPP_URL, INSTAGRAM, APP_STORE, GOOGLE_PLAY, AGENCY_CREDIT}}

Do NOT invent links. Ask if missing.

---

2. Redesign an existing page

Inspect {{PAGE_ROUTE}}. Keep the content + intent but rebuild it to match the design DNA in .claude/skills/premium-frontend-designer/.

Requirements:
- Reuse existing primitives (Section, Container, Button, Reveal, SectionLabel, etc.) — don't duplicate.
- Apply the cardGrid + cardCell motion variants for grid entrances.
- Add a single gold-accent phrase per h2.
- Centralize section padding via the Section primitive (no per-page overrides).
- Run typecheck + grep for placeholder hrefs before reporting done.

Return a clear file change list with NEW / MODIFIED markers.

---

3. Add a polished footer

Build a 4-column premium footer for {{BRAND}}.

Columns:
1. Brand + contact (logo, tagline, phone, email, WhatsApp, Instagram)
2. Navigation (top-level pages)
3. Services (specific service items)
4. Legal & App (Privacy Policy + 2 store badges)

No duplicate link labels across columns. External links open in new tab.

Footer bottom row: copyright + tagline + subtle agency credit (gold underline on hover).

Watermark: project name in serif, large, opacity-0.025, contained inside footer overflow.

Brand details:
{{PHONE, EMAIL, WHATSAPP_URL, INSTAGRAM_URL, APP_STORE_URL, GOOGLE_PLAY_URL, AGENCY_CREDIT_URL}}

---

4. Add WhatsApp button

Add a refined WhatsApp button to:
1. Footer contact stack (icon + label "WhatsApp · {{DISPLAY_NUMBER}}").
2. Nav (circular icon-only button next to primary CTA, mobile menu pill).
3. Contact page info card (full-width tile w/ icon disc).

URL: {{WHATSAPP_API_URL}}
Display number: {{+CC XX XXX XXXX}}

Use inline SVG (lucide has no WhatsApp glyph). Refined gold tint, not bright green. Hover: gold border + soft glow + scale 1.04. aria-label="Chat with {{BRAND}} on WhatsApp". target="_blank" rel="noopener noreferrer".

---

5. Add app store badges

Add official App Store + Google Play badge SVGs.

URLs:
- App Store: {{APP_STORE_URL}}
- Google Play: {{GOOGLE_PLAY_URL}}

Tasks:
1. Download from svgrepo.com (use /show/ path not /download/):
   - https://www.svgrepo.com/show/303128/download-on-the-app-store-apple-logo.svg
   - https://www.svgrepo.com/show/303139/google-play-badge-logo.svg
2. Save to public/images/app-store-badge.svg + public/images/google-play-badge.svg.
3. Render via plain <img> (next/image blocks SVG in Next 16).
4. Width: 132 px footer / 140-160 px in hero CTA section.
5. Hover: opacity-85 + -translate-y-0.5. No gold circles.
6. Stack gap-2 (8 px) in footer.
7. aria-label on every anchor. target="_blank" rel="noopener noreferrer".

Use the snippet from snippets/AppBadges.tsx as a starting point.

---

6. Add client logo section

Add a premium "Trusted by leading {{INDUSTRY}} partners" client logo marquee to the homepage (after Services) and About page (after process).

Use ONLY these 12 logos I provide:
{{LIST OF LOGO URLS}}

Tasks:
1. Download each into public/images/clients/ with clean filenames.
2. Create src/lib/clients.ts with typed array { src, alt }.
3. Use recognisable brand names for alt text; for unidentified logos use "{{BRAND}} client logo".
4. Marquee: 50s linear infinite, hover-pause, mask-image edge fade.
5. Tile: h-24 w-44 mobile / h-28 w-52 tablet+. Default grayscale + opacity 70%, hover full color + scale 1.05.
6. Reduced-motion fallback: render a static grid-cols-2 sm:grid-cols-3 lg:grid-cols-6.

Use snippets/ClientLogoMarquee.tsx as the base.

---

7. Add certificate gallery

Replace the document-card list on /certifications with a 4-image gallery showing the actual certificate pages.

Use these exact images (download to public/images/certifications/):
{{IMG1_URL, IMG2_URL, IMG3_URL, IMG4_URL}}

Each image links to the corresponding PDF (already in public/documents/certifications/).

Layout: sm:grid-cols-2 lg:grid-cols-4 with aspect-[3/4] portrait tiles.

Tile chrome:
- Top-left page badge (Page 1 / Page 2 · Annex).
- Top-right ArrowUpRight disc.
- Bottom caption: mono category in gold + serif title + "Open PDF" CTA.
- Hover: scale 1.04, gold ring border, amber radial glow, gold underline sweep.

External: target="_blank" rel="noopener noreferrer" on every anchor.

Optional: secondary "Need the full PDFs?" pill row below grid with direct download links.

Use snippets/CertificateGallery.tsx as a starting point.

---

8. Fix mobile responsiveness

The {{PAGE}} layout breaks on mobile. Specific issues:
{{ISSUES_LIST}}

Walk through the responsive checklist in .claude/skills/premium-frontend-designer/RESPONSIVE_CHECKLIST.md and fix every applicable item.

Test at 320 / 375 / 390 / 414 / 768 / 1024 viewports.

Don't redesign — only fix layout, spacing, overflow, clipping. Preserve the visual identity.

Return a table of issues + fixes (Before / After columns).

---

9. Polish typography sitewide

Audit and refine typography across all pages:

1. Hero h1: clamp(2.4rem, 7vw, 6.4rem), leading-[1.0], tracking-[-0.02em]. Add pt buffer for sticky-nav clearance.
2. Two-font system: serif for h1/h2 only, clean sans (Geist/Inter) for everything else.
3. Remove font-mono from long values + body text. Keep only on tiny brand-pattern eyebrow tags if at all.
4. Tracking: reduce all tracking-[0.32em+] on small labels to tracking-[0.22em].
5. Nav links: text-sm font-medium tracking-[0.005em] (slightly larger + medium weight, near-zero tracking).
6. BrandStrip marquee: smaller (text-xs md:text-sm uppercase) so it doesn't compete with hero.
7. Section labels via SectionLabel primitive — never inline.
8. text-balance on h1/h2, text-pretty on body paragraphs.

Confirm:
- typecheck clean
- HTTP 200 on every route
- zero tracking-[0.32em] remaining
- no font-mono on user-facing body content

---

10. Add Privacy Policy

Create /privacy-policy route matching the premium dark/gold style.

9 sections with id="..." anchors + scroll-mt-28:
- introduction
- information-we-collect
- how-we-use-information
- contact-form-data
- cookies-and-analytics
- data-protection
- third-party-services
- user-rights
- contact-information

Use brand contact details from lib/content.ts.

Effective date stamp at top + metallic-divider. Bottom disclaimer with mailto link in gold underline.

Single column max-w-3xl. font-display h2 per section. text-pretty body.

Don't write fake legal claims. General professional language only. Tell users they can contact for privacy questions.

Add to footer Legal column.

---

11. Coolify deploy via Dockerfile

Deploy {{PROJECT}} to Coolify with a Dockerfile build pack.

Tasks:
1. Add `output: "standalone"` to next.config.ts.
2. Create multi-stage Dockerfile (node:22-alpine, 3 stages: deps → build → run).
3. Add .dockerignore (skip .git, node_modules, .next cache, env files, .claude).
4. Run-stage as non-root user (UID 1001).
5. EXPOSE 3000, CMD ["node", "server.js"] using standalone output.

Then via Coolify API:
- PATCH application: build_pack="dockerfile", dockerfile_location="/Dockerfile", ports_exposes="3000", domains="https://{{DOMAIN}}"
- POST /api/v1/deploy?uuid={{APP_UUID}}&force=true
- Poll deployment until terminal status.

If "no available server" appears on the domain after deploy: verify DNS resolves to Coolify host IP, then redeploy to trigger Let's Encrypt cert issuance.

---

12. General "make this premium" polish

Inspect {{COMPONENT_OR_PAGE}}. Identify what doesn't match the premium dark/gold luxury direction in .claude/skills/premium-frontend-designer/DESIGN_SYSTEM.md.

Specifically check:
- Are buttons using premium variants (gold gradient primary, outline secondary)?
- Are cards using the hover lift + amber glow + gold underline sweep pattern?
- Is there any cheap iconography or stock-photo placeholder?
- Are headings using the serif font with one gold-accent phrase?
- Is spacing centralized via Section primitive?
- Is motion subtle (no bounces, no scale > 1.05 on hover)?

Apply only the changes needed — don't rewrite working sections. Return a list of refinements made.