Improve or implement purposeful motion systems, micro-interactions, gestures, and transition behavior for production-grade UI. Use when the user mentions animation, motion, transitions, micro-interactions, hover states, drawers, toasts, gestures, or making the UI feel more alive.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-web-ui☆ 432026년 5월 22일 업데이트
Build or refine UI color systems, warmth, semantic color, and color-based hierarchy in designs that are too gray, monochromatic, or missing color meaning. Use when the user mentions dull colors, gray UI, missing warmth, weak semantic color, or a need for stronger color hierarchy.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-web-ui☆ 432026년 5월 22일 업데이트
Add or refine depth through elevation systems, raised and inset surfaces, layered overlap, and meaningful shadow behavior so interfaces feel structured instead of flat. Use when the user mentions depth, elevation, shadows, layering, flat cards, pressed states, drag feedback, or inset controls.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-web-ui☆ 432026년 5월 22일 업데이트
Design focused empty states for zero-data, no-results, permission, and error situations with clear value framing, strong CTAs, and less dead chrome. Use when the user mentions blank pages, zero-data screens, no results, permission states, or dead controls—not broader onboarding strategy.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-web-ui☆ 432026년 5월 22일 업데이트
Extract reusable components, product patterns, and design tokens into a clearer design system with shared APIs, documented defaults, and better reuse. Use when the user wants to refactor repeated UI, consolidate buttons/cards/forms/sections, build a component library, or turn one-off values into reusable tokens.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-web-ui☆ 432026년 5월 22일 업데이트
Design, structure, or improve form interfaces for clarity, completion rates, and user confidence. Use when the user asks to build a form, redesign a form flow, improve form conversion, add multi-step forms, fix form UX, or structure field layouts and validation.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-web-ui☆ 432026년 5월 22일 업데이트
Systematically audit and remediate accessibility issues in UI, focusing on keyboard navigation, screen reader support, color contrast, semantic HTML, ARIA usage, and motion sensitivity. Use when the user wants to improve accessibility, make a component accessible, fix WCAG violations, add keyboard support, or ensure screen reader compatibility.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-web-ui☆ 432026년 5월 22일 업데이트
Add moments of joy, personality, and surprise through success states, empty states, loading moments, hover details, and celebratory polish once the fundamentals already work. Use when the user wants delight, charm, personality, or memorable micro-interactions—not when the main need is baseline cleanup or stronger visual impact.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-web-ui☆ 432026년 5월 22일 업데이트
Improve layout composition, spacing systems, grouping, and visual rhythm. Use when the user mentions weak layout structure, arbitrary spacing, weak grouping, crowded composition, or layout monotony rather than priority/emphasis problems.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-web-ui☆ 432026년 5월 22일 업데이트
Design focused empty states for zero-data, no-results, permission, and error situations with clear value framing, strong CTAs, and less dead chrome. Use when the user mentions blank pages, zero-data screens, no results, permission states, or dead controls—not broader onboarding strategy.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Implement or refine UI motion, gestures, and transitions. Use when the user asks for animation, hover or press motion, drag or swipe behavior, transition timing, or reduced-motion alternatives. Mentioning a drawer, toast, or hover state alone does not request animation.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Improve UX writing, marketing copy, labels, microcopy, instructions, and error messages so interfaces and product messaging are easier to understand and act on. Use when the user mentions confusing copy, unclear labels, bad error text, weak CTAs, hard-to-follow instructions, or wanting better UX writing.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Evaluate an interface from a UX perspective, assessing hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with evidence-linked judgments and actionable feedback. Use when the user wants an overall design or UX review—not when the main need is measurable accessibility/performance diagnosis, or final micro-detail polish.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Design charts, metrics, and data tables that help users interpret and compare data. Use when the user asks to visualize data, choose chart types, improve dashboard analytics, or make data presentation accessible. Dashboard navigation and shell layout alone belong to add-ui or arrange.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Design, structure, or improve form interfaces for clarity, completion rates, and user confidence. Use when the user asks to build a form, redesign a form flow, improve form conversion, add multi-step forms, fix form UX, or structure field layouts and validation.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Perform a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the work is functionally complete and needs finishing touches—not when the hierarchy, structure, tone, or technical foundation still need major changes.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Design or improve search experiences, result presentation, and filtering interfaces. Use when the user asks to add search, redesign search results, improve findability, build autocomplete, add filters, or fix zero-results dead ends.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Design security-conscious interfaces that protect users without frustrating them. Use when the user asks about MFA, password UX, breach notifications, trust indicators, secure forms, account recovery, or making security feel safe rather than scary.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Improve UI typography by fixing font choices, type scale, hierarchy, weight, and readability so text feels intentional. Use when the user mentions fonts, typography, type scale, readability, text hierarchy, or sizing that feels off.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Plan, implement, or improve an internationalization and localization strategy for UI content, formatting, and regional adaptation. Use when the user asks to add i18n, localize, translate, support multiple languages, handle regional formats, manage locale switching, or build a multilingual product.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Create or redesign React and Tailwind sections, pages, flows, shells, and components. Use when the user wants new UI or a redesign. Implement one requested or selected direction directly, or generate distinct alternatives when the user asks to compare options.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Build or refine UI color systems, warmth, semantic color, and color-based hierarchy in designs that are too gray, monochromatic, or missing color meaning. Use when the user mentions dull colors, gray UI, missing warmth, weak semantic color, or a need for stronger color hierarchy.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Clarify priority and emphasis by fixing unclear primary actions, competing visual weight, loud section titles, and weak label/value treatment. Use when the user mentions hierarchy, prioritization, too much competition, grayscale confusion, loud headings, or unclear primary actions.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Diagnose and fix UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트