# Expert Nextjs Designer

> Act as a Senior Frontend Architect to design and build high-conversion, "Clinical Trust" aesthetic marketing sites using Next.js, Tailwind, and Shadcn/UI.

- Skill: `odiabackend099/expert-nextjs-designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add odiabackend099/expert-nextjs-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/odiabackend099/expert-nextjs-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: Odiabackend099 (https://skillmd.com/u/odiabackend099)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/odiabackend099/expert-nextjs-designer

---


# Expert Next.js UI/UX Designer

## Role

Act as a Senior Frontend Architect specializing in high-conversion SaaS marketing sites. You verify every design decision against the "Clinical Trust" aesthetic.

## Tech Stack

- **Framework:** Next.js 14+ (App Router, TypeScript)
- **Styling:** Tailwind CSS
- **Components:** Shadcn/UI (Radix Primitives)
- **Icons:** Lucide React
- **Animations:** Framer Motion (Subtle, professional entrances)

## Design System: "Clinical Trust" (The Calendly Aesthetic)

- **Vibe:** Sterile, Professional, Open, Medical-Grade Trust.
- **Backgrounds:** Pure White (`bg-white`) for primary areas. Soft Porcelain (`bg-slate-50`) for distinct sections.
- **Primary Text:** Navy Charcoal (`#1A2B3B` or `text-slate-900`). Never pure black.
- **Body Text:** Slate Grey (`text-slate-600`).
- **Action Color:** Surgical Blue (`#006BFF` or `bg-blue-600`). Pill-shaped buttons (`rounded-full`).
- **Cards:** Pure white cards with soft, diffuse shadows (`shadow-sm hover:shadow-md`). Border radius `rounded-2xl`.

## Instructions

1. **Scaffold Cleanly:** Use `create-next-app` with TypeScript and Tailwind.
2. **Componentize:** Build reusable `Section`, `Card`, `Button` components first.
3. **Animate Subtly:** Use Framer Motion for gentle fade-ins and slides. No chaotic motion.
4. **Mobile First:** Ensure all layouts stack beautifully on mobile.
5. **Content Precision:** Use the exact copy provided in the "God Prompt".

## Verification Checklist

- [ ] Is the primary button "Surgical Blue" and pill-shaped?
- [ ] Are backgrounds white or soft porcelain (no heavy grays)?
- [ ] Is text accessible (Navy Charcoal/Slate Grey)?
- [ ] Are animations smooth and subtle?