Rapidly prototype and build modern, responsive web applications from scratch using current frameworks and libraries. Use when you want to quickly create a new web app with full local control, creative flow, and modern best practices. Local alternative to Lovable, Bolt, and v0.
Rapidly prototype and build modern, responsive web applications from scratch using current frameworks, libraries, and best practices. This skill handles everything from initial project setup to implementing features, styling, and basic deployment configuration with a focus on creative flow and quick iteration.
When to use this skill
You want to rapidly prototype a new web application idea.
You're in a creative flow and want to build something quickly without context switching.
You want to use modern frameworks like React, Next.js, Vue, Svelte, or similar.
You prefer local development with full control rather than hosted builder environments.
You want to experiment and iterate fast on designs and features.
Review responsive behavior on different screen sizes
6. Documentation and deployment
Write comprehensive README
Document environment variables
Add deployment configuration for target platform
Create development and build scripts
Verification
Run the following commands (adjust based on package manager and setup):
# Install dependencies
npm install
# Type checking
npm run type-check # or tsc --noEmit
# Linting
npm run lint
# Tests
npm test
# Build verification
npm run build
# Run locally
npm run dev
The skill is complete when:
All commands run successfully without errors.
The application builds and runs in development mode.
Core features work as specified across different screen sizes.
Accessibility checks pass (use browser dev tools or axe extension).
Tests cover critical user paths.
Documentation is clear and complete.
Safety and escalation
External dependencies: Always verify package security and maintenance status before adding dependencies.
Environment secrets: Never commit API keys, secrets, or credentials. Use .env.local and document in README.
Framework limitations: If requirements exceed framework capabilities, suggest alternatives or clarify constraints.
Performance concerns: If the app requires complex state or data handling, consider suggesting more robust solutions.
Dynamic documentation references
Always search for and reference the most current documentation:
Before implementing any feature, search these docs to ensure you're using current APIs and best practices.
Example workflows
Vibing a landing page
User: "Let's vibe a landing page for a SaaS product - hero section, features, pricing, contact form"
Droid will:
1. Search for current Next.js initialization best practices
2. Initialize Next.js project with TypeScript and Tailwind
3. Create component structure (Hero, Features, Pricing, Contact)
4. Implement responsive design with proper accessibility
5. Add form validation and error handling
6. Set up basic SEO with metadata
7. Provide deployment instructions for Vercel/Netlify
Quick dashboard prototype
User: "I want to quickly prototype an admin dashboard - auth, data tables, charts"
Droid will:
1. Research current patterns for Next.js App Router with authentication
2. Initialize project with appropriate dependencies
3. Set up authentication flow (NextAuth.js or similar)
4. Create protected route structure
5. Implement data fetching with loading states
6. Add table and chart components with proper typing
7. Include tests for auth and data flows
8. Document setup including database requirements
SEO and web vitals
For public-facing applications, automatically implement:
Meta tags: Title, description, Open Graph, Twitter cards