genui-helper

โดย flutter

ทักษะนี้มีเวิร์กโฟลว์และแนวปฏิบัติที่ดีที่สุดเฉพาะสำหรับพื้นที่เก็บข้อมูล genui

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.

Skills เพิ่มเติมจาก flutter

dart-modern-features
flutter
เพื่อหาผู้สมัครสำหรับการปรับปรุงให้ทันสมัย:
flutter-fix-layout-issues
flutter
แก้ไขข้อผิดพลาดการจัดวาง Flutter (โอเวอร์โฟลว์, ข้อจำกัดที่ไม่มีขอบเขต) โดยใช้เครื่องมือ Dart และ Flutter MCP ใช้เมื่อจัดการกับ "RenderFlex overflowed", "Vertical…
adding-release-notes
flutter
เพิ่มคำอธิบายการเปลี่ยนแปลงที่ผู้ใช้เห็นลงในบันทึกประจำรุ่นของ DevTools ใช้เมื่อบันทึกการปรับปรุง การแก้ไข หรือฟีเจอร์ใหม่ในไฟล์ NEXT_RELEASE_NOTES.md
reviewing-devtools-prs
flutter
เวิร์กโฟลว์การรีวิว PR เฉพาะคลังของ DevTools ที่บังคับใช้แนวทางสไตล์ของ DevTools และรูปแบบการรีวิวทั่วไป ใช้เมื่อรีวิว pull requests ใน...
dart-use-primary-constructors
flutter
ช่วยให้ผู้ใช้เขียนคอนสตรักเตอร์หลักใน Dart ที่ถูกต้องทั้งทางไวยากรณ์และความหมาย และย้าย/ใช้งานไวยากรณ์คอนสตรักเตอร์แบบใหม่ ไวยากรณ์เซมิโคลอนแบบไม่มีเนื้อหา…
code-documentation
flutter
คู่มือสำหรับการเขียนเอกสารประกอบโค้ดอย่างมีประสิทธิภาพ รวมถึง docstrings, JSDoc, dartdoc และคอมเมนต์การใช้งาน ใช้ทักษะนี้เมื่อเขียนโค้ดใหม่ เพิ่มเติม…
api-review
flutter
ตรวจสอบโค้ดที่ระบุเทียบกับแนวทาง API Design มาตรฐาน ใช้สกิลนี้เมื่อผู้ใช้ขอให้รีวิว API หรือตรวจสอบโค้ดตามแนวทาง API design…
flutter-accessibility
flutter
ใช้มาตรฐานการเข้าถึง WCAG 2 และ EN 301 549 รวมถึงเลย์เอาต์แบบปรับเปลี่ยนได้ในแอป Flutter บังคับใช้คำอธิบายเชิงความหมาย ขนาดเป้าหมายการแตะ (ขั้นต่ำ 48x48 dp) และอัตราส่วนความคมชัดของข้อความ (4.5:1 สำหรับข้อความขนาดเล็ก, 3:1 สำหรับข้อความขนาดใหญ่) บนแพลตฟอร์มมือถือ เว็บ และเดสก์ท็อป มีตรรกะการตัดสินใจสำหรับการเริ่มต้นความหมายบนเว็บ การห่อวิดเจ็ตแบบโต้ตอบ การสลับเลย์เอาต์ตามขนาดหน้าจอ และการจัดการอินพุตคีย์บอร์ด/เมาส์ รวมถึงการจัดการการนำทางโฟกัสผ่าน FocusTraversalGroup และ...