Profile My skills Saved My plugins Edit profile Submit a skill

all publishers

aladicf

@aladicf source repo

413 published skills · page 2 of 5

  1. ▌
    A11Y 12 · aladicf
    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.
    2 installs
  2. ▌
    Test 12 · aladicf
    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.
    4 installs
  3. ▌
    Adapt 10 · aladicf
    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.
    4 installs
  4. ▌
    Depth 10 · aladicf
    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.
    3 installs
  5. ▌
    Setup 10 · aladicf
    Gather and persist project design context such as audience, brand personality, UX goals, and implementation defaults for future better-web-ui work. Use when starting a project, defining UI direction, or establishing reusable design guidance before other better-web-ui skills.
    5 installs
  6. ▌
    A11Y 13 · aladicf
    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.
    3 installs
  7. ▌
    Test 13 · aladicf
    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.
    5 installs
  8. ▌
    A11Y 14 · aladicf
    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.
    3 installs
  9. ▌
    Test 14 · aladicf
    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.
    7 installs
  10. ▌
    Colorize 9 · aladicf
    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.
    4 installs
  11. ▌
    Critique 9 · aladicf
    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.
    1 install
  12. ▌
    Data Viz 9 · aladicf
    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.
    4 installs
  13. ▌
    Localize 9 · aladicf
    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.
    3 installs
  14. ▌
    Optimize 9 · aladicf
    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.
    4 installs
  15. ▌
    Audit 9 · aladicf
    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.
    5 installs
  16. ▌
    Forms 9 · aladicf
    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.
    1 install
  17. ▌
    Search 9 · aladicf
    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.
    0 installs
  18. ▌
    Audit 10 · aladicf
    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.
    5 installs
  19. ▌
    Forms 10 · aladicf
    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.
    2 installs
  20. ▌
    Audit 11 · aladicf
    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.
    2 installs
  21. ▌
    Forms 11 · aladicf
    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.
    1 install
  22. ▌
    Audit 12 · aladicf
    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.
    4 installs
  23. ▌
    Forms 12 · aladicf
    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.
    3 installs
  24. ▌
    Search 10 · aladicf
    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.
    2 installs
  25. ▌
    Audit 13 · aladicf
    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.
    2 installs
  26. ▌
    Forms 13 · aladicf
    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.
    0 installs
  27. ▌
    Audit 14 · aladicf
    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.
    2 installs
  28. ▌
    Forms 14 · aladicf
    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.
    3 installs
  29. ▌
    Normalize 9 · aladicf
    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.
    4 installs
  30. ▌
    Search 11 · aladicf
    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.
    0 installs
  31. ▌
    Search 12 · aladicf
    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.
    2 installs
  32. ▌
    Search 13 · aladicf
    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.
    2 installs
  33. ▌
    Search 14 · aladicf
    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.
    0 installs
  34. ▌
    Audit 15 · aladicf
    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.
    4 installs
  35. ▌
    Forms 15 · aladicf
    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.
    2 installs
  36. ▌
    Security UX 9 · aladicf
    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.
    3 installs
  37. ▌
    Normalize 10 · aladicf
    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.
    4 installs
  38. ▌
    Search 15 · aladicf
    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.
    0 installs
  39. ▌
    Normalize 11 · aladicf
    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.
    5 installs
  40. ▌
    Normalize 12 · aladicf
    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.
    6 installs
  41. ▌
    Normalize 13 · aladicf
    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.
    4 installs
  42. ▌
    Normalize 14 · aladicf
    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.
    6 installs
  43. ▌
    Security UX 10 · aladicf
    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.
    2 installs
  44. ▌
    Security UX 11 · aladicf
    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.
    4 installs
  45. ▌
    Security UX 12 · aladicf
    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.
    0 installs
  46. ▌
    Security UX 13 · aladicf
    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.
    5 installs
  47. ▌
    Security UX 14 · aladicf
    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.
    4 installs
  48. ▌
    Normalize 15 · aladicf
    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.
    2 installs
  49. ▌
    Security UX 15 · aladicf
    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.
    0 installs
  50. ▌
    A11Y 2 · aladicf
    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.
    2 installs
  51. ▌
    Test 2 · aladicf
    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.
    10 installs
  52. ▌
    Adapt 2 · aladicf
    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.
    6 installs
  53. ▌
    Audit 2 · aladicf
    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.
    5 installs
  54. ▌
    Depth 2 · aladicf
    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.
    3 installs
  55. ▌
    Forms 2 · aladicf
    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.
    4 installs
  56. ▌
    Setup 2 · aladicf
    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.
    7 installs
  57. ▌
    Add UI 2 · aladicf
    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.
    2 installs
  58. ▌
    Bolder 2 · aladicf
    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.
    3 installs
  59. ▌
    Harden 2 · aladicf
    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.
    4 installs
  60. ▌
    Polish 2 · aladicf
    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.
    9 installs
  61. ▌
    Search 2 · aladicf
    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.
    2 installs
  62. ▌
    A11Y 3 · aladicf
    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.
    3 installs
  63. ▌
    Test 3 · aladicf
    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.
    8 installs
  64. ▌
    Animate 2 · aladicf
    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.
    4 installs
  65. ▌
    Arrange 2 · aladicf
    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.
    6 installs
  66. ▌
    Clarify 2 · aladicf
    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.
    2 installs
  67. ▌
    Delight 2 · aladicf
    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.
    6 installs
  68. ▌
    Distill 2 · aladicf
    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.
    4 installs
  69. ▌
    Extract 2 · aladicf
    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.
    7 installs
  70. ▌
    Imagery 2 · aladicf
    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.
    4 installs
  71. ▌
    Onboard 2 · aladicf
    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.
    8 installs
  72. ▌
    Quieter 2 · aladicf
    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.
    6 installs
  73. ▌
    Typeset 2 · aladicf
    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.
    6 installs
  74. ▌
    A11Y 4 · aladicf
    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.
    2 installs
  75. ▌
    Test 4 · aladicf
    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.
    7 installs
  76. ▌
    A11Y 5 · aladicf
    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.
    2 installs
  77. ▌
    Test 5 · aladicf
    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.
    6 installs
  78. ▌
    Adapt 3 · aladicf
    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.
    6 installs
  79. ▌
    Audit 3 · aladicf
    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.
    3 installs
  80. ▌
    Depth 3 · aladicf
    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.
    4 installs
  81. ▌
    Forms 3 · aladicf
    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.
    2 installs
  82. ▌
    Setup 3 · aladicf
    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.
    4 installs
  83. ▌
    A11Y 6 · aladicf
    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.
    5 installs
  84. ▌
    Test 6 · aladicf
    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.
    4 installs
  85. ▌
    A11Y 7 · aladicf
    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.
    4 installs
  86. ▌
    Test 7 · aladicf
    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.
    8 installs
  87. ▌
    Colorize 2 · aladicf
    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.
    5 installs
  88. ▌
    Critique 2 · aladicf
    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.
    7 installs
  89. ▌
    Data Viz 2 · aladicf
    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.
    4 installs
  90. ▌
    Localize 2 · aladicf
    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.
    5 installs
  91. ▌
    Optimize 2 · aladicf
    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.
    4 installs
  92. ▌
    Showcase 2 · aladicf
    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.
    4 installs
  93. ▌
    Adapt 4 · aladicf
    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.
    6 installs
  94. ▌
    Audit 4 · aladicf
    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.
    5 installs
  95. ▌
    Depth 4 · aladicf
    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.
    5 installs
  96. ▌
    Forms 4 · aladicf
    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.
    4 installs
  97. ▌
    Setup 4 · aladicf
    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.
    9 installs
  98. ▌
    Adapt 5 · aladicf
    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.
    5 installs
  99. ▌
    Audit 5 · aladicf
    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.
    5 installs
  100. ▌
    Depth 5 · aladicf
    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.
    4 installs