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>