From flutter-skills
Configures a Flutter app to support assistive technologies like Screen Readers. Use when ensuring an application is usable for people with disabilities.
npx claudepluginhub gsmlg-dev/code-agent --plugin flutter-skillsThis skill uses the workspace's default tool permissions.
- [UI Design and Styling](#ui-design-and-styling)
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides MCP server integration in Claude Code plugins via .mcp.json or plugin.json configs for stdio, SSE, HTTP types, enabling external services as tools.
Design layouts to accommodate dynamic scaling and high visibility. Flutter automatically calculates font sizes based on OS-level accessibility settings.
Utilize Flutter's catalog of accessibility widgets to manipulate the semantics tree exposed to assistive technologies (like TalkBack or VoiceOver).
Semantics: Use this to annotate the widget tree with a description of the meaning of the widgets. Assign specific roles using the SemanticsRole enum (e.g., button, link, heading) when building custom components.MergeSemantics: Wrap composite widgets to merge the semantics of all descendants into a single selectable node for screen readers.ExcludeSemantics: Use this to drop the semantics of all descendants, hiding redundant or purely decorative sub-widgets from accessibility tools.Flutter web renders UI on a single canvas, requiring a specialized DOM layer to expose structure to browsers.
aria-label="Enable accessibility").TabBar, MenuAnchor, Table) for automatic ARIA role mapping. For custom components, explicitly assign SemanticsRole values to ensure screen readers interpret the elements correctly.Differentiate between adaptive and responsive paradigms to build universal applications.
Copy this checklist to track accessibility compliance during UI development:
Semantics and assign the appropriate SemanticsRole.MergeSemantics to prevent screen reader fatigue.ExcludeSemantics.Run this loop when finalizing a view or component:
Semantics, adjust constraints, or modify colors. Repeat until the screen reader provides a clear, logical traversal of the UI.If targeting web and requiring accessibility by default, initialize the semantics binding before running the app.
import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';
import 'package:flutter/foundation.dart';
void main() {
if (kIsWeb) {
SemanticsBinding.instance.ensureSemantics();
}
runApp(const MyApp());
}
If building a custom widget that acts as a list item, explicitly define its semantic role so assistive technologies and web ARIA mappings interpret it correctly.
import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';
class CustomListItem extends StatelessWidget {
final String text;
const CustomListItem({super.key, required this.text});
@override
Widget build(BuildContext context) {
return Semantics(
role: SemanticsRole.listItem,
label: text,
child: Padding(
padding: const EdgeInsets.all(12.0), // Ensures > 48px tap target if interactive
child: Text(
text,
style: const TextStyle(fontSize: 16), // Ensure contrast ratio > 4.5:1
),
),
);
}
}