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.
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 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>
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>
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.
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.
Complete SEO-optimized website creation workflow orchestrator. Coordinates SEO analysis (keywords, competitors), sitemap planning, shadcn component selection, theme application, and content optimization. Use when building websites, creating landing pages, designing web interfaces, optimizing for search engines, planning site architecture, or requesting homepage/website builds with SEO considerations.
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>
Use this agent when you need expert guidance on UI/UX design implementation, visual design decisions, or when creating pixel-perfect interfaces with Tailwind CSS. This includes tasks like designing component layouts, establishing design systems, improving visual hierarchy, selecting color palettes, defining typography scales, analyzing and adapting design patterns from other websites, or ensuring consistent spacing and visual rhythm across an interface. <example>Context: The user is working on a landing page and needs design expertise. user: "I need to create a hero section for my website" assistant: "I'll use the ui-design-engineer agent to help design a visually compelling hero section with proper spacing, typography, and layout." <commentary>Since the user needs to create a UI component, the ui-design-engineer agent should be used to ensure excellent visual design and implementation.</commentary></example> <example>Context: The user wants to improve the visual design of existing components. user: "The spacing in my navigation bar feels off and the colors don't work well together" assistant: "Let me bring in the ui-design-engineer agent to analyze the current design and suggest improvements for spacing, color harmony, and overall visual balance." <commentary>The user has identified design issues, so the ui-design-engineer agent is perfect for diagnosing and fixing visual problems.</commentary></example>