Create web applications using vanilla HTML, CSS, and JavaScript or React (Next.js). Use when: building UI features, interactive components, or complete web apps. Supports both minimal vanilla implementations and React component-based apps with Tailwind CSS and TypeScript.
Build web applications using vanilla HTML, CSS, and JavaScript or React/Next.js with a cohesive visual design and minimal dependencies.
Create new directory [APP_NAME] under app/vibe-app directory
Add new description to data/vibeAppData.ts file
.tsx), Tailwind CSS for styling, 'use client' directive for interactive componentspage.tsx (main component) and layout.tsx (wrapper layout)Always start with semantic HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App Name</title>
<style>
<!-- CSS here (see CSS guidelines below) -->
</style>
</head>
<body>
<!-- Content here -->
<script type="module">
// JavaScript here (see JavaScript guidelines below)
</script>
</body>
</html>
CSS must follow this structure and indentation:
<style>
* {
box-sizing: border-box;
}
body {
font-family: Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
}
input,
textarea {
font-size: 16px;
font-family: inherit;
}
/* Component styles below */
</style>
Formatting rules:
* { box-sizing: border-box; } at the topinput and textarea to 16px to prevent iOS zoom-on-focusJavaScript must be in a module script:
<script type="module">
// Code starts unindented at this level
const handler = () => {
console.log('Variables and functions');
};
document.addEventListener('DOMContentLoaded', handler);
</script>
Formatting rules:
<script type="module">const/let, arrow functions, and native DOM APIsevent listeners and querySelector/querySelectorAllWhen building with React, use Next.js file conventions:
layout.tsx — Wraps the page with shared layout:
export default function ToolLayout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col bg-white text-black dark:bg-gray-950 dark:text-white">
{children}
</div>
)
}
page.tsx — Main interactive component:
'use client'
import { useState, useCallback } from 'react'
export default function MyApp() {
const [value, setValue] = useState('')
return (
<div className="flex h-screen flex-col overflow-hidden">
{/* content */}
</div>
)
}
Formatting rules:
'use client' at the top for interactive componentsuseState, useCallback, useMemo from React for state and memoizationdark: Tailwind variants✓ Building single-page applications with minimal dependencies
✓ Interactive forms, calculators, or dashboards
✓ Prototyping UI components quickly
✓ Creating lightweight web tools
✓ Stateful or complex UI → use React/Next.js with TypeScript and Tailwind
✗ Complex global state management → Consider Zustand or Redux
✗ Need transpilation for older browsers → Use build tools
page.tsx + layout.tsx (React)useState, useCallback)app/vibe-app/[APP_NAME]//create-vibe-app Build a todo list app with add/delete/mark-complete features