skills.rest
richardthe3rd
richardthe3rdCOMMUNITY
Explore all skills by this author →
GitHub

ui-and-accessibility

Enforce strict change scoping for Flutter UI and accessibility modifications.

2|3|Updated Nov 28, 2025
Search Tags:#accessibility#wcag#mobile-development#ui-design#flutter#golden-tests#widget-reuse
One-click install
npx skills add https://github.com/richardthe3rd/cambridge-beer-festival-app --skill ui-and-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-and-accessibility
Source: https://github.com/richardthe3rd/cambridge-beer-festival-app/tree/main/.claude/skills/ui-and-accessibility
Command: npx skills add https://github.com/richardthe3rd/cambridge-beer-festival-app --skill ui-and-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the risk of costly, unreviewable sweeping UI redesigns — the single most expensive failure mode in this project's history — and ensures all visual changes meet the project's strict WCAG 2.1 AA accessibility standards without re-deriving patterns from scratch.

Core Features & Use Cases

  • Strict change scoping rules: Enforces one widget or screen per PR and separates restyle work from restructure work to keep diffs small, reviewable, and revertible.
  • Shared widget reuse table: Curated list of existing Flutter widgets to use instead of building duplicate components, reducing maintenance burden for the solo maintainer.
  • WCAG 2.1 AA accessibility catalogue: Verified semantics patterns for all interactive elements, including toggle buttons, filter chips, star ratings, and tappable cards, to ensure screen reader compatibility.
  • Preserved screen invariants: Enforces critical fixed patterns like the festival-flash guard, four-signal loading/error UI, and navigation helpers to avoid regressing resolved bugs.
  • Use Case: If you need to add a "Tasted" status badge to the drink card, this skill guides you to scope the change to a single restyle PR, use the existing DrinkCard widget, follow state-aware semantics labeling, and update golden files deliberately to avoid unintended visual drift.

Quick Start

Load this skill before making any visual changes to Flutter screens, widgets, themes, or accessibility features in the Cambridge Beer Festival app.

Frequently Asked Questions about ui-and-accessibility

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

FAQPage Schema
How do I prevent unintended visual regressions when modifying Flutter widgets?▼

Prevent visual regressions in Flutter by enforcing strict change scoping rules: one widget or screen per PR, separating restyle from restructure work, and deliberately updating golden files to keep diffs small and reviewable.

How do I make Flutter interactive elements WCAG 2.1 AA compliant for screen readers?▼

Make Flutter elements WCAG 2.1 AA compliant by applying verified state-aware semantics patterns for interactive elements like toggle buttons, filter chips, star ratings, and tappable cards to ensure screen reader compatibility.

What is the best way to scope a UI restyle task in a Flutter application?▼

The best way to scope a UI restyle task is to limit changes to a single widget or screen per pull request, reuse existing shared widgets instead of building duplicates, and avoid mixing visual restyling with structural restructuring.

Can I reuse existing Flutter widgets instead of building duplicate components?▼

You can reuse existing Flutter widgets by consulting a curated shared widget reuse table that maps available components, reducing maintenance burden and preventing duplicate code when adding features like status badges to cards.

Why do sweeping UI redesigns cause costly unreviewable pull requests in Flutter?▼

Sweeping UI redesigns cause costly unreviewable pull requests because large diffs obscure logic changes, break preserved screen invariants like loading guards, and bypass strict scoping rules needed for safe visual modifications.

Do I need to update golden files when fixing accessibility semantics in Flutter?▼

You need to update golden files deliberately when fixing accessibility semantics in Flutter to capture intentional visual changes, prevent unintended visual drift, and ensure the modifications remain reviewable and revertible.

Related Skills

Explore More Software Engineering Skills→
333-333-333333-333-333

flutter-widget-testing

Automate Flutter widget rendering, interaction, and accessibility validation tests.

Community
Intermediate
kiryteokiryteo
1

accessibility-review

Audits designs and code for WCAG 2.1 AA compliance.

Community
Intermediate
RoudranilRoudranil

flutter-dart-code-review

Review Flutter/Dart code against library-agnostic quality and architecture standards.

Community
Advanced
xxihxxih
1

flutter-dart-code-review

Inspect Flutter/Dart projects for quality, performance, and security issues via a comprehensive checklist.

Community
Intermediate