How do I install the Flutter Accessibility Validator skill?

Run npx skillmds@latest add tomevault-io/flutter-accessibility-validator in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Flutter Accessibility Validator safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Flutter Accessibility Validator?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Flutter Accessibility Validator free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Flutter Accessibility Validator?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Flutter Accessibility Validator by tomevault-io

Name: Flutter Accessibility Validator
Author: tomevault-io

Flutter Accessibility Validator

Use when creating or modifying Flutter UI components, screens, or widgets, or when the user asks about accessibility, screen reader support, VoiceOver, TalkBack, touch targets, color contrast, or WCAG compliance in a Flutter app.

tomevault-io dd9dac5 2 files · 2.7 KB Updated Sep 17, 2026

File contents

Accessibility Skill

Semantic Labels

// Icons & buttons
Semantics(label: 'Settings', button: true, child: Icon(Icons.settings))

// Images (or ExcludeSemantics if decorative)
Semantics(label: 'Profile picture', image: true, child: Image.network(url))

// Interactive (prefer InkWell over GestureDetector)
Semantics(button: true, label: 'Open', child: InkWell(...))

Dynamic Announcements

import 'package:flutter/semantics.dart';
SemanticsService.announce('Button unlocked!', TextDirection.ltr);

Touch Targets & Forms

// Minimum 48x48 dp
IconButton(iconSize: 48, ...)

// Forms need labels
TextField(decoration: InputDecoration(
  labelText: 'Email',
  errorText: isValid ? null : 'Invalid',
))

Color Contrast

// Use ColorPalette (WCAG-compliant)
Text('Text', style: TextStyle(
  color: ColorPalette.coloursBasicText.platformBrightnessColor(context),
))

Focus Management

FocusTraversalGroup(
  policy: OrderedTraversalPolicy(),
  child: Column(children: [
    FocusTraversalOrder(order: NumericFocusOrder(1), child: TextField(...)),
    FocusTraversalOrder(order: NumericFocusOrder(2), child: Button(...)),
  ]),
)

Testing

// Automated
await expectLater(tester, meetsGuideline(textContrastGuideline));
await expectLater(tester, meetsGuideline(androidTapTargetGuideline));

Checklist

Semantic labels on interactive elements
Touch targets ≥ 48x48 dp
Contrast ≥ 4.5:1 (text), 3:1 (UI)
Forms have labels + errors
Dynamic changes announced
Logical focus order
Tested with VoiceOver + TalkBack

Source: Desquared/agents-rules-skills — distributed by TomeVault.

---name: flutter-accessibility-validatordescription: Use when creating or modifying Flutter UI components, screens, or widgets, or when the user asks about accessibility, screen reader support, VoiceOver, TalkBack, touch targets, color contrast, or WCAG compliance in a Flutter app.---# Accessibility Skill## Semantic Labels```dart// Icons & buttonsSemantics(label: 'Settings', button: true, child: Icon(Icons.settings))// Images (or ExcludeSemantics if decorative)Semantics(label: 'Profile picture', image: true, child: Image.network(url))// Interactive (prefer InkWell over GestureDetector)Semantics(button: true, label: 'Open', child: InkWell(...))```## Dynamic Announcements```dartimport 'package:flutter/semantics.dart';SemanticsService.announce('Button unlocked!', TextDirection.ltr);```## Touch Targets & Forms```dart// Minimum 48x48 dpIconButton(iconSize: 48, ...)// Forms need labelsTextField(decoration: InputDecoration( labelText: 'Email', errorText: isValid ? null : 'Invalid',))```## Color Contrast```dart// Use ColorPalette (WCAG-compliant)Text('Text', style: TextStyle( color: ColorPalette.coloursBasicText.platformBrightnessColor(context),))```## Focus Management```dartFocusTraversalGroup( policy: OrderedTraversalPolicy(), child: Column(children: [ FocusTraversalOrder(order: NumericFocusOrder(1), child: TextField(...)), FocusTraversalOrder(order: NumericFocusOrder(2), child: Button(...)), ]),)```## Testing```dart// Automatedawait expectLater(tester, meetsGuideline(textContrastGuideline));await expectLater(tester, meetsGuideline(androidTapTargetGuideline));```## Checklist- [ ] Semantic labels on interactive elements- [ ] Touch targets ≥ 48x48 dp- [ ] Contrast ≥ 4.5:1 (text), 3:1 (UI)- [ ] Forms have labels + errors- [ ] Dynamic changes announced- [ ] Logical focus order- [ ] Tested with VoiceOver + TalkBack---> Source: [Desquared/agents-rules-skills](https://github.com/Desquared/agents-rules-skills) — distributed by [TomeVault](https://tomevault.io).

Frequently asked questions