genui-helper

This skill provides workflows and best practices specific to the genui repository.

npx skills add https://github.com/flutter/genui --skill genui-helper

GenUI Development Helper

This skill provides workflows and best practices specific to the genui repository.

Workflows

1. Running Tests and Fixes

The repository uses a custom tool to run tests, apply fixes, and format code before committing. It should typically only be run before committing, since it is inefficient and slow to run it on every change.

It will run dart fix --apply, dart format, and flutter test on all packages in the repository.

Command:

dart run tool/test_and_fix/bin/test_and_fix.dart

When to use:

  • Before committing changes, to ensure project health.
  • Instead of running flutter test manually for each project in the repo.

2. Creating a New Component in the genui package

When creating a new UI component in genui:

  1. Location: Place component files in packages/genui/lib/src/components/.
  2. Inheritance: Components must extend UiComponent.
  3. A2UI Compliance: Ensure the component matches the A2UI specification.
  4. Documentation: Follow strict Dart documentation standards.

3. Updating Documentation

  • Documentation source of truth is in docs/.
  • Use mkdocs context if mentioned, but primarily edit the markdown files directly.
  • Ensure strict adherence to "Natural Writing" standards (no AI-isms).

Key Constants & Patterns

  • Current A2UI Version: v0.9
  • State Management: Uses SurfaceController from genui.

References

Code visibility

Make every code element as private as it can be. If tests need access, use the language's test-visibility mechanism instead of making it public. For example, in Dart, keep the _ prefix and annotate with @visibleForTesting.

More skills from flutter

dart-modern-features
flutter
To find candidates for modernization:
flutter-fix-layout-issues
flutter
Fixes Flutter layout errors (overflows, unbounded constraints) using Dart and Flutter MCP tools. Use when addressing "RenderFlex overflowed", "Vertical…
adding-release-notes
flutter
Adds user-facing change descriptions to DevTools release notes. Use when documenting improvements, fixes, or new features in the NEXT_RELEASE_NOTES.md file.
reviewing-devtools-prs
flutter
DevTools repository-specific PR review workflow enforcing DevTools style guidelines and common review patterns. Use when reviewing pull requests in the…
dart-use-primary-constructors
flutter
Help users write syntactically and semantically correct primary constructors in Dart, and migrate/use the new constructor syntax, empty-body semicolon syntax,…
code-documentation
flutter
Guide for writing effective code documentation, including docstrings, JSDoc, dartdoc, and implementation comments. Use this skill when writing new code, adding…
api-review
flutter
Reviews the specified code against the canonical API Design guidelines. Use this skill when the user asks for an API review or to check code against API design…
flutter-accessibility
flutter
Implement WCAG 2 and EN 301 549 accessibility standards and adaptive layouts in Flutter apps. Enforces semantic annotations, tap target sizes (48x48 dp minimum), and text contrast ratios (4.5:1 for small text, 3:1 for large) across mobile, web, and desktop platforms Provides decision logic for web semantics initialization, interactive widget wrapping, screen-size-based layout switching, and keyboard/mouse input handling Includes focus traversal management via FocusTraversalGroup and...