技能 react-nextjs-development
📦
react-nextjs-development
v1.0.0 內容修訂 r1 安全 ⚙️ 外部命令
建置現代化 React 和 Next.js 應用程式
React 和 Next.js 專案通常需要在路由、元件、樣式、資料、表單、測試和部署方面採用一致的設定選擇。此技能為 Claude、Codex 和 Claude Code 提供以階段為基礎的工作流程，用於規劃和建置現代化前端應用程式。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "react-nextjs-development" from https://skillstore.io/skills/sickn33-react-nextjs-development.md and its manifest at https://skillstore.io/api/skills/sickn33-react-nextjs-development/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「react-nextjs-development」。 使用 Next.js、TypeScript、Tailwind CSS 和 Server Components 規劃新的分析儀表板。
預期結果:
- 建議的專案類型和路由方式。
- 針對 TypeScript、Tailwind CSS、版面配置和資料擷取的階段式設定檢查清單。
- 針對建立專案骨架、App Router 模式和 UI 設計的建議配套技能。
正在使用「react-nextjs-development」。 改善現有 React 功能中的表單和驗證。
預期結果:
- 使用 React Hook Form 和 Zod 的表單工作流程。
- 驗證、錯誤處理、提交和無障礙審查步驟。
- 針對測試、linting 和響應式行為的品質關卡。
正在使用「react-nextjs-development」。 準備我的 Next.js 應用程式以進行生產部署。
預期結果:
- 針對建置設定、bundle 最佳化、測試和效能指標的發布檢查清單。
- 針對 Vercel 預覽和生產環境的部署規劃指引。
- 針對環境變數和無障礙檢查的審查提醒。
安全審計
安全v4 • 2026/7/7 開啟版本化報告
All 55 static alerts are false positives caused by Markdown inline code and fenced prompt examples in SKILL.md. The skill is a React and Next.js workflow guide with no executable scripts, shell commands, network access, or prompt-injection text found.
1
已掃描檔案
230
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚙️ 外部命令 (55)
SKILL.md:32 SKILL.md:33 SKILL.md:34 SKILL.md:35 SKILL.md:45-47 SKILL.md:47-49 SKILL.md:49-51 SKILL.md:51-56 SKILL.md:56-57 SKILL.md:57-58 SKILL.md:58-59 SKILL.md:59-69 SKILL.md:69-71 SKILL.md:71-73 SKILL.md:73-75 SKILL.md:75-77 SKILL.md:77-79 SKILL.md:79-84 SKILL.md:84-85 SKILL.md:85-86 SKILL.md:86-87 SKILL.md:87-97 SKILL.md:97-99 SKILL.md:99-101 SKILL.md:101-103 SKILL.md:103-108 SKILL.md:108-109 SKILL.md:109-110 SKILL.md:110-120 SKILL.md:120-122 SKILL.md:122-127 SKILL.md:127-128 SKILL.md:128-138 SKILL.md:138-140 SKILL.md:140-145 SKILL.md:145-146 SKILL.md:146-147 SKILL.md:147-157 SKILL.md:157-159 SKILL.md:159-164 SKILL.md:164-165 SKILL.md:165-166 SKILL.md:166-176 SKILL.md:176-178 SKILL.md:178-180 SKILL.md:180-182 SKILL.md:182-187 SKILL.md:187-188 SKILL.md:188-189 SKILL.md:189-199 SKILL.md:199-201 SKILL.md:201-226 SKILL.md:226-227 SKILL.md:227-228 SKILL.md:228-229
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/sickn33-react-nextjs-development/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/sickn33-react-nextjs-development?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/sickn33-react-nextjs-development?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-react-nextjs-development/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/sickn33-react-nextjs-development.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 引用
sickn33. (2026). react-nextjs-development security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/sickn33-react-nextjs-development/audits/4BibTeX 引用
@techreport{sickn33-sickn33-react-nextjs-development-2026,
author = {sickn33},
title = {react-nextjs-development security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/sickn33-react-nextjs-development/audits/4},
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: "react-nextjs-development security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-react-nextjs-development/audits/4"
identifiers:
- type: other
value: "skillstore:sickn33-react-nextjs-development:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高 55
架構
100
可維護性
87
內容
69
社群
83
規範符合度
你可以打造什麼
開始新的前端專案
使用此工作流程選擇 React 或 Next.js、設定 TypeScript，並規劃初始專案結構。
協調全端 Next.js 交付
使用各階段來對齊路由、Server Components、API 整合、表單、測試和部署工作。
標準化團隊實作步驟
使用品質關卡和階段檢查清單，在發布前審查工作。
試試這些提示
規劃新的應用程式
使用此技能規劃一個採用 TypeScript 和 Tailwind CSS 的新 Next.js 14 App Router 專案。列出設定決策和第一批實作步驟。
設計元件架構
使用此技能為我的 React 應用程式設計元件階層。包含版面配置元件、可重用 UI 元件、狀態邊界和自訂 hooks。
新增資料、表單和驗證
使用此技能為 Next.js 功能規劃資料擷取、API 整合、表單和驗證。包含載入狀態、錯誤和無障礙檢查。
準備測試和部署
使用此技能為 Next.js 應用程式建立發布計畫。涵蓋單元測試、端對端測試、效能檢查、環境變數和 Vercel 部署。
最佳實務
- 在產生專案檔案前，將階段順序作為檢查清單使用。
- 在套用提示詞前，確認框架版本和可用的配套技能。
- 將品質關卡與實際測試、linting、無障礙檢查和效能測量搭配使用。
避免
- 不要將此工作流程視為完整產生的應用程式。
- 使用 Next.js、Tailwind CSS 或測試工具時，不要略過版本檢查。
- 未審查環境變數、建置設定和生產權限前，不要進行部署。
常見問題
此技能會自行建立檔案嗎？
不會。它提供 AI 程式碼助理的工作流程指引和提示詞模式。
它以哪些框架為目標？
它的目標是使用 App Router 和 Server Components 的 React 和 Next.js 14+ 應用程式。
我可以將它與 Claude、Codex 和 Claude Code 搭配使用嗎？
可以。技能中繼資料列出 Claude、Codex 和 Claude Code 為支援工具。
它包含測試指引嗎？
有。它涵蓋單元測試、元件測試、端對端測試和品質關卡。
它涵蓋部署嗎？
有。它包含以 Vercel 和預覽部署為重點的建置與部署階段。
它適合現有應用程式嗎？
適合。你可以套用個別階段來改善元件、路由、表單、測試或部署準備度。