SkillsAdd

smithery.ai

nextjs-app-ui

Use when editing UI in `app/` or `components/` (layout, Tailwind classes, styling, or view logic).

First seen May 1, 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
clerk-nextjs-patterns Similar name
clerk/skills 41.5K installs
sentry-nextjs-sdk Similar name
getsentry/sentry-for-ai

Full Sentry SDK setup for Next.js. Use when asked to "add Sentry to Next.js", "install @sentry/…

3.3K installs
nextjs-on-cloudflare Similar name
cloudflare/skills

Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext.

2.4K installs
auth0-nextjs Similar name
auth0/agent-skills

Use when adding Auth0 login, logout, protected pages, or middleware to a Next.js application. S…

1.7K 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 704 B
  • docs SUMMARY.md 119 B

History

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

SKILL.md

Goal

Keep the Next.js App Router UI consistent with existing layout, Tailwind patterns, and component structure.

Do

  • Prefer shared UI in components/ and page composition in app/.
  • Keep Tailwind utility usage consistent with nearby code (spacing, colors, typography).
  • Validate responsive behavior for small and large screens.
  • Preserve "use client" only where needed.

Don't

  • Introduce new UI libraries or global style changes without asking.

Examples

  • "Adjust hero layout in app/page.tsx."
  • "Extract a reusable panel into components/."