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☆ 402026年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☆ 402026年5月22日 更新
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-web-ui☆ 402026年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☆ 402026年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☆ 402026年5月22日 更新
Evaluate an interface from a UX perspective, assessing hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring 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-web-ui☆ 402026年5月22日 更新
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☆ 402026年5月22日 更新
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, touch-capable browsers, or cross-context adaptation.
日本語の概要は準備中です。原文の説明を表示しています。
aladicf/better-web-ui☆ 402026年5月22日 更新
Design or improve data visualizations, charts, and data presentation interfaces. Use when the user asks to add charts, build dashboards, visualize data, choose chart types, make data accessible, or present metrics and analytics.
日本語の概要は準備中です。原文の説明を表示しています。
aladicf/better-web-ui☆ 402026年5月22日 更新
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-web-ui☆ 402026年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☆ 402026年5月22日 更新
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-web-ui☆ 402026年5月22日 更新
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-web-ui☆ 402026年5月22日 更新
Build or improve a UI testing strategy covering visual regression, interaction testing, and accessibility assertions. Use when the user asks to add tests, set up testing, fix flaky tests, improve test coverage, validate UI behavior, catch visual bugs, or establish confidence in shipping frontend changes.
日本語の概要は準備中です。原文の説明を表示しています。
aladicf/better-web-ui☆ 402026年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☆ 402026年5月22日 更新
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-web-ui☆ 402026年5月22日 更新
Create distinctive, production-grade frontend interfaces with strong hierarchy, thoughtful systems, and polished implementation that avoid generic AI aesthetics. Use when the user wants to build or redesign web pages, flows, components, or full app surfaces, or when another better-web-ui skill needs shared project design context before other better-web-ui skills.
日本語の概要は準備中です。原文の説明を表示しています。
aladicf/better-web-ui☆ 402026年5月22日 更新
Generate 5 distinct, production-grade UI variations for a requested new or existing section, component, page, flow, or shell, then help the user preview and apply one. Use when the user asks to add or redesign UI like a hero, pricing, navbar, auth flow, dashboard shell, ecommerce surface, or data component.
日本語の概要は準備中です。原文の説明を表示しています。
aladicf/better-web-ui☆ 402026年5月22日 更新
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-web-ui☆ 402026年5月22日 更新
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-web-ui☆ 402026年5月22日 更新
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-web-ui☆ 402026年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☆ 402026年5月22日 更新
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-web-ui☆ 402026年5月22日 更新
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-web-ui☆ 402026年5月22日 更新