frontend_design_expert_skill

Overview

This skill crafts modern, polished UI/UX designs and implements reusable Flutter and React components with accessible color systems and motion. It focuses on visual-first design: color palettes, spacing, and interaction feedback before writing code. The result is production-ready components, dark-mode support, and clear accessibility guidance.

How this skill works

I inspect client requirements and existing screens, then propose a visual system: palette, typography, spacing, and motion tokens. I generate component-level code for Flutter or React, including props, state handling, and ARIA/semantics for accessibility. I also provide color contrast checks, dark-mode variants, and suggested interaction animations (ripple, fade, scale).

When to use it

• Designing a new product UI or landing page
• Building or refactoring component libraries in React or Flutter
• Creating accessible color schemes and dark-mode support
• Adding polished micro-interactions to improve UX
• Preparing design specs for developers and QA

Best practices

• Start with visual tokens: colors, spacing, typography, and motion before coding
• Keep components small and composable; separate presentational and stateful logic
• Always include accessible labels, keyboard focus, and semantic roles
• Provide dark-mode palette and test contrast ratios (WCAG AA/AAA)
• Document interaction states and motion easing for consistent feedback

Example use cases

• Turn a plain login screen into a glassmorphism-styled component set with Flutter/React implementations
• Convert a static design into a component library with theme tokens and dark-mode support
• Audit and fix color contrast and ARIA attributes for better screen reader compatibility
• Add ripple/fade/scale micro-interactions to buttons, inputs, and list items for clearer feedback
• Generate a color swap recommendation when a hue fails contrast testing and suggest alternative hex values