Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Use this agent when you need expert guidance on UI/UX implementation using Tailwind CSS and Framer Motion, following system design principles. This includes creating interactive components, animations, responsive layouts, accessibility features, and maintaining design consistency.\n\nExamples:\n- When creating new UI components (navbars, modals, cards, forms, buttons)\n- When implementing animations or micro-interactions\n- When reviewing existing components for design system compliance\n- When ensuring accessibility standards are met\n- When optimizing responsive layouts across breakpoints\n- When you need to validate that UI code follows the project's established patterns from CLAUDE.md\n\n<example>\nContext: User needs to create an animated navigation component\nuser: "I need to create a navbar with smooth animations"\nassistant: "I'm going to use the Task tool to launch the ui-ux-tailwind-expert agent to design and implement an animated navbar with proper UX considerations."\n<commentary>\nSince the user is requesting UI component creation with animations, use the ui-ux-tailwind-expert agent to handle the implementation with proper design system adherence and animation best practices.\n</commentary>\n</example>\n\n<example>\nContext: User has built a component and wants it reviewed for quality\nuser: "Can you review this modal component for accessibility and animations?"\nassistant: "Let me use the ui-ux-tailwind-expert agent to review your modal component for accessibility compliance and animation best practices."\n<commentary>\nSince the user is asking for a UI/UX review focusing on accessibility and animations, use the ui-ux-tailwind-expert agent to provide structured feedback.\n</commentary>\n</example>\n\n<example>\nContext: User has completed work and the agent should proactively review it\nuser: "I just built a dashboard layout, can you check if it follows our design system?"\nassistant: "I'll use the ui-ux-tailwind-expert agent to review your dashboard for design system compliance and suggest improvements."\n<commentary>\nSince the user has completed UI work and is seeking validation, use the ui-ux-tailwind-expert agent to review for design system adherence, accessibility, and best practices.\n</commentary>\n</example>
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.
Three.js game development. Use for 3D web games, WebGL rendering, game mechanics, physics integration, character controllers, camera systems, lighting, animations, and interactive 3D experiences in the browser.
Use this agent when you need to create, modify, or review SvelteKit UI components with a focus on mobile-first design and accessibility. This includes building new components, refactoring existing ones for better mobile responsiveness, implementing dark mode support, adding form validation, or ensuring touch-friendly interactions. Examples:\n\n<example>\nContext: The user needs a new form component for their SvelteKit app.\nuser: "Create a login form component for mobile users"\nassistant: "I'll use the ui-component-agent to create a mobile-first login form component with proper validation and touch-friendly design."\n<commentary>\nSince the user needs a UI component built with mobile-first principles, the ui-component-agent is the appropriate choice.\n</commentary>\n</example>\n\n<example>\nContext: The user wants to improve an existing component's mobile experience.\nuser: "Make this navigation menu work better on mobile devices"\nassistant: "Let me use the ui-component-agent to refactor this navigation menu for optimal mobile experience with touch-friendly interactions."\n<commentary>\nThe task involves improving mobile UI, which is the ui-component-agent's specialty.\n</commentary>\n</example>\n\n<example>\nContext: The user needs dark mode implementation.\nuser: "Add dark mode support to the card component"\nassistant: "I'll invoke the ui-component-agent to implement proper dark mode styling for the card component using Tailwind."\n<commentary>\nDark mode implementation with Tailwind is within the ui-component-agent's expertise.\n</commentary>\n</example>
Use this agent when the user needs expert guidance on Flutter development, architecture decisions, widget optimization, state management, platform-specific implementations, or troubleshooting Flutter-related issues. This agent should be consulted when:\n\n<example>\nContext: User is working on the Memento Flutter project and needs to add a new feature to an existing plugin.\nuser: "我想在 diary 插件中添加一个图片上传功能"\nassistant: "让我调用 flutter-master agent 来帮你设计这个功能的实现方案"\n<commentary>\nThe user is asking for Flutter development guidance on adding image upload functionality. Use the Task tool to launch the flutter-master agent to provide architectural guidance and implementation details.\n</commentary>\n</example>\n\n<example>\nContext: User encounters a performance issue in their Flutter app.\nuser: "应用在滚动长列表时很卡顿,怎么优化?"\nassistant: "我将使用 flutter-master agent 来分析性能问题并提供优化方案"\n<commentary>\nThis is a Flutter performance optimization question. Launch the flutter-master agent to diagnose and provide solutions.\n</commentary>\n</example>\n\n<example>\nContext: User needs help with state management patterns.\nuser: "Provider 和 Riverpod 哪个更适合我的项目?"\nassistant: "让我用 flutter-master agent 来帮你分析状态管理方案的选择"\n<commentary>\nArchitectural decision about state management requires Flutter expertise. Use the flutter-master agent.\n</commentary>\n</example>\n\n<example>\nContext: User is creating a new plugin and needs architectural guidance.\nuser: "我要创建一个新的健身追踪插件,应该如何设计数据结构?"\nassistant: "我会调用 flutter-master agent 来指导你设计符合 Memento 插件架构的数据结构"\n<commentary>\nNew plugin development needs Flutter and project-specific architectural guidance. Launch flutter-master agent.\n</commentary>\n</example>
Use this agent when the user needs to create, modify, or implement UI components using shadcn/ui library. This includes building forms, dialogs, data tables, navigation menus, layout components, or any interface elements that should follow the project's design system defined in STYLE_GUIDE.md.\n\nExamples:\n\n<example>\nContext: User needs to create a registration form component.\nuser: "I need to build a user registration form with email, password, and terms acceptance"\nassistant: "I'm going to use the Task tool to launch the shadcn-ui-builder agent to create this registration form using shadcn/ui components"\n<tool_use>\nThis demonstrates launching the agent for form component creation.\n</tool_use>\n</example>\n\n<example>\nContext: User is working on UI and mentions needing a modal.\nuser: "Can you add a confirmation dialog when the user clicks delete?"\nassistant: "I'll use the shadcn-ui-builder agent to implement a proper Alert Dialog component for this destructive action confirmation"\n<tool_use>\nSince this requires shadcn/ui Dialog implementation, use the agent proactively.\n</tool_use>\n</example>\n\n<example>\nContext: User needs to update an existing component to match design system.\nuser: "This button doesn't match our design system"\nassistant: "Let me use the shadcn-ui-builder agent to review and update the button component to align with STYLE_GUIDE.md specifications"\n<tool_use>\nProactively using agent to ensure design system compliance.\n</tool_use>\n</example>\n\n<example>\nContext: User is building a data display feature.\nuser: "I need to show a list of users with pagination and filtering"\nassistant: "I'm going to launch the shadcn-ui-builder agent to implement a Data Table component with the required pagination and filtering features"\n<tool_use>\nAgent should handle complex component composition scenarios.\n</tool_use>\n</example>
Critical architecture knowledge for the squared component library package. Use this skill when working on squared package components, troubleshooting build/transpilation issues, or setting up apps to consume squared. Covers the NO BUILD STEP architecture, CSS Modules-only styling requirement, Next.js transpilation configuration, direct TypeScript source exports, and testing infrastructure.
This skill should be used when building single-file browser applications, client-side utilities, or interactive tools that need no backend. Covers patterns for state persistence, API integration, and advanced browser capabilities without React or build steps.
Build accessible user interfaces using semantic HTML, proper ARIA attributes, keyboard navigation, color contrast, and screen reader compatibility. Use this skill when creating or modifying frontend components, HTML templates, React/Vue/Svelte components, forms, interactive elements, navigation menus, modals, or any UI elements. Apply when working with HTML files, JSX/TSX components, template files, ensuring keyboard accessibility, implementing focus management, adding alt text to images, creating form labels, testing with screen readers, managing ARIA attributes, maintaining color contrast ratios, or building heading hierarchies. Use for any task involving UI accessibility compliance, WCAG standards, or inclusive design patterns.
Creates distinctive, production-grade frontend interfaces. Use when building web components, pages, dashboards, or applications that need high design quality and avoid generic AI aesthetics.
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.
Build accessible user interfaces with semantic HTML, proper ARIA attributes, keyboard navigation, and screen reader compatibility. Use this skill when creating or modifying HTML markup, UI components, forms, or interactive elements. When implementing keyboard navigation, focus management, or tab order. When adding alternative text for images or labels for form inputs. When ensuring sufficient color contrast ratios. When working with navigation menus, modals, buttons, or dynamic content. When structuring pages with proper heading hierarchy (h1-h6). When testing UI changes for screen reader compatibility.
Write consistent, maintainable CSS following the project's methodology (Tailwind utility classes) while minimizing custom CSS and adhering to design system tokens. Use this skill when writing or editing CSS files, Tailwind classes in React components (.tsx, .jsx files), when implementing design system colors/spacing/typography, when using Tailwind utility classes, when deciding between framework utilities vs. custom CSS, when optimizing CSS for production with tree-shaking, when configuring Tailwind theme extensions, or when maintaining design consistency across the application.
Use this agent when you need to create, modify, or review frontend code, UI components, or user interfaces. Examples: <example>Context: User needs to create a responsive navigation component for their React application. user: 'I need a navigation bar that works on both desktop and mobile' assistant: 'I'll use the ui-engineer agent to create a modern, responsive navigation component' <commentary>Since the user needs frontend UI work, use the ui-engineer agent to design and implement the navigation component with proper responsive design patterns.</commentary></example> <example>Context: User has written some frontend code and wants it reviewed for best practices. user: 'Can you review this React component I just wrote?' assistant: 'I'll use the ui-engineer agent to review your React component for modern best practices and maintainability' <commentary>Since the user wants frontend code reviewed, use the ui-engineer agent to analyze the code for clean coding practices, modern patterns, and integration considerations.</commentary></example>
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.