📦
frontend-design
81設計獨特的前端介面
通用生成介面通常看起來可預測且薄弱。這項技能會引導 Claude、Codex 和 Claude Code 產出獨特且生產環境就緒的前端設計。
設計與創意 查看
技能 nextjs-optimization
📦
nextjs-optimization
v1.0.0 內容修訂 r1 安全 ⚡ 包含腳本⚙️ 外部命令🌐 網路存取🔑 環境變數
最佳化 Next.js 效能
Next.js 應用程式可能因大型 bundle、薄弱的快取，以及未最佳化的媒體而變慢。此技能會引導 Claude、Codex 和 Claude Code，針對正式環境應用程式進行聚焦的效能改善。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
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.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「nextjs-optimization」。 Review my Next.js app before launch.
預期結果:
- 目前狀態：App Router 已存在，但多個 routes 過度廣泛地使用 client components。
- 發現的問題：未最佳化的圖片使用方式、缺少 OpenGraph metadata，以及沒有已驗證的 Lighthouse 基準線。
- 後續步驟：替換圖片使用方式、縮小 client 邊界、加入 metadata，然後執行正式環境建置與 Lighthouse 檢查。
正在使用「nextjs-optimization」。 Help improve LCP on the home page.
預期結果:
- 可能的 LCP 候選項目是 hero 圖片。
- 建議變更：使用 Next.js Image component、設定尺寸、加入 priority，並避免在首屏以上使用阻塞 scripts。
- 驗證：在正式環境建置後執行 Lighthouse，並比較前後的 LCP。
正在使用「nextjs-optimization」。 Find bundle size problems in this app.
預期結果:
- 此檢視聚焦於大型元件、過於廣泛的 imports，以及不必要的 client-side rendering。
- 預期輸出包含有風險的檔案、它們為何會增加 JavaScript，以及更安全的分割或 import 選項。
安全審計
安全v10 • 2026/7/9 開啟版本化報告
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.
1
已掃描檔案
616
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚡ 包含腳本 (1)
⚙️ 外部命令 (50)
SKILL.md:25 SKILL.md:36-39 SKILL.md:39-42 SKILL.md:42-43 SKILL.md:43 SKILL.md:46-65 SKILL.md:65-71 SKILL.md:71-74 SKILL.md:74-77 SKILL.md:77-87 SKILL.md:87-95 SKILL.md:95-106 SKILL.md:106-113 SKILL.md:113-122 SKILL.md:122-129 SKILL.md:129-140 SKILL.md:140-142 SKILL.md:142-145 SKILL.md:145-156 SKILL.md:156-161 SKILL.md:161-173 SKILL.md:173-189 SKILL.md:189-206 SKILL.md:206-210 SKILL.md:210-218 SKILL.md:218-229 SKILL.md:229-232 SKILL.md:232-235 SKILL.md:235-240 SKILL.md:240-245 SKILL.md:245-259 SKILL.md:259-263 SKILL.md:263-276 SKILL.md:276-286 SKILL.md:286-290 SKILL.md:290-295 SKILL.md:295-297 SKILL.md:297-300 SKILL.md:300-307 SKILL.md:307-312 SKILL.md:312-314 SKILL.md:314-317 SKILL.md:317-323 SKILL.md:323-333 SKILL.md:333-350 SKILL.md:350-354 SKILL.md:354-365 SKILL.md:365-375 SKILL.md:375-398 SKILL.md:398-402
🌐 網路存取 (9)
🔑 環境變數 (2)
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: claude 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/atman36-nextjs-optimization/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/atman36-nextjs-optimization?utm_source=security_passport_badge)HTML 徽章
<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>學術引用 (APA · BibTeX · CFF)
APA 引用
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/10BibTeX 引用
@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}
}CITATION.cff
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"
Skillstore 評分
評分依據 證據置信度: 高 55
架構
100
可維護性
87
內容
72
社群
78
規範符合度
你可以打造什麼
為 Next.js 應用程式準備上線
在發布前稽核正式環境候選版本，找出圖片、字型、快取、metadata 和建置設定問題。
改善 Core Web Vitals
找出可透過渲染、媒體和 script 載入選擇來改善 LCP、FID 和 CLS 的變更。
降低 client bundle 大小
識別會增加傳送給使用者的 JavaScript 的大型元件、不必要的 client 邊界，以及 imports。
試試這些提示
執行基本效能稽核
Use the Next.js optimization skill to review this app for image, font, metadata, and caching issues. Give me the top fixes first.
最佳化 Core Web Vitals
Audit the main routes for LCP, FID, and CLS problems. Suggest changes that are likely to improve Lighthouse performance scores.
檢視 App Router 渲染選擇
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.
最佳實務
- 使用正式環境建置，在變更前後量測效能。
- 除非互動性或瀏覽器 API 需要 Client Component，否則優先使用 Server Components。
- 先最佳化使用者可見頁面元素中最大的項目，再處理較小的改善。
避免
- 不要在沒有明確 browser-only 需求的情況下，將整個 layouts 轉換為 Client Components。
- 不要在未執行真實量測工具的情況下，宣稱 Core Web Vitals 已改善。
- 不要在未了解每個 route 的 freshness 需求前加入快取規則。
常見問題
此技能只適用於 Next.js 15 嗎？
它是為 Next.js 15 和 App Router 模式撰寫的。許多建議也適用於 Next.js 13 和 14。
它可以自動改善 Lighthouse 分數嗎？
它可以建議並套用可能的改善。最終分數取決於量測、託管環境、內容和第三方 scripts。
它支援 Pages Router 專案嗎？
它可以偵測 Pages Router 使用情況並建議遷移考量。其最強的指引針對 App Router 專案。
它會執行外部工具嗎？
此技能會建議標準指令，例如 builds、bundle analysis 和 Lighthouse。使用者應在執行前核准指令。
它涵蓋哪些效能領域？
它涵蓋渲染策略、圖片、字型、資料擷取、快取、bundle 大小、metadata 和 Core Web Vitals。
團隊可以在每次發布前使用它嗎？
可以。它很適合作為發布檢查清單，尤其是搭配 build checks 和 Lighthouse measurements 時。
開發者詳細資訊
授權
MIT
作者版本
v1.0.0
Skillstore 修訂
r1
引用
7db9b9f06e0ab79c575b58bc48c4d8dc9849f424
維護新鮮度
2026/7/20
使用量
9 次下載 · 307 次瀏覽
檔案結構
📄 SKILL.md
AI-Vibe-Prompts 的更多技能
📦
codebase-analysis
80使用結構化報告分析程式碼庫
團隊在變更陌生的儲存庫之前，需要一種快速理解它們的方法。此技能會引導 Claude、Codex 和 Claude Code 進行結構、相依性、架構、品質與安全性檢查。
程式開發 查看
📦
testing-strategy
80建立實用的測試策略
團隊經常在沒有明確範圍、工具或覆蓋率目標的情況下新增測試。此技能為 Vitest、Playwright 和 CI 測試提供實用計畫。
程式開發 查看
📦
git-workflow
80以團隊標準管理 Git 工作流程
團隊需要一致的提交、分支與審查習慣，才能讓歷史記錄保持可讀。此技能為 Claude、Codex 和 Claude Code 提供實用的 Git 工作流程檢查清單。
DevOps 與基礎設施 查看
📦
quality-gates
50發布前驗證程式碼
團隊需要在程式碼提交、推送或部署前執行可重複的檢查。此技能會引導 Claude、Codex 和 Claude Code 完成 linting、型別檢查、測試、建置、稽核和提交檢查。
DevOps 與基礎設施 查看
相關技能
查看全部📦
senior-frontend
81建置可用於正式環境的前端功能
由 davila7
前端團隊需要在各專案之間保持一致的 React 和 Next.js 指引。此技能提供前端分析的參考工作流程、品質實務和輔助腳本。
程式開發 查看
📦
nextjs-architecture
81規劃 Next.js App Router 架構
由 89jobrien
Next.js 團隊可能難以選擇路由、元件、資料載入方式與遷移步驟。此技能針對 App Router、Server Components 與效能提供結構化的架構指引。
程式開發 查看
📦
vercel-react-best-practices
80最佳化 React 與 Next.js 效能
由 vercel-labs
React 和 Next.js 應用程式常因瀑布式請求、大型 bundle，以及可避免的重新渲染而降低速度。此技能為代理提供具體規則，以進行更安全、以效能為重點的變更。
程式開發 查看
📦
senior-fullstack
82以資深指導建置全端應用程式
由 alirezarezvani
全端專案通常需要一致的設定、架構選擇與品質檢查。此技能提供用於 React、Next.js、Node.js、GraphQL 與 PostgreSQL 工作的指令碼與參考資料。
程式開發 查看
📦
vercel-react-view-transitions
82實作 React View Transitions
由 vercel-labs
React view transitions 很容易放錯位置，導致動畫靜默無效或過於吵雜。這項技能會引導你針對路由、Suspense、清單與共享元素的動畫做出選擇。
程式開發 查看
📦
threejs-webgl
83Build Interactive Three.js Scenes
由 freshtechbro
Building browser-based 3D scenes requires coordinating rendering, assets, interaction, and performance. This skill provides Three.js examples, reference guides, and a WebGL starter to support implementation.
程式開發 查看