Build or improve UI test coverage for visual regression, interactions, and accessibility. Use when the user asks for a test strategy, automated tests, testing setup, or fixes to flaky UI tests. A one-time browser inspection or visual review does not require a new test suite.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
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-react-web-ui☆ 32026년 9월 8일 업데이트
Adapt designs for narrow, medium, wide, embedded, or print web contexts without losing usability, hierarchy, or target sizing. Use when the user mentions responsive design, breakpoints, narrow layouts, viewport changes, coarse-pointer browsers, or cross-context adaptation.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
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-react-web-ui☆ 32026년 9월 8일 업데이트
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants measurable accessibility, performance, responsive, theming, or anti-pattern findings—not when they mainly want an overall UX critique or final visual/detail polish.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Increase visual impact, contrast, personality, and compositional confidence when a design feels bland, generic, or too safe. Use when the design needs more energy, confidence, or memorability—not when the real problem is clutter, over-intensity, or micro-detail polish.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
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-react-web-ui☆ 32026년 9월 8일 업데이트
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-react-web-ui☆ 32026년 9월 8일 업데이트
Simplify cluttered UI by removing unnecessary elements, choices, features, and structural complexity. Use when the problem is too many controls, options, features, or competing elements—not when the structure is sound and the real issue is only visual intensity or lack of personality.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
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-react-web-ui☆ 32026년 9월 8일 업데이트
Create distinctive React and Tailwind interfaces with strong hierarchy and polished implementation. Use when building or redesigning pages, flows, or components, or when another better-react-web-ui skill needs shared design guidance. Pair with add-ui for direct implementation or requested alternatives.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management, making interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Improve how interfaces use photos, screenshots, icons, illustrations, and user-uploaded media so visuals support clarity instead of undermining it. Use when the user mentions images, screenshots, background photos, hero images, icon sizing, user-uploaded media, crops, overlays, or image readability.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Audit and realign UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Design onboarding and activation flows that help users reach value quickly. Use when the user mentions onboarding, getting started, first-time users, activation, aha moments, or new user flows—not when the work is only the empty-state surface itself.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Reduce visual intensity, saturation, and noise while preserving hierarchy and character. Use when the structure is basically sound but the design feels too loud, bold, garish, aggressive, or overstimulating—not when the real problem is structural clutter, too many features, or not enough personality.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Gather and persist audience, brand, UX goals, React framework, Tailwind setup, and component defaults for future design work. Use when the user asks to establish or update reusable project design guidance. A request to build UI can proceed with existing context without running setup.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트
Create standout, technically ambitious interfaces that feel extraordinary through cinematic transitions, advanced motion, heavy rendering, or other high-ambition implementation work. Use when the user wants to wow, impress, go all-out, or push a feature beyond conventional UI polish—not when simple visual confidence or routine cleanup is enough.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
aladicf/better-react-web-ui☆ 32026년 9월 8일 업데이트