ranbot-ai/react-nextjs-development
skills/react-nextjs-development/SKILL.md
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
$ install --global
skillsauthnpx skillsauth add ranbot-ai/awesome-skills 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: May 2, 2026, 5:40 AM114.3s1 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:
- Document Processing
- source:
- antigravity
- tags:
- [javascript, typescript, react, nextjs, api, ai, workflow, design, document, tailwind]
- url:
- https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-nextjs-development
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 devel
Related Skills
ranbot-ai/grok-delegate
tools
VerifiedTrustedCommunity
Delegate coding tasks to the Grok Build CLI only when the user explicitly requests it, while the orchestrator retains review and landing responsibility.
6SKILL.mdUpdated Aug 31, 2026
ranbot-ai/skills/graceful-shutdown
development
VerifiedTrustedCommunity
--- name: graceful-shutdown description: Implement graceful shutdown for servers and workers: drain connections, finish in-flight work, release resources, and exit cleanly on SIGTERM/SIGINT. category: AI & Agents source: antigravity tags: [python, typescript, node, api, claude, ai, template, docker, kubernetes] url: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/graceful-shutdown --- # Graceful Shutdown ## Overview A skill for implementing graceful shutdown in server
6SKILL.mdUpdated Aug 31, 2026
ranbot-ai/skills/falsify
development
VerifiedTrustedCommunity
--- name: falsify description: The scientific thinking protocol for AI agents. Use when facing complex, ambiguous, or high-stakes questions where guessing is costly: hypothesis → attempt to break it → evidence → calibrated co category: Creative & Media source: antigravity tags: [markdown, claude, ai, agent, llm, template, design, security, rag, cro] url: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/falsify --- # Falsify — The Scientific Thinking Protocol > Think like
6SKILL.mdUpdated Aug 31, 2026
ranbot-ai/delegate-setup
tools
VerifiedTrustedCommunity
Configure approved delegation lanes across installed implementer CLIs, including optional model and effort choices, then write global or project config only after explicit user approval.
6SKILL.mdUpdated Aug 31, 2026