SkillsAdd

yakoub-ai/flutterforge · Archived

flutter-accessibility

>- Audit and improve accessibility in Flutter apps. Use when the user wants to check WCAG compliance, add semantic labels, verify screen reader support, or review tap target sizes and text scaling behavior. Trigger phrases: "check accessibility Flutter", "add semantic labels", "a11y Flutter", "screen reader Flutter", "accessibility audit", "TalkBack Flutter", "VoiceOver Flutter", "WCAG Flutter", "semantic widgets Flutter", "focus order Flutter", "text scaling Flutter", "accessible Flutter app".

First seen May 18, 2026

Installation

$ npx skills add yakoub-ai/flutterforge --skill flutter-accessibility
View on skills.sh ↗ GitHub repository ↗

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

flutter-api-integration Same source · more installs
yakoub-ai/flutterforge

>- Implement API, backend, and data layer integrations in Flutter. Use when the user wants to c…

5 installs
flutter-ux-design Same source · more installs
yakoub-ai/flutterforge

>- Use this skill when the user wants to design the UX, plan screens, define navigation flows, …

3 installs
flutter-state-management Same source · more installs
yakoub-ai/flutterforge

>- Use this skill when the user wants to choose, design, or implement state management in a Flu…

3 installs
flutter-security Same source · more installs
yakoub-ai/flutterforge

>- Audit and harden security in Flutter apps. Use when the user wants a security review, secret…

3 installs

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

flutter-improving-accessibility Similar name
flutter/agent-plugins

Configures a Flutter app to support assistive technologies like Screen Readers. Use when ensuri…

8.5K installs
accessibility-review Similar name
anthropics/knowledge-work-plugins

Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", …

3.4K installs
accessibility Similar name
microsoft/vscode

Primary accessibility skill for VS Code. REQUIRED for new feature and contribution work, and al…

2.8K installs
flutter-accessibility-audit Similar name
flutter/agent-plugins

Triggers an accessibility scan through the widget_inspector and automatically adds Semantics wi…

1.5K installs
webflow-mcp:accessibility-audit Similar name
webflow/webflow-skills

Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, link…

706 installs
accessibility Similar name
addyosmani/web-quality-skills

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve a…

51.2K installs

Also in this package

Other skills from yakoub-ai/flutterforge · top by installs.

npx skills add yakoub-ai/flutterforge
flutter-api-integration 5 flutter-ux-design 3 flutter-state-management 3 flutter-security 3 flutter-performance 3 flutter-debugging 3 flutter-testing 2 flutter-release-readiness 2 flutter-product-brief 2 flutter-feature-dev 2

Browse all from yakoub-ai/flutterforge

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Also listed on

Alternate registries and mirrors of this skill.

Repository health

License LICENSE
Default branch main
Open issues 0
Status Archived

Skill metadata

Parsed from SKILL.md frontmatter.

Version1.0.0

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 4,537 B
  • docs SUMMARY.md 525 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 2 installs

SKILL.md

Flutter Accessibility

Audit and improve accessibility in Flutter apps. Target: WCAG 2.1 AA, full TalkBack (Android) and VoiceOver (iOS) support, comfortable usability at 2x text scale.

Workflow

  1. Discover the app surface — list all screens, interactive elements, and images.
  2. Audit each screen against the checklist below, one screen at a time.
  3. Identify findings — severity: blocker / high / medium / low.
  4. Implement fixes with the ux-mobile-designer agent for UI changes.
  5. Verify with device testing — test with TalkBack on Android, VoiceOver on iOS.
  6. Write docs/quality/accessibility_review.md with findings and fix status.

Accessibility Checklist (per screen)

Color and Contrast

  • Body text: ≥ 4.5:1 contrast ratio against background
  • Large text (18pt+ / 14pt+ bold): ≥ 3:1 contrast ratio
  • UI component boundaries (buttons, inputs): ≥ 3:1 contrast ratio
  • Information is not conveyed by color alone — always a secondary indicator (icon, text, pattern)

Touch Targets

  • All interactive elements ≥ 48×48 dp (WCAG) — prefer 56×56 dp minimum
  • Minimum 8 dp gap between adjacent tap targets
  • Gesture alternatives provided for complex gestures (swipe to delete → button fallback)

Text and Layout

  • UI does not overflow or clip at 1.3x text scale
  • All text uses TextTheme / relative font sizes — no hardcoded fontSize in px without TextScaler handling
  • Single-axis scroll (never two-dimensional scroll) for main content

Screen Reader (TalkBack / VoiceOver)

  • Every Image has semanticLabel or is marked excludeFromSemantics: true (decorative)
  • Every Icon used as action has tooltip or wrapped in Semantics(label: ...)
  • Form fields: TextField has decoration.label or Semantics(label: ...)
  • Buttons: meaningful label (not "icon button") — avoid IconButton without tooltip
  • ExcludeSemantics on decorative widgets that would add noise
  • MergeSemantics on groups that should read as one unit (e.g., rating stars)
  • Custom interactive widgets use Semantics(button: true, onTap: ...) or GestureDetector wrapped in Semantics

Focus and Navigation

  • Focus order follows visual reading order (top-to-bottom, left-to-right)
  • Dialogs and bottom sheets trap focus correctly — focus returns on dismiss
  • No keyboard focus traps (web/desktop targets)

Error Messages

  • Error messages are descriptive — not just "Invalid input" — say what's wrong
  • Error messages are associated with the field via Semantics or errorText

Required UI States (per screen)

Every screen must implement these states — each needs semantic support:

State Accessibility requirement
Loading CircularProgressIndicator has Semantics(label: 'Loading...')
Empty EmptyStateView has readable label, not just an icon
Error Error message is readable; retry button labeled clearly
Success State change announced via SemanticsService.announce() when needed
Offline Banner readable by screen reader with actionable label

Common Fixes

Issue Fix
IconButton no label Add tooltip: 'Action name'
Image no label Add semanticLabel: 'Description' or excludeSemantics: true
Text overflow at 1.3x Use Flexible/Expanded, remove maxLines constraints, test with MediaQuery.textScalerOf
Tap target too small Wrap in SizedBox(width: 48, height: 48) + Center()
Decoration-only icon read aloud Wrap in ExcludeSemantics(child: Icon(...))

Output Artifacts

  • docs/quality/accessibility_review.md — per-screen findings with severity and fix status

Cross-references

  • Agent: ux-mobile-designer (implementation pass for UI fixes)
  • Command: /flutterforge:flutter-accessibility invokes this skill directly