SkillsAdd

smithery.ai

nextjs-ui-ux-and-animations

Opinionated UI/UX and high-performance animation system for Next.js App Router projects: layout, spacing, typography, and smooth, GPU-friendly motion patterns.

First seen Apr 28, 2026

Installation

$ npx skills add https://smithery.ai
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
prisma-compute Shared topics
prisma/skills

Prisma Compute deployment and hosting guide. Use whenever the user mentions Prisma Compute, `pr…

253.4K installs
review-animations Similar name
emilkowalski/skills

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design …

145.5K installs
improve-animations Similar name
emilkowalski/skills

Survey a codebase's animation and motion code as a senior motion advisor, then produce a priori…

117.7K installs
css-animations Similar name
heygen-com/hyperframes 74.2K installs
flutter-animations Similar name
madteacher/mad-agents-skills

>- Add, fix, refactor, debug, test, or explain Flutter animations and motion effects. Use when …

15.1K installs

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai
smithery-ai-cli 7.8K frontend-design 6.2K skill-creator 2.5K ck:ui-ux-pro-max 1.3K pdf 1.2K xlsx 966 pptx 894 docx 884 webapp-testing 1 web-design-reviewer 657

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 9,030 B
  • docs SUMMARY.md 194 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 2 installs

SKILL.md

Next.js UI/UX and Animations Skill

When to use this Skill

Is Skill ko tab use karo jab:

  • Next.js 16+ App Router frontend design kar rahe ho (landing pages,

dashboards, marketing sites, SaaS UI, etc.).

  • Tum chahte ho ke Claude hamesha ek hi visual language follow kare:

spacing, typography, color, layout.

  • Tumko smooth but fast animations chahiye jo FPS kill na karein:

CSS/Framer Motion patterns jo sirf GPU-friendly properties animate karein. [web:204][web:205][web:211][web:214]

Ye Skill generic hai, kisi ek repo tak limited nahi, lekin Next.js App Router + React ecosystem assume karta hai.

Tech + design assumptions

  • Frontend: Next.js 16+ App Router.
  • Styling: Tailwind CSS ya CSS Modules/vanilla-extract style utility

approach (Skill framework-agnostic but utility-first friendly).

  • Animation libs:

- Native CSS transitions/animations (preferred for simple hovers, reveals). [web:204][web:205][web:208] - Framer Motion for complex/conditional motion (page transitions, layout animations). [web:209][web:212][web:218][web:221]

  • Design system:

- 4- or 8-point spacing system (spacing values multiples of 4). [web:210][web:213] - Limited, consistent typographic scale (3–6 sizes, clear hierarchy). [web:216][web:219][web:222]

Koi specific color palette enforce nahi hota; ye Skill sirf structure aur motion ke rules define karta hai.

Layout & spacing principles

  • Sectioning the page

- Har major screen ko clear sections me todho: - Hero / header section. - Content sections (features, stats, lists). - Call-to-action (CTA) bands. - Footer. - Har section ka vertical spacing consistent ho (e.g. py-16, py-20 level, not random values per section). [web:210][web:213]

  • Spacing system

- Spacing 4- ya 8-point grid follow kare: - Allowed values: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64... px equivalents. [web:210][web:213] - Components ke andar padding/margin inhi values ke multiples me ho, random 13px, 27px jaisi values avoid karo.

  • Grids & alignment

- Desktop par 12-column mental grid follow karo (even agar Tailwind se implement ho): - Content max-width constrained (e.g. max-w-5xl / max-w-6xl) and horizontally centered. - Text blocks ko readable width tak limit karo (around 60–80 chars per line for body text). [web:216][web:222]

Typography & color hierarchy

  • Type scale

- Fixed typographic scale use karo: - Heading levels: e.g. h1, h2, h3 with decreasing sizes. - Body text: 1–2 sizes (base + small). - Har level ke liye consistent: - font-size, line-height, font-weight. [web:216][web:219][web:222]

  • Hierarchy

- Har section me: - 1 primary heading (visual focal point). - Optional subtitle/eyebrow text for context. - Body copy for detail. - Over-decoration avoid karo (too many fonts, colors, sizes).

  • Color & contrast

- Primary + accent color limited rakho (1–2 main accent colors). - Text/background contrast sufficient ho, WCAG-friendly (dark text on light bg ya vice versa). [web:216][web:219]

Component patterns (cards, lists, CTAs)

  • Cards

- Card pattern: - Padding follows spacing grid (e.g. p-4, p-6). - Border-radius consistent across app. - Shadow ya border ek hi scale ka use karo across cards. - Hover state: - Slight elevation ya scale via transform + box-shadow change (avoid layout reflow). [web:204][web:205][web:211]

  • Lists & rows

- Repeated items (tasks, features) me: - Consistent gap (gap-4, gap-6). - Consistent alignment of titles, metadata, actions.

  • Buttons & CTAs

- Primary button style: - High-contrast background + white/near-white text. - Clear hover/focus states. - Secondary / ghost buttons consistent alternate style use karein.

Claude ko new UI banate waqt ye base patterns ko reuse karna chahiye, na ke har page pe completely naya button/card style invent karna.

Motion design system — core rules

Aim: smooth, 60fps‑ish animations jo CPU/GPU pe light hon. [web:204][web:205][web:211][web:214]

  • What to animate

- Animate only GPU-friendly properties by default: - transform (translate, scale, rotate). - opacity. [web:204][web:205][web:211][web:223] - Avoid animating: - top, left, width, height, margin, padding, box-shadow in heavy/continuous animations (ye layout / paint thrash kar sakte hain). [web:204][web:205][web:211][web:217]

  • Duration & easing

- Use limited duration tokens: - fast ~ 120–180ms (small hovers/feedback). - normal ~ 200–260ms (transitions, modal open). - slow ~ 320–400ms (page transitions, major UI change). [web:206][web:208] - Easing: - Default: ease-out / cubic functions for entry. - Use ease-in for exit animations. - For micro interactions, consider standard easing curves library (Framer Motion defaults ya custom bezier). [web:206][web:209]

  • Levels of motion

- Micro interactions: - Button hover: slight scale/translate, color shift. - Icon hover: small rotate/bounce, opacity change. - Content reveal: - Section fade/slide-in on scroll (threshold-based, once per view). - Page transitions: - Route change par fade/slide of whole page or key sections.

Performance & accessibility guardrails

  • Performance

- Prefer CSS transitions for simple one-off animations; JavaScript driven / Framer Motion sirf jab logic/control chahiye. [web:204][web:205][web:211] - Long-running or scroll‑linked animations minimal rakho; avoid heavy parallax har section me. [web:205][web:211][web:214] - Use will-change: transform ya Framer Motion ki internal optimizations only jahan zaroorat ho (excessive use se bhi perf down ho sakta hai). [web:204][web:211]

  • Reduced motion

- Respect user preferences: - CSS: @media (prefers-reduced-motion: reduce) ke andar animations ko disable/simplify karo. [web:205][web:214] - Framer Motion: useReducedMotion hook se motion intensity kam karo ya turn off karo. [web:209][web:221] - Large page transitions / auto-scrolling effects reduced motion users ke liye skip karo.

  • Focus & usability

- Animations kabhi focus/keyboard navigation ko break na karein (focus rings visible, tabbable elements stable). - Loading states: - Use skeletons / subtle shimmer animations instead of janky layout shifts.

Framer Motion patterns (Next.js)

Jab Framer Motion use ho:

  • Variants & layout

- Shared variants objects define karo (e.g. fadeInUp, scaleOnHover) jo multiple components reuse karein. - Layout transitions sirf jahan actual layout change ho; avoid overusing layout prop everywhere.

  • Page transitions

- App Router layout me: - PageTransition wrapper component use karo jo: - Initial: opacity: 0, y: 8 - Animate: opacity: 1, y: 0 - Exit: opacity: 0, y: -4 - Duration ~ 0.2–0.3s, easing easeOut. [web:209][web:212][web:218][web:221]

  • Scroll-reveal

- Intersection Observer ya whileInView (Framer) ka use karo: - Trigger once per section, threshold ~ 0.15–0.3. - initial off-screen + low opacity, whileInView on-screen. [web:209][web:212]

Claude ko nayi animations likhte waqt yahi patterns reuse karne chahiye instead of har jaga naya custom Framer code likhne ke.

Things to avoid

  • Over-animating: har element pe heavy motion, har hover par big scale

ya bounce; app cheap lagti hai aur performance girta hai. [web:205][web:211]

  • Animating layout-affecting properties (width/height/margins) in

continuous loops; is se reflow + repaint issues aate hain. [web:204][web:205][web:217]

  • Using multiple disjoint spacing/typography scales in the same app.
  • Scroll-jacking (custom scroll behavior jo default scroll ko override kare)

unless spec explicitly demand kare.

References inside a repo

Jab ye Skill use ho:

  • Design guidelines / tokens ideally:

- frontend/styles/design-tokens.(ts|json) – spacing, durations, easing, radii, etc. - frontend/components/ui/ – base components (Button, Card, Section, PageTransition, etc.) jo in rules ko enforce karein.

  • Framer Motion wrappers:

- frontend/components/motion/ – reusable motion primitives based on is Skill ke patterns.

Agar ye files missing hon, Claude ko propose karna chahiye ke pehle yeh base components/tokens create karein, phir nayi screens unka reuse kar ke banayein — is tarah tumhara UI/UX + animations ek signature style ban jayega jo har nayi app me recognizable rehega.