ux-designer

Identify and verify all files affected by UI or theme changes.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/coopeverything/TogetherOS --skill ux-designer-coopeverything
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-designer
Source: https://github.com/coopeverything/TogetherOS/tree/main/.claude/skills/ux-designer
Command: npx skills add https://github.com/coopeverything/TogetherOS --skill ux-designer-coopeverything

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI changes often touch multiple files (themes, CSS, components) and it's easy to miss updates, causing regressions. This skill provides automatic verification to ensure all affected files are updated.

Core Features & Use Cases

  • UI Change Verification: Scans impacted files to confirm updates cover all affected UI elements.
  • Automated Checklist: Generates a per-change verification checklist to prevent missed updates.
  • Real-World Use Case: After adjusting a theme token, run the workflow to verify that all pages using that token reflect the change.

Quick Start

Run the UI Change Verification Workflow after editing UI files (themes, CSS, or components). Example: identify affected files with a search across apps/web and packages/ui, then create a to-do list for each file found and resolve them before PR.

Frequently Asked Questions about ux-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify that UI changes cover all affected files?

UI change verification scans all files impacted by theme, CSS, or component updates to confirm no changes were missed. After editing design tokens or colors, run the verification workflow to identify affected files across apps, web, and package directories, then create and resolve a checklist for each file before submitting a PR.

What files does a CSS variable or theme token change affect?

Theme token and CSS variable changes typically affect multiple files: component definitions, theme configuration files, dark-mode variants, and pages using those tokens. The verification workflow discovers all impacted files through pattern matching, preventing regressions and ensuring color migrations and hardcoded replacements reach every location.

Can I automate verification of dark mode updates across multiple files?

Yes. The verification workflow automatically checks that dark-mode variants exist alongside light-mode changes and tracks which files still need updates through per-file todo lists. Run verification after editing theme colors or CSS variables to confirm all dark-mode pairs are complete before PR submission.

How do I prevent missing UI updates in multi-package projects?

Multi-package projects require verification across apps/web and packages/ui directories. The workflow generates a per-change checklist that tracks each affected file and enforces pattern checks to catch uncovered assets. Re-run verification before PR to catch any regressions or missed updates.

What happens if a UI file update is missed across the codebase?

Missed updates cause UI regressions where some pages or components don't reflect the new theme or color scheme. The verification workflow prevents this by performing exact file discovery via pattern checks and requiring all todo items to be resolved before the change is considered complete.