Implement UI/UX Fixes

Replace hardcoded values with design tokens and standardize UI components.

Updated Nov 29, 2025
One-click install
npx skills add https://github.com/endlessblink/pomo-flow --skill implement-ui-ux-fixes
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Implement UI/UX Fixes
Source: https://github.com/endlessblink/pomo-flow/tree/main/archive/.old-pomo-flow-worktrees/pomo-flow-ui/.claude/skills/implement-ui-ux-fixes
Command: npx skills add https://github.com/endlessblink/pomo-flow --skill implement-ui-ux-fixes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solves? This Skill streamlines the process of implementing UI/UX improvements, ensuring design system compliance, component consistency, and accessibility, saving you time on manual adjustments and audits.

Core Features & Use Cases

  • Design Token Migration: Replace hardcoded values with design tokens for consistent styling.
  • Component Consolidation: Standardize UI elements like buttons, cards, and modals across the application.
  • Accessibility Improvements: Automatically add ARIA labels and fix focus indicators for WCAG compliance.
  • Use Case: A UI audit reveals inconsistent button styles and missing ARIA labels. Use this skill to systematically refactor all buttons to a BaseButton component and add necessary accessibility attributes.

Quick Start

Implement UI/UX fixes for the settings modal to match the provided reference design, focusing on button styles and spacing.