frontend-design
81Design Distinctive Production Frontends
Generic interfaces weaken product identity and usability. This skill guides purposeful visual direction, responsive implementation, motion, accessibility, and production-ready frontend code.
Optimize Next.js Performance
Next.js applications can become slow through large bundles, weak caching, and unoptimized media. This skill guides Claude, Codex, and Claude Code through focused performance improvements for production apps.
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "nextjs-optimization" from https://skillstore.io/skills/atman36-nextjs-optimization.md and its manifest at https://skillstore.io/api/skills/atman36-nextjs-optimization/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Using "nextjs-optimization". Review my Next.js app before launch.
Expected outcome:
Using "nextjs-optimization". Help improve LCP on the home page.
Expected outcome:
Using "nextjs-optimization". Find bundle size problems in this app.
Expected outcome:
The static findings are false positives caused by Markdown code fences, inline backticks, and Next.js documentation examples. No prompt injection, credential access, malicious network behavior, command injection, or hidden execution intent was found in SKILL.md.
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
https://skillstore.io/skills/atman36-nextjs-optimization/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/atman36-nextjs-optimization?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/atman36-nextjs-optimization?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/atman36-nextjs-optimization/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/atman36-nextjs-optimization.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>AI-Vibe-Prompts. (2026). nextjs-optimization security audit report (audit version 10) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/atman36-nextjs-optimization/audits/10@techreport{ai-vibe-prompts-atman36-nextjs-optimization-2026,
author = {AI-Vibe-Prompts},
title = {nextjs-optimization security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/atman36-nextjs-optimization/audits/10},
note = {Author version 1.0.0}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "nextjs-optimization security audit report (audit version 10)"
version: "1.0.0"
type: report
authors:
- name: "AI-Vibe-Prompts"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/atman36-nextjs-optimization/audits/10"
identifiers:
- type: other
value: "skillstore:atman36-nextjs-optimization:audit:10"
description: "Skillstore immutable audit report identifier"
Audit a production candidate for image, font, caching, metadata, and build configuration issues before release.
Find changes that can improve LCP, FID, and CLS through rendering, media, and script loading choices.
Identify large components, unnecessary client boundaries, and imports that increase JavaScript sent to users.
Use the Next.js optimization skill to review this app for image, font, metadata, and caching issues. Give me the top fixes first.
Audit the main routes for LCP, FID, and CLS problems. Suggest changes that are likely to improve Lighthouse performance scores.
Inspect the App Router pages and components. Find unnecessary client components, missing Suspense boundaries, and better static or dynamic rendering choices.
Create a production optimization report for this Next.js 15 app. Include bundle size risks, cache strategy, image and font fixes, SEO metadata, and validation steps.
Author
AI-Vibe-PromptsLicense
MIT
Author version
v1.0.0
Skillstore revision
r1
Ref
7db9b9f06e0ab79c575b58bc48c4d8dc9849f424
Maintenance freshness
7/18/2026
Usage
8 downloads ยท 307 views
File structure
๐ SKILL.md
Design Distinctive Production Frontends
Generic interfaces weaken product identity and usability. This skill guides purposeful visual direction, responsive implementation, motion, accessibility, and production-ready frontend code.
Analyze Your Codebase with a Structured Review
Large repositories hide architecture, dependency, and quality risks. This skill produces a structured map, focused checks, and prioritized recommendations.
Build a Complete Testing Strategy
Inconsistent test coverage allows regressions to reach users. This skill structures unit, integration, and end-to-end testing with Vitest, Playwright, coverage targets, and CI guidance.
Standardize Your Git Workflow
Inconsistent commits and branches make collaboration and releases harder to manage. This skill applies Conventional Commits, GitFlow, review practices, and pre-commit checks.
Run Quality Gates Before Shipping Code
Manual pre-release checks are inconsistent and easy to miss. This skill detects project tooling, runs staged quality gates, and reports actionable failures.
Build Frontend Apps Faster
by davila7
Frontend work often needs consistent React patterns, performance checks, and project scaffolding. This skill gives Claude and compatible agents practical guidance and local helper scripts for modern web application development.
Plan Next.js App Router Architecture
by 89jobrien
Next.js teams can struggle to choose routes, components, data loading, and migration steps. This skill gives structured architecture guidance for App Router, Server Components, and performance.
Optimize React and Next.js Code
by vercel-labs
React and Next.js applications often lose performance through waterfalls, large bundles, and avoidable re-renders. This skill gives Claude, Codex, and Claude Code concrete review rules for faster frontend work.
Build Fullstack Apps With Senior Guidance
by alirezarezvani
Fullstack projects often need consistent setup, architecture choices, and quality checks. This skill provides scripts and references for React, Next.js, Node.js, GraphQL, and PostgreSQL work.
Implement React View Transitions
by vercel-labs
React view transitions are easy to misplace, causing silent or noisy animations. This skill guides route, Suspense, list, and shared element animation choices.
Improve Vue 3 Code Quality
by vuejs-ai
Vue projects often collect reactivity, component, and performance mistakes over time. This skill gives targeted Vue 3 guidance for safer patterns and clearer code.