Skip to content

feat(skills): add ux-sweep skill for per-feature UX audits#133

Merged
krazyjakee merged 1 commit into
masterfrom
feat/ux-sweep-skill
Jun 14, 2026
Merged

feat(skills): add ux-sweep skill for per-feature UX audits#133
krazyjakee merged 1 commit into
masterfrom
feat/ux-sweep-skill

Conversation

@krazyjakee

@krazyjakee krazyjakee commented Jun 14, 2026

Copy link
Copy Markdown
Contributor

What

Adds a parameterized /ux-sweep Claude Code skill that audits one feature of the client for simplicity and consistency, on both desktop and mobile, benchmarked against Discord and other mature chat apps — then produces a ranked findings report. It's a port-friendly review tool, not a rewrite generator.

How it works

  • Argument = the feature to sweep (any module under lib/features/ — messaging, voice, channels, spaces, settings, …).
  • Phase 1 — code-first: reads the feature's views/components/controllers/repositories/models, checks the three lenses, compares against sibling features and the Godot reference client (../daccord).
  • Phase 2 — live confirmation: runs the app, drives navigation via the daccord MCP tools when available, and screenshots both viewports — 390×844 (mobile) and 1440×900 (desktop), split at the app's 720px layout breakpoint. Checks overflow, contrast, hover/tap targets, motion, and empty/loading/error states across light + dark themes.
  • Output: a single markdown report with findings ranked by impact × frequency, each tagged [desktop|mobile|both] with severity, benchmark, and a minimal reuse-first fix.

Notes

  • One self-contained file: .claude/skills/ux-sweep/SKILL.md. No app code touched.
  • Uses Accord vocabulary (Space/Channel/Member/Role), per repo conventions.

🤖 Generated with Claude Code

@krazyjakee @claude
feat(skills): add ux-sweep skill for per-feature UX audits
fa62e5a 
Adds a parameterized /ux-sweep skill that audits one feature of the
client for simplicity and consistency across desktop and mobile,
benchmarked against Discord and other chat apps. Code-first analysis
then live confirmation at both viewports (390x844 / 1440x900, split at
the 720px layout breakpoint), producing a ranked findings report.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@krazyjakee krazyjakee merged commit c0ef884 into master Jun 14, 2026
2 checks passed
@krazyjakee Claude

krazyjakee commented Jun 14, 2026

Copy link
Copy Markdown
Contributor Author

Code Review — .claude/skills/ux-sweep/SKILL.md

CI is green. The skill is well-structured and the MCP tool names listed (select_space, select_channel, open_settings, open_dm, open_thread, open_voice_view, toggle_member_list, toggle_search, set_theme, get_current_state) were all verified against lib/features/developer/services/mcp_tools.dart — all present and correct.

Three issues were found and fixed in commit 427064f:

1. Inaccurate breakpoint variable name · Severity: Medium

What: The skill said the 720px breakpoint is "_wideLayoutBreakpoint in accord_home.dart, mirrored in voice_view.dart." The variable in voice_view.dart is actually _sidePanelBreakpoint (voice_view.dart:86), not _wideLayoutBreakpoint. A developer searching voice_view.dart for that name would come up empty.

Fix: Named both constants explicitly — _wideLayoutBreakpoint in accord_home.dart; _sidePanelBreakpoint in voice_view.dart — with a note that they hold the same value.

2. channels and messaging features have no views/ directory · Severity: Medium

What: Phase 1 tells the agent to read lib/features/<feature>/{views,components,controllers,repositories,models}/. But lib/features/channels/ and lib/features/messaging/ contain only components/, controllers/, models/, and utils/ — no views/. Their UI lives inside lib/features/spaces/views/ (accord_home_messages.dart, accord_home_composer.dart, etc.). Without a hint, an agent sweeping either feature would miss the actual UI code.

Fix: Added a callout in Phase 1 step 1 pointing to the spaces/views/ files when sweeping those two features.

3. Phase 2 launch missing a concrete fallback · Severity: Low

What: The only launch command given was flutter run -d chrome --web-port 8080. In remote/headless environments Chrome is often unavailable, leaving the agent with only the vague comment "or the project's usual run path."

Fix: Added flutter run -d linux as an explicit, labelled fallback line in the code block.

What's already solid

  • The three-lens framework (Simplicity / Consistency / Convention) is clear and well-targeted.
  • The ranked-findings output template is concrete and will produce consistent, actionable reports.
  • The 720px breakpoint and dual-viewport capture requirements are exactly right for this app.
  • All MCP navigation tool names are accurate against the codebase.
  • File size (84 → 87 lines) is well within any structural limits; no splitting needed.
  • No test coverage concerns — this is a prompt-only skill file, not executable app code.

Generated by Claude Code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@krazyjakee