bereniketech/react-nextjs-development
skills/frameworks-frontend/react-nextjs-development/SKILL.md
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
development
Updated Apr 20, 2026
$ install --global
skillsauthnpx skillsauth add bereniketech/claude_kit react-nextjs-developmentInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 30, 2026, 11:21 PM256.7s1 file scanned
SKILL.md
- name:
- react-nextjs-development
- description:
- React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
- category:
- granular-workflow-bundle
- risk:
- safe
- source:
- personal
- date_added:
- 2026-02-27
React/Next.js Development Workflow
Overview
Specialized workflow for building React and Next.js 14+ applications with modern patterns including App Router, Server Components, TypeScript, and Tailwind CSS.
When to Use This Workflow
Use this workflow when:
- Building new React applications
- Creating Next.js 14+ projects with App Router
- Implementing Server Components
- Setting up TypeScript with React
- Styling with Tailwind CSS
- Building full-stack Next.js applications
Workflow Phases
Phase 1: Project Setup
Skills to Invoke
app-builder- Application scaffoldingsenior-fullstack- Full-stack guidancenextjs-app-router-patterns- Next.js 14+ patternstypescript-pro- TypeScript setup
Actions
- Choose project type (React SPA, Next.js app)
- Select build tool (Vite, Next.js, Create React App)
- Scaffold project structure
- Configure TypeScript
- Set up ESLint and Prettier
Copy-Paste Prompts
Use @app-builder to scaffold a new Next.js 14 project with App Router
Use @nextjs-app-router-patterns to set up Server Components
Phase 2: Component Architecture
Skills to Invoke
frontend-developer- Component developmentreact-patterns- React patternsreact-state-management- State managementreact-ui-patterns- UI patterns
Actions
- Design component hierarchy
- Create base components
- Implement layout components
- Set up state management
- Create custom hooks
Copy-Paste Prompts
Use @frontend-developer to create reusable React components
Use @react-patterns to implement proper component composition
Use @react-state-management to set up Zustand store
Phase 3: Styling and Design
Skills to Invoke
frontend-design- UI designtailwind-patterns- Tailwind CSStailwind-design-system- Design systemcore-components- Component library
Actions
- Set up Tailwind CSS
- Configure design tokens
- Create utility classes
- Build component styles
- Implement responsive design
Copy-Paste Prompts
Use @tailwind-patterns to style components with Tailwind CSS v4
Use @frontend-design to create a modern dashboard UI
Phase 4: Data Fetching
Skills to Invoke
nextjs-app-router-patterns- Server Componentsreact-state-management- React Queryapi-patterns- API integration
Actions
- Implement Server Components
- Set up React Query/SWR
- Create API client
- Handle loading states
- Implement error boundaries
Copy-Paste Prompts
Use @nextjs-app-router-patterns to implement Server Components data fetching
Phase 5: Routing and Navigation
Skills to Invoke
nextjs-app-router-patterns- App Routernextjs-best-practices- Next.js patterns
Actions
- Set up file-based routing
- Create dynamic routes
- Implement nested routes
- Add route guards
- Configure redirects
Copy-Paste Prompts
Use @nextjs-app-router-patterns to set up parallel routes and intercepting routes
Phase 6: Forms and Validation
Skills to Invoke
frontend-developer- Form developmenttypescript-advanced-types- Type validationreact-ui-patterns- Form patterns
Actions
- Choose form library (React Hook Form, Formik)
- Set up validation (Zod, Yup)
- Create form components
- Handle submissions
- Implement error handling
Copy-Paste Prompts
Use @frontend-developer to create forms with React Hook Form and Zod
Phase 7: Testing
Skills to Invoke
javascript-testing-patterns- Jest/Vitestplaywright-skill- E2E testinge2e-testing-patterns- E2E patterns
Actions
- Set up testing framework
- Write unit tests
- Create component tests
- Implement E2E tests
- Configure CI integration
Copy-Paste Prompts
Use @javascript-testing-patterns to write Vitest tests
Use @playwright-skill to create E2E tests for critical flows
Phase 8: Build and Deployment
Skills to Invoke
vercel-deployment- Vercel deploymentvercel-deploy-claimable- Vercel deploymentweb-performance-optimization- Performance
Actions
- Configure build settings
- Optimize bundle size
- Set up environment variables
- Deploy to Vercel
- Configure preview deployments
Copy-Paste Prompts
Use @vercel-deployment to deploy Next.js app to production
Technology Stack
| Category | Technology | |----------|------------| | Framework | Next.js 14+, React 18+ | | Language | TypeScript 5+ | | Styling | Tailwind CSS v4 | | State | Zustand, React Query | | Forms | React Hook Form, Zod | | Testing | Vitest, Playwright | | Deployment | Vercel |
Quality Gates
- [ ] TypeScript compiles without errors
- [ ] All tests passing
- [ ] Linting clean
- [ ] Performance metrics met (LCP, CLS, FID)
- [ ] Accessibility checked (WCAG 2.1)
- [ ] Responsive design verified
Related Workflow Bundles
development- General developmenttesting-qa- Testing workflowdocumentation- Documentationtypescript-development- TypeScript patterns
Related Skills
bereniketech/anti-reversing-techniques
testing
VerifiedTrustedCommunity
AUTHORIZED USE ONLY: This skill contains dual-use security techniques. Before proceeding with any bypass or analysis: > 1.
SKILL.mdUpdated May 3, 2026
bereniketech/active-directory-attacks
testing
Community
Provide comprehensive techniques for attacking Microsoft Active Directory environments. Covers reconnaissance, credential harvesting, Kerberos attacks, lateral movement, privilege escalation, and domain dominance for red team operations and penetration testing.
SKILL.mdUpdated May 3, 2026
bereniketech/zeroize-audit
development
VerifiedTrustedCommunity
Detects missing zeroization of sensitive data in source code and identifies zeroization removed by compiler optimizations, with assembly-level analysis, and control-flow verification. Use for auditing C/C++/Rust code handling secrets, keys, passwords, or other sensitive data.
SKILL.mdUpdated May 3, 2026
bereniketech/wcag-audit-patterns
development
VerifiedTrustedCommunity
Comprehensive guide to auditing web content against WCAG 2.2 guidelines with actionable remediation strategies.
SKILL.mdUpdated May 3, 2026