frontend-dev-guidelines
套用 Next.js 15 前端最佳實踐
也可從以下取得: 0Chan-smc,diet103,Dimon94,BOM-98,BrianDai22,DojoCodingLabs
前端程式碼需要為 Next.js 15 功能（如 Server Components 和 App Router）保持一致的模式。本技能提供 React 19、TypeScript、Shadcn/ui 元件和 Tailwind CSS 的全面指南，以確保應用程式的可維護性和效能。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「frontend-dev-guidelines」。 Create a product card component that displays an image, title, price, and add-to-cart button using Shadcn/ui components.
預期結果:
- Server Component with typed props interface
- Card, CardHeader, CardTitle, CardContent from @/components/ui/card
- Image optimization with next/image component
- Button with variant prop from Shadcn/ui
- Tailwind utility classes for responsive layout
- TypeScript interface for Product type
- cn() utility for conditional styling
正在使用「frontend-dev-guidelines」。 Create a page for listing blog posts with data fetching, loading state, and error handling.
預期結果:
- Page.tsx with async data fetching in Server Component
- loading.tsx with Suspense fallback and spinner
- error.tsx with error boundary and reset button
- Proper directory structure under app/posts/
- Metadata export for SEO
- PostList component import from features
安全審計
安全Pure documentation skill containing only markdown guidelines. No executable code, scripts, network calls, file system access, or environment variable usage. All static findings are false positives from the analyzer misinterpreting markdown code formatting and JSON metadata fields as security issues.
風險因素
🌐 網路存取 (3)
📁 檔案系統存取 (1)
⚙️ 外部命令 (95)
品質評分
你能建構什麼
建構 Next.js 頁面
使用 Server Components、路由、中繼資料和適當的檔案結構建立新頁面
使用 Shadcn/ui 進行樣式設計
使用 Tailwind CSS 和條件式類別工具應用可存取的 UI 元件
遷移至 Server Components
將客戶端模式轉換為 Server Components 以獲得更好的效能
試試這些提示
使用 Shadcn/ui Card 元件建立一個新的 Server Component 來顯示用戶資料，並使用適當的 TypeScript 介面。
使用 Server Component 模式建立一個從 API 端點獲取貼文的頁面，並包含 loading.tsx 和 error.tsx 邊界。
建立一個包含 Server Action 的表單元件來建立新貼文，包括 zod 驗證和 Shadcn/ui 輸入元件。
審查並最佳化以下頁面元件：識別使用 Server Components 的機會、添加 Suspense 串流，並實作適當的快取策略。
最佳實務
- 預設使用 Server Components 進行資料獲取和渲染，以減少套件大小
- 使用 @/components/ui 中的 Shadcn/ui 元件配合 Tailwind CSS 保持一致的樣式
- 使用嚴格的 TypeScript，包含明確的屬性類型且不使用隱含的 any
避免
- 避免不必要地添加 'use client' - 這會增加套件大小並停用 Server Component 的優勢
- 不要在 Server Components 中使用 useEffect 進行資料獲取 - 應直接進行 fetch
- 避免使用行內樣式 - 使用 Tailwind CSS 工具類別和 cn() 輔助函式處理條件式類別