المهارات react-nextjs-development
📦

react-nextjs-development

آمن

Build React and Next.js Applications

This skill provides structured workflows for developing modern React and Next.js applications with App Router, Server Components, and TypeScript. It guides you through project setup, component architecture, styling, data fetching, routing, forms, testing, and deployment.

يدعم: Claude Codex Code(CC)
🥉 73 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "react-nextjs-development". Create a Next.js 14 project with App Router and TypeScript

النتيجة المتوقعة:

  • Project structure created with app/ directory for App Router
  • TypeScript configured with strict mode and proper tsconfig paths
  • Tailwind CSS v4 installed with base configuration
  • ESLint and Prettier set up with React-specific rules
  • Basic layout and page templates generated

استخدام "react-nextjs-development". Build a user profile component with edit functionality

النتيجة المتوقعة:

  • Server Component for fetching user data from API
  • Client Component for form interaction and state management
  • Zod schema for profile validation with custom error messages
  • React Hook Form integration with proper type inference
  • Tailwind-styled responsive profile card with edit modal

التدقيق الأمني

آمن
v1 • 2/24/2026

This skill is a documentation and workflow bundle containing only markdown content with usage prompts. Static analysis flagged 55 external_commands patterns and 11 cryptographic patterns, but all are FALSE POSITIVES - the backticks are markdown code formatting, not shell execution, and no cryptographic code exists. No security risks identified. Safe for publication.

1
الملفات التي تم فحصها
230
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
83
الامتثال للمواصفات

ماذا يمكنك بناءه

Frontend Developer Building a Dashboard

Create a modern admin dashboard with Next.js App Router, Server Components for data fetching, and Tailwind CSS for responsive design with proper component architecture.

Full-Stack Developer Starting a SaaS Project

Rapidly scaffold a new SaaS application with TypeScript, implement authentication flows, set up form validation with Zod, and deploy to Vercel with preview environments.

Team Lead Establishing Development Standards

Define consistent React patterns, component architecture guidelines, testing strategies, and code quality gates for a development team adopting Next.js 14+.

جرّب هذه الموجهات

Beginner: Create a New Next.js Project 
Help me scaffold a new Next.js 14 project with App Router, TypeScript, and Tailwind CSS. Set up the basic folder structure with proper conventions for components, lib, and app directories.
Intermediate: Build a Data-Fetching Component 
Create a Server Component that fetches data from an API endpoint and displays it in a list. Include proper error handling, loading states, and TypeScript types for the data structure.
Advanced: Set Up Form with Validation 
Build a multi-step form using React Hook Form with Zod schema validation. Include field-level error messages, form state persistence, and proper TypeScript integration for type-safe form data.
Expert: Implement Parallel Routes and Intercepting Routes 
Set up Next.js App Router parallel routes for a dashboard layout with intercepting routes for modal dialogs. Include proper slot configurations and conditional rendering based on navigation context.

أفضل الممارسات

  • Use Server Components by default and only switch to Client Components when interactivity is required
  • Implement proper TypeScript types for all components, props, and API responses to catch errors at compile time
  • Follow the colocation principle by keeping components, styles, and tests together in feature-based directories

تجنب

  • Avoid using useEffect for data fetching when Server Components can handle it more efficiently
  • Do not pass large JSON objects as client component props - fetch data directly in the component
  • Never skip error boundaries - always implement proper error handling for async operations

الأسئلة المتكررة

What is the difference between App Router and Pages Router in Next.js?
App Router (introduced in Next.js 13) uses the app/ directory with Server Components by default, supports nested layouts, and provides better performance. Pages Router uses the pages/ directory and is the older routing system. This skill focuses on App Router for modern Next.js development.
When should I use Server Components vs Client Components?
Use Server Components by default for static content, data fetching, and keeping bundle size small. Use Client Components only when you need interactivity like onClick handlers, useState, useEffect, or browser APIs. Mark Client Components with the 'use client' directive.
Is Tailwind CSS v4 compatible with Next.js App Router?
Yes, Tailwind CSS v4 is fully compatible with Next.js App Router. The v4 version offers improved performance with a new engine and simplified configuration. This skill includes setup instructions for Tailwind v4 with App Router projects.
How do I handle authentication with Server Components?
Authentication works seamlessly with Server Components. You can read session cookies on the server, protect routes with middleware, and pass user data to components. For client-side auth checks, use Client Components with hooks from your auth provider.
Can I use this skill with an existing Next.js 13 project?
Yes, but some patterns may differ. Next.js 13.4+ supports App Router, so most concepts apply. If you are on an older version with only Pages Router, consider migrating to App Router to fully benefit from this skill's workflows.
What testing frameworks does this skill recommend?
This skill recommends Vitest for unit and component testing due to its speed and compatibility with Vite. For end-to-end testing, Playwright is recommended for its reliability and cross-browser support. Both integrate well with Next.js projects.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-nextjs-development

مرجع

main

بنية الملفات

📄 SKILL.md