uplift.page
← library
skill🕸️ Web appsv4 · updated 2026-09-10

Uplift Duo — Next.js

Applies Uplift Duo Next.js conventions — App Router structure, Tailwind, Motion for React, explicit caching, server actions, design restraint, and quality gates. Use when writing frontend code in src/ or app/ directories.

Run it as a prompt

Paste this into any AI agent, or fetch it: curl -s https://uplift.page/api/v1/prompts/upliftduo-nextjs/raw

prompt.md
# Uplift Duo — Next.js

Applies to frontend App Router work only.

## Project context

Portfolio/agency marketing sites: single-page or sectioned layouts, smooth scroll nav, dark mode, contact forms. Prefer repo `prd.md` or `abe-spec.md` when present over generic marketing patterns.

## Tech stack

- **Framework**: Next.js (App Router) on the latest security patch — Next.js ships
  monthly security releases (two Criticals patched Aug 2026); bump patch versions
  promptly. React, TypeScript.
- **Styling**: Tailwind CSS, CSS custom properties
- **Motion**: Motion for React (`motion/react` — formerly Framer Motion, same API;
  the `framer-motion` package name is no longer actively developed)
- **Common libs**: clsx, react-icons, react-intersection-observer
- **Email** (when used): Resend + react-email
- **Analytics** (when used): Google Analytics, Vercel Speed Insights

## Structure

```
src/
├── app/         # layout.tsx, page.tsx, routes
├── components/  # UI
├── context/     # theme, active section
├── lib/         # data, hooks, types, utils
├── actions/     # server actions
├── email/       # react-email templates
```

## Components

- `"use client"` only when needed (hooks, motion, browser APIs)
- Default exports; inline prop types
- Animated sections: `motion.*` components from `motion/react`
- Prefer named exports for shared primitives when the repo already does

## Styling

- Responsive: `sm:`, `md:`, `lg:`
- Brand fonts when matching upliftduo-web: Raleway (headings), Nunito (body) via CSS variables
- Dark mode: `dark:` utilities
- Shared globals when present: `.btn-primary`, `.btn-black`, `.underline-text`

## Caching & navigation

- Caching is explicit opt-in — no implicit fetch caching. On new builds enable
  `cacheComponents: true` + `partialPrefetching: true` in `next.config.ts`
  (Next 16.3 "Instant Navigations"; slated to become the default in a future major).
- Mark cacheable work with `'use cache'` and give every dynamic route a
  Suspense loading shell so navigations paint instantly.
- When upgrading an existing app, audit implicit-caching assumptions before
  flipping the flags — behavior changes are the point.

Install it as a skill

Agents that support the Agent Skills standard load it automatically when it applies.

download
curl -fsSL https://uplift.page/p/upliftduo-nextjs/SKILL.md --create-dirs -o .agents/skills/upliftduo-nextjs/SKILL.md
or from any MCP client
MCP server: https://uplift.page/mcp
Tool: pull_skill  {"slug": "upliftduo-nextjs"}

The full skill

Applies to frontend App Router work only.

Project context

Portfolio/agency marketing sites: single-page or sectioned layouts, smooth scroll nav, dark mode, contact forms. Prefer repo prd.md or abe-spec.md when present over generic marketing patterns.

Tech stack

  • Framework: Next.js (App Router) on the latest security patch — Next.js ships monthly security releases (two Criticals patched Aug 2026); bump patch versions promptly. React, TypeScript.
  • Styling: Tailwind CSS, CSS custom properties
  • Motion: Motion for React (motion/react — formerly Framer Motion, same API; the framer-motion package name is no longer actively developed)
  • Common libs: clsx, react-icons, react-intersection-observer
  • Email (when used): Resend + react-email
  • Analytics (when used): Google Analytics, Vercel Speed Insights

Structure

src/
├── app/         # layout.tsx, page.tsx, routes
├── components/  # UI
├── context/     # theme, active section
├── lib/         # data, hooks, types, utils
├── actions/     # server actions
├── email/       # react-email templates

Components

  • "use client" only when needed (hooks, motion, browser APIs)
  • Default exports; inline prop types
  • Animated sections: motion.* components from motion/react
  • Prefer named exports for shared primitives when the repo already does

Styling

  • Responsive: sm:, md:, lg:
  • Brand fonts when matching upliftduo-web: Raleway (headings), Nunito (body) via CSS variables
  • Dark mode: dark: utilities
  • Shared globals when present: .btn-primary, .btn-black, .underline-text

Caching & navigation

  • Caching is explicit opt-in — no implicit fetch caching. On new builds enable cacheComponents: true + partialPrefetching: true in next.config.ts (Next 16.3 "Instant Navigations"; slated to become the default in a future major).
  • Mark cacheable work with 'use cache' and give every dynamic route a Suspense loading shell so navigations paint instantly.
  • When upgrading an existing app, audit implicit-caching assumptions before flipping the flags — behavior changes are the point.

Design restraint

Default to restraint over decoration. These patterns read as generic/AI-generated; avoid them unless the repo's prd.md/abe-spec.md or existing code calls for them:

  • Emojis: not as UI (headings, buttons, bullets, feature "icons"). Use a real icon set (react-icons). Reserve emoji for genuine content, not chrome.
  • Pill eyebrow subheaders: skip the rounded-full badge above section headings (e.g. a "✨ FEATURES" pill before an h2). Use a plain text eyebrow or just the heading.
  • Overdone tropes: avoid gradient text everywhere, glassmorphism, glow/neon shadows, animated gradient "blobs", and three-column feature-card walls as a default layout.
  • Prefer: generous whitespace, a tight type scale, one accent color, and motion only where it aids comprehension. Match the site's established patterns instead of introducing new flourishes.

Animations

  • Motion for React (motion/react) for UI motion (not raw CSS keyframes unless existing code does)
  • Scroll: useScroll, useSpring, useTransform
  • Enter: initial + animate (or whileInView)
  • Section spy: useSectionInView when that hook exists in lib/

Server actions & email

  • Validate input at the action boundary
  • Resend/react-email: keep templates under src/email/

Quality (this stack)

  • npm run build before commit
  • Lint edited files; fix new errors
  • Test mobile breakpoints on layout/nav/forms
  • No any; structured errors in actions

Served from the uplift.page library and refreshed within 5 minutes of every update.