frontend-devGenerate production-ready Next.js projects with TypeScript, Tailwind CSS, shadcn/ui, and API integration. Use when the user asks to build, create, develop, or scaffold a Next.js application, web app, full-stack project, or frontend with backend integration. Prioritizes modern stack (Next.js 14+, TypeScript, shadcn/ui, axios, react-query) and best practices. Also triggers on requests to add features, integrate APIs, or extend existing Next.js projects.
Install via ClawdBot CLI:
clawdbot install wing8169/frontend-devGrade Good — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
http://localhost:3000Audited Apr 16, 2026 · audit v1.0
Generated Mar 1, 2026
Develop a Next.js dashboard for a SaaS platform with user management, subscription tracking, and analytics. Uses shadcn/ui components for data tables and charts, integrates with a backend API for real-time data, and includes protected routes for authenticated users.
Build a responsive e-commerce frontend with product listings, shopping cart functionality, and checkout flow. Implements Zustand for client-side state management, integrates with payment APIs, and uses shadcn/ui for form validation and UI consistency.
Create a portfolio site with a blog section using dynamic routes for blog posts, markdown support for content, and a contact form. Leverages Tailwind CSS for styling, shadcn/ui for components, and integrates with a headless CMS for content management.
Design an admin panel for logistics management with features like shipment tracking, inventory management, and reporting. Uses Next.js API routes for backend integration, react-query for data fetching, and shadcn/ui for a clean, functional interface.
Develop a web app for booking medical appointments, with patient registration, doctor schedules, and notifications. Integrates with authentication APIs, uses Zod for form validation, and ensures responsive design for mobile access.
Generate recurring revenue through monthly or annual subscriptions for access to the web application. Includes tiered pricing plans with features like advanced analytics, priority support, and custom integrations.
Earn revenue by taking a commission on sales or charging listing fees for products on the platform. Can include premium features for sellers, such as promoted listings or enhanced storefronts.
Offer a basic version of the application for free to attract users, then monetize through paid upgrades for advanced features, additional storage, or removal of ads. Targets both individual users and small businesses.
💬 Integration Tip
Use shadcn/ui components for consistent UI and axios with react-query for efficient API integration; consider enabling optional features like auto-revision for visual feedback during development.
Scored Apr 19, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.