Skill: slemo54/ai-labs-builder (version 1.0.0)

--- name: ai-labs-builder description: AI Labs Builder - Create modern websites, AI applications, dashboards, and automated workflows. Unified system for building production-ready projects with Next.js, TypeScript, Tailwind, shadcn/ui, and MCP integration. Use when creating new projects, building AI features, designing dashboards, or automating workflows. Triggers include "create website", "build ai app", "make dashboard", "setup workflow", or any project creation requests. version: "1.0.0" user-invocable: true triggers: - ai labs - create website - build ai app - make dashboard - setup workflow - create project - build application - ai agent - chat interface - dashboard - automation allowed-tools: - Read - Write - Edit - Bash - Node metadata: clawdbot: emoji: "🚀" config: stateDirs: [".ailabs"] --- # AI Labs Builder Unified system for creating modern websites, AI applications, dashboards, and workflows. ## Quick Start ```bash # Create a website ailabs create website my-portfolio --type portfolio # Create an AI app ailabs create ai-app my-chatbot --type chat # Create a dashboard ailabs create dashboard my-analytics --type analytics # Create a workflow ailabs create workflow my-automation --template automation # Deploy ailabs deploy my-project --platform vercel ``` ## Commands ### Website Creation ```bash ailabs create website <name> [options] Options: --type <type> portfolio | saas | blog | ecommerce --style <style> modern | glassmorphism | brutalism | minimal --components Include shadcn/ui components --animations Include Framer Motion animations --seo Include SEO optimization ``` ### AI Application ```bash ailabs create ai-app <name> [options] Options: --type <type> chat | agent | rag | multimodal --provider openai | claude | gemini | local --streaming Enable streaming responses --memory Enable conversation memory --tools Enable tool calling ``` ### Dashboard ```bash ailabs create dashboard <name> [options] Options: --type <type> analytics | admin | personal | monitoring --widgets Include widget system --realtime Enable real-time updates --charts Include chart components ``` ### Workflow ```bash ailabs create workflow <name> [options] Options: --template automation | integration | pipeline --mcp Include MCP server setup --schedule Add cron scheduling --webhook Add webhook triggers ``` ## Project Types ### 1. Websites **Portfolio** - Hero section with animations - Projects showcase - Skills/Experience timeline - Contact form - Blog integration **SaaS Landing** - Feature highlights - Pricing tables - Testimonials - CTA sections - FAQ accordion **Blog** - MDX support - Tag/categories - Search functionality - RSS feed - Newsletter signup ### 2. AI Applications **Chat Interface** - Message history - Streaming responses - Code syntax highlighting - File attachments - Voice input/output **AI Agent** - Autonomous task execution - Tool calling - Memory management - Multi-step reasoning - Human-in-the-loop **RAG System** - Document ingestion - Vector database - Semantic search - Source citations - Context management ### 3. Dashboards **Analytics** - KPI cards - Charts (line, bar, pie) - Date range picker - Export functionality - Real-time updates **Admin Panel** - User management - Role-based access - CRUD operations - Audit logs - Settings panel **Personal Dashboard** - Weather widget - Calendar integration - Task management - Notes/quick capture - Bookmarks ### 4. Workflows **Automation** - Scheduled tasks - Email notifications - Data processing - Report generation **Integration** - API connections - Webhook handling - Data sync - Event triggers **Pipeline** - CI/CD automation - Testing workflows - Deployment pipelines - Quality checks ## Design System ### Colors ```css /* Modern */ --primary: #6366f1; --secondary: #8b5cf6; --accent: #ec4899; /* Glassmorphism */ --glass-bg: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.1); --glass-blur: blur(20px); /* Brutalism */ --brutal-black: #000; --brutal-white: #fff; --brutal-accent: #ff00ff; ``` ### Typography - **Headings**: Inter, Geist, or JetBrains Mono - **Body**: Inter or system-ui - **Code**: JetBrains Mono or Fira Code ### Components All projects include: - Button variants (primary, secondary, ghost, outline) - Cards (default, hover, glass) - Forms (input, textarea, select, checkbox, radio) - Navigation (header, sidebar, breadcrumbs) - Feedback (toast, alert, modal, tooltip) - Data (table, pagination, tabs) ## AI Integration ### OpenAI ```typescript import { OpenAI } from 'openai'; const openai = new OpenAI({ [REDACTED_SECRET], }); // Streaming chat const stream = await openai.chat.completions.create({ model: 'gpt-4', messages: [{ role: 'user', content: prompt }], stream: true, }); ``` ### Claude ```typescript import Anthropic from '@anthropic-ai/sdk'; const anthropic = new Anthropic({ [REDACTED_SECRET], }); const message = await anthropic.messages.create({ model: 'claude-3-opus-20240229', max_tokens: 1024, messages: [{ role: 'user', content: prompt }], }); ``` ### Vector Database (Pinecone/Memory) ```typescript import { Pinecone } from '@pinecone-database/pinecone'; const pc = new Pinecone({ [REDACTED_SECRET], }); // Store embeddings await index.upsert([{ id: '1', values: embedding, metadata: { text: content } }]); ``` ## Deployment ### Vercel (Recommended) ```bash ailabs deploy my-project --platform vercel ``` Features: - Automatic Git integration - Preview deployments - Edge functions - Analytics ### Netlify ```bash ailabs deploy my-project --platform netlify ``` Features: - Git-based deployment - Branch previews - Form handling - Edge functions ### GitHub Pages ```bash ailabs deploy my-project --platform github ``` Features: - Free hosting - Custom domains - Jekyll support - Actions integration ## Best Practices ### Performance - Use Next.js Image component - Implement lazy loading - Optimize fonts with next/font - Use React Server Components ### SEO - Meta tags with next/head - Sitemap generation - robots.txt - Structured data ### Security - Environment variables - Input validation - CSRF protection - Content Security Policy ### Accessibility - ARIA labels - Keyboard navigation - Color contrast - Screen reader support ## Examples ### Create a Portfolio ```bash ailabs create website portfolio \ --type portfolio \ --style glassmorphism \ --components \ --animations \ --seo ``` ### Create an AI Chatbot ```bash ailabs create ai-app chatbot \ --type chat \ --provider openai \ --streaming \ --memory ``` ### Create an Analytics Dashboard ```bash ailabs create dashboard analytics \ --type analytics \ --widgets \ --realtime \ --charts ``` ### Create an Automation Workflow ```bash ailabs create workflow daily-report \ --template automation \ --mcp \ --schedule "0 9 * * *" ``` ## Integration with Other Skills - **mcp-workflow**: For advanced workflow automation - **gcc-context**: For version controlling project context - **agent-reflect**: For continuous improvement ## Resources - [Next.js Documentation](https://nextjs.org/docs) - [Tailwind CSS](https://tailwindcss.com/docs) - [shadcn/ui](https://ui.shadcn.com) - [OpenAI API](https://platform.openai.com/docs) - [MCP Specification](https://modelcontextprotocol.io/)


Security scan verdicts — ClawScan: suspicious | static analysis: suspicious | VirusTotal: suspicious | SkillSpector: suspicious (CRITICAL)