القائمة
Create implementation plans for Next.js features. Use when breaking down user stories into tasks, planning feature implementation, or decomposing complex requirements.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Create robust, error-proof Prisma seed scripts with comprehensive error handling and validation.
Create Next.js 16 API Route Handlers. Use when building REST endpoints (GET, POST, PUT, DELETE), implementing CRUD operations, or creating authenticated APIs with Zod validation.
Create React/Next.js 16 components. Use when building pages, client/server components, forms with useActionState, or UI with shadcn/ui. ALWAYS activate with frontend-design together.
Unit tests with Jest + React Testing Library. CRITICAL - Uses Jest (NOT Vitest).
Write integration tests with Jest for API routes and database operations. Use when testing backend logic, API endpoints, or data layer.
Review code for quality, security, performance, and best practices. Use when reviewing changes before commit, auditing code for issues, or suggesting improvements.
| name | feature-plan |
| description | Create implementation plans for Next.js features. Use when breaking down user stories into tasks, planning feature implementation, or decomposing complex requirements. |
This skill guides creation of implementation plans that break features into actionable tasks.
The user provides a feature request or user story that needs to be decomposed into concrete implementation steps.
Use vertical slicing to deliver complete functionality in each task:
CRITICAL: Avoid horizontal slicing (all models, then all APIs, then all UI). Instead, implement one complete feature at a time.
Before creating plan, verify:
@/lib/ for api-response, auth-helperscomponents.jsonIf missing, add setup task FIRST in plan.
CRITICAL: Map each AC item to explicit task.
Example AC:
"Given no books match my search, when I submit then I see a message indicating no results found"
Map to tasks:
EmptyState component with "no results" messageRules:
Feature: Add to Cart
Bad approach (horizontal slicing):
Good approach (vertical slicing):
Add single item to cart
View cart contents
Update item quantity
For each task, specify:
Ensure each feature covers:
CRITICAL: Only write unit tests. Never write integration or E2E tests.
Write tests for:
Skip tests for:
Features often miss:
Use these pre-installed libraries:
PREFER SIMPLICITY - Don't over-engineer!
| Situation | Solution |
|---|---|
| Local component state | useState - simplest option |
| Form state | react-hook-form - already handles it |
| Search/filter on single page | useState in page component |
| Data shared across 2+ unrelated pages | zustand store |
| Server data with caching | API route + useState |
Use zustand ONLY when:
DON'T use zustand for:
Always respond with JSON wrapped in result tags:
<result>
{
"story_summary": "Brief feature summary (1 sentence)",
"steps": [
{
"order": 1,
"description": "What to do (not how)",
"file_path": "exact/file/path.tsx",
"action": "create|modify|delete|test|config"
}
]
}
</result>
NEVER:
IMPORTANT: Each task should result in visible, testable progress. A user should be able to see something working after each task.