Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Design intuitive, accessible, and visually coherent interfaces aligned with brand and product goals.
Browser automation with Selenium WebDriver for Python. (project)
Update template catalogs and UI prompts after adding new infographic templates (src/templates/*.ts), including SKILL.md template list, site gallery template mappings, and the AIPlayground prompt list.
Complete mastery of essential modern web development libraries and dependencies. Cover Next.js, React, TypeScript, Tailwind CSS, Firebase, Zustand, redux-toolkit, react-hook-form, Zod, shadcn/ui, lucide-react, Stripe, and more. Learn setup, integration patterns, advanced usage, performance optimization, troubleshooting, common pitfalls, and version management. Includes quick reference guides, in-depth tutorials, complete examples for e-commerce and SaaS, configuration files, type definitions, error handling, and production patterns. Master how libraries work together and solve real-world challenges.
Generate BIM Verdi UI components and pages following the established design system. Use when building templates, components, or any frontend for bimverdi.no. Enforces enterprise-calm aesthetics and avoids generic AI patterns.
Build AI chat interfaces with custom backends, authentication, and context injection. Use when integrating chat UI with AI agents, adding auth to chat, injecting user/page context, or implementing httpOnly cookie proxies. Covers ChatKitServer, useChatKit, and MCP auth patterns. NOT when building simple chatbots without persistence or custom agent integration.
Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.
Modern UI design principles and guidelines for building clean, professional interfaces. Use when creating any UI components, layouts, web pages, or interactive elements including buttons, forms, cards, navigation, or complete applications. Applies to HTML, CSS, React, Vue, Svelte, and any frontend framework. Ensures consistent, minimal, and accessible design patterns.
Systematic design optimization for young-personal-site following established design principles. Ensures consistent color palette, responsive layout, and professional appearance.
Extract frames or short clips from videos using ffmpeg.
Sistema de estilos de botones consistentes para iqEngi (Cards, CTAs, Formularios)
Audit and refactor CSS to comply with Game Loopers design system and BEM methodology
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
Build Next.js 16 applications with correct patterns and distinctive design. Use when creating pages, layouts, dynamic routes, upgrading from Next.js 15, or implementing proxy.ts. Covers breaking changes (async params/searchParams, Turbopack, cacheComponents) and frontend aesthetics. NOT when building non-React or backend-only applications.
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.