Perfect for interactive apps that need smooth, app-like experiences
Organize your app into reusable components within a single HTML file. Perfect for medium-complexity apps.
"Build me a task management app using a component-based architecture within a single HTML file. Structure it like this: • App Component (main container) • Header Component (navigation, user info) • TaskList Component (displays tasks) • TaskItem Component (individual task) • AddTask Component (form for new tasks) • Sidebar Component (filters, categories) Each component should: • Be a JavaScript class or function • Have its own render method • Handle its own state and events • Be easily testable and reusable Use modern JavaScript (ES6+) with clean, readable code organization. Make it feel like a professional React app but without the build complexity."
Centralized state management for complex apps that need predictable data flow.
"Create a meditation app with centralized state management that feels calm and responsive. Implement a simple store pattern with: • AppStore (central state container) • Actions (user interactions like startMeditation, completeSession) • State updates that trigger UI re-renders • Local storage persistence for user progress State should include: • Current meditation session data • User preferences (duration, sounds, themes) • Progress tracking and statistics • App theme and settings Make state changes feel smooth and predictable. When users start a meditation, the entire app should reflect this state change with gentle animations and appropriate UI updates."
Native app experience in the browser with offline capabilities
Apps that work perfectly offline and feel native when installed on devices.
"Build me a journaling app as a PWA that works offline and feels like a native app. PWA Requirements: • Service worker for offline functionality • Web app manifest for installation • Local storage for entries when offline • Background sync when connection returns • Push notifications for gentle reminders App should feel like: • Opening a personal journal • Smooth, native-like animations • Instant response even without internet • Secure and private (data stays local) Include: • Daily journal entries with rich text • Mood tracking integration • Photo attachments that work offline • Export functionality for backup • Beautiful, calming design that works in any lighting"
PWAs that sync data across devices while maintaining offline capabilities.
"Create a note-taking PWA that syncs across devices and handles offline editing gracefully. Sync Architecture: • Local-first data storage (IndexedDB) • Background sync when online • Conflict resolution for simultaneous edits • Real-time updates when multiple devices are active • Optimistic UI updates for responsive feel User Experience: • Notes appear instantly when created (optimistic) • Clear indicators for sync status • Graceful handling of conflicts with user choice • Works seamlessly whether online or offline • Cross-device notifications for shared notes Make it feel magical - users should never worry about losing data or sync conflicts. Handle the complexity behind a beautifully simple interface."
Modular architectures for large applications built by teams
Independent modules that can be developed and deployed separately but work together seamlessly.
"Design a large productivity suite as micro-frontends that can be developed by different teams. Modules: • Shell App (navigation, layout, shared services) • Task Management Module (todo lists, projects) • Calendar Module (scheduling, events) • Notes Module (documentation, ideas) • Analytics Module (insights, reports) Each module should: • Be independently deployable • Share a consistent design system • Communicate through well-defined APIs • Handle its own routing and state • Degrade gracefully if other modules fail Design Philosophy: Make it feel like one cohesive app despite being built by separate teams. Consistent navigation, shared components, and seamless data flow between modules."
Shared design system that ensures consistency across independently built modules.
"Create a comprehensive design system for a multi-team application that ensures visual and functional consistency. Design System Components: • Core Design Tokens (colors, typography, spacing) • Base Components (buttons, inputs, modals) • Complex Patterns (forms, data tables, navigation) • Theme System (light/dark, brand variations) • Animation Library (consistent micro-interactions) Integration Strategy: • Each team imports the design system as a dependency • Automatic updates when design system evolves • Custom theming for different product areas • Accessibility built into every component Make it feel premium and polished - like Apple's ecosystem where every app feels part of the same family despite being built by different teams."