develop-frontend
建立 Next.js React 前端
前端開發需要遵循特定的專案慣例、測試標準和建置流程。此技能提供逐步指導，協助您實作 Next.js/React 功能，並包含適當的元件架構、API 整合和測試覆蓋率。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“develop-frontend”。 Create a login page with email and password form
预期结果:
- ✓ Created views/login/LoginView.tsx (Container component)
- ✓ Created components/LoginForm/index.tsx (Presentational component)
- ✓ Implemented React Hook Form with Zod validation
- ✓ Added shadcn/ui Form components (Input, Button, Label)
- ✓ Created useLogin custom hook with iron-session
- ✓ Wrote 5 test cases with 92% coverage
- ✓ Passed Biome lint check (0 errors)
- ✓ Build successful
- ✓ Server running at http://localhost:3000
安全审计
安全Pure markdown documentation skill containing only frontend development guidance. No executable code, scripts, or dangerous capabilities. All static findings are false positives: cryptographic hash references in metadata were misidentified as weak crypto, shell command examples in documentation were flagged as backtick execution, and standard YAML frontmatter was flagged as obfuscation. This is a guidance-only skill that instructs AI agents on development workflows.
风险因素
📁 文件系统访问 (1)
⚙️ 外部命令 (62)
质量评分
你能构建什么
建立新功能
遵循專案慣例實作新頁面和元件，並包含適當的測試
建立 UI 元件
使用 Storybook 和測試開發可重複使用的 Presentational 元件
實作測試覆蓋率
使用 Vitest 為 React 元件撰寫單元和整合測試
试试这些提示
Create a new dashboard page at views/dashboard/ with user statistics display. Include a Container component that fetches data using the Orval API client and Presentational components for the UI. Write Vitest tests with 80% coverage.
Build a reusable UserCard component using shadcn/ui Card. Create the component in components/UserCard/ with index.tsx, index.test.tsx, and index.stories.tsx. Apply tablet-first responsive design.
Implement a contact form using React Hook Form and Zod validation. Use shadcn/ui Form components. Include proper error handling and loading states. Write tests for validation and submission.
Integrate the user profile API. Create a useUserProfile custom hook that handles loading, error, and success states. Use the Orval-generated client. Write tests with MSW mock handlers.
最佳实践
- 在建立新元件之前，先檢查現有的 shadcn/ui 元件
- 清楚區分 Presentational（UI）和 Container（邏輯）元件
- 在回報完成前，先在本機執行 lint、測試和建置
避免
- 使用 any type 而非 unknown 以確保類型安全
- 在同一個元件中混合業務邏輯和 UI 渲染
- 為了加速交付而跳過測試覆蓋率要求