SkillAtlasSkill 详情

accessibility

36 Flutter and Dart skills your coding agent loads by itself, sourced only from official documen...

审核状态:已审核Quality 80Security 88

复制安装命令

用 Codex 或 Claude 安装复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它先审查 Skill 页面再帮你安装。

复制前请先查看来源、License 和安全提示。

项目 README

来源文件:README.md

抓取于 2026年8月29日

Flutter AI Skills for Claude Code, Codex, Cursor, Antigravity, and Other AI Coding Agents

An agent prompt reading "Add Google sign-in to the profile screen" on the left; on the right, the firebase-auth and flutter-app-architecture skills are auto-selected from a list of dozens

36 Flutter and Dart skills your coding agent loads by itself, sourced only from official documentation.

A skill is a folder with a SKILL.md file. Your agent reads the description, decides a task matches, and pulls in the guidance — you don't paste anything into a rules file or remember to @-mention a doc. Install once, and Firebase Auth guidance shows up when you touch auth, Riverpod guidance when you touch providers.

A comprehensive, (almost) non-opinionated collection: everything here is derived from official Flutter, Dart, Firebase, and package documentation. No personal preferences, no invented conventions.

⚡ Quick start

npx skills add evanca/flutter-ai-rules

That's it. The Skills CLI discovers the packages under skills/ and installs them for supported agents. It needs Node 22.20 or newer — on older versions it exits with SyntaxError: ... does not provide an export named 'styleText' before it does anything. Every other install route below works on any Node version, or none at all.

Browse before installing, or take just one:

npx skills add evanca/flutter-ai-rules --list
npx skills add evanca/flutter-ai-rules --skill flutter-best-practices

Install as a plugin

This repo is also a plugin marketplace, so agents that support plugins can install the whole set and keep it updated in place. The manifests live at .claude-plugin/, .codex-plugin/, .cursor-plugin/, .agents/plugins/, and plugin.json — all pointing at the same skills/ directory.

Claude Code — plugin marketplaces:

/plugin marketplace add evanca/flutter-ai-rules
/plugin install flutter-ai-skills@flutter-ai-rules

Skills then load as flutter-ai-skills:bloc, flutter-ai-skills:riverpod, and so on.

Codex — plugins:

codex plugin marketplace add evanca/flutter-ai-rules
codex plugin install flutter-ai-skills@flutter-ai-rules

Cursor — plugins: in Cursor, run /add-plugin, or add the repo as a team marketplace under Dashboard → Settings → Plugins → Import from Repo:

https://github.com/evanca/flutter-ai-rules

Antigravity — plugins:

git clone --depth 1 https://github.com/evanca/flutter-ai-rules.git
agy plugin install ./flutter-ai-rules

Windsurf / Devin has no plugin manifest, but Cascade already scans .agents/skills/ and ~/.agents/skills/, so the manual copy below is the install path. GitHub Copilot doesn't read SKILL.md at all — see Rules and combined sets for what to use instead.

Prefer to do it by hand? Copy or symlink any skill folder into your agent's skills directory — .claude/skills/, .cursor/skills/, .codex/skills/, .agents/skills/ (Antigravity, Codex, Windsurf), .windsurf/skills/. Or vendor the whole set into your project:

git clone --depth 1 https://github.com/evanca/flutter-ai-rules.git temp_repo && mkdir -p .skills && cp -r temp_repo/skills/* .skills && rm -rf temp_repo

With a .skills/ folder you can also reference a skill explicitly when you want it: "Read @.skills/bloc/SKILL.md and create test coverage for the new methods."

🧠 What's in the box

Flutter and Dart foundations

SkillLoads when you're…
flutter-best-practicesWriting, reviewing, or planning Flutter code
effective-dartWriting Dart, naming things, adding doc comments
dart-3-updatesUsing records, patterns, sealed classes, switch expressions
flutter-app-architectureScaffolding a project or refactoring into layers
architecture-feature-firstDesigning folder structure for a new feature
flutter-errorsHitting RenderFlex overflows, unbounded constraints, layout errors
flutter-use-column-row-firstBuilding responsive layouts with Row, Column, Expanded, Flexible
flutter-pre-cachingPreloading fonts, images, animations, or config

State management

SkillLoads when you're…
blocCreating a Cubit or Bloc, modeling state, wiring providers
riverpodSetting up providers, combining requests, managing disposal
providerConsuming state, optimizing rebuilds, using ProxyProvider
flutter-change-notifierSetting up ChangeNotifier models and consuming them

Testing and review

SkillLoads when you're…
testingWriting unit, widget, or golden tests; fixing flaky tests
mockitoGenerating mocks, stubbing, verifying interactions
mocktailMocking without codegen, registering fallback values
patrol-e2e-testingWriting E2E tests that touch native permissions or dialogs
code-reviewReviewing a PR, branch, or diff

Firebase

SkillLoads when you're…
flutterfire-configureAdding Firebase to a project, running flutterfire configure
firebase-authSetting up auth, managing auth state, social sign-in
firebase-cloud-firestoreDesigning schemas, CRUD, listeners, pagination
firebase-databaseSyncing real-time data, structuring JSON trees
firebase-storageUploading and downloading files, managing metadata
firebase-analyticsLogging events, setting user properties
firebase-crashlyticsCapturing fatal and non-fatal errors
firebase-messagingSetting up FCM, handling background messages
firebase-in-app-messagingRunning in-app campaigns
firebase-remote-configImplementing feature flags or A/B tests
firebase-app-checkConfiguring attestation and debug tokens
firebase-cloud-functionsCalling callable functions, handling errors
firebase-aiGenerating text or chat with Gemini via firebase_ai
generate-images-with-firebase-aiGenerating or editing images with a Gemini image model (Nano Banana)
firebase-data-connectWriting GraphQL queries against Data Connect

Shipping and product

SkillLoads when you're…
accessibilityWorking on a11y, WCAG, screen readers, focus order
inclusive-designHandling i18n, global name/address forms, low-end devices
store-listing-assetsWriting store copy to character limits
revenuecat-testingTesting purchases, subscriptions, sandbox flows
developing-genkit-dartBuilding AI agents in Dart with Genkit

🗂️ Rules and combined sets (legacy)

Before skills existed, this repo shipped rule files you pasted into a config, plus pre-merged bundles squeezed under Windsurf's character cap. Both still work and both are still updated, but skills are the recommended path — they load contextually instead of consuming your context window on every request.

Reach for these only if your tool has no skills support, or you want one static file you fully control:

  • rules/ — six broad foundation files: effective_dart.md, flutter_app_architecture.md, flutter_errors.md, dart_3_updates.md, testing.md, code_review.md. Drop them in your project and reference them by name: "Read @rules/effective_dart.md and follow its conventions." Package-specific guidance (Bloc, Riverpod, Firebase, Mockito…) is skills-only now.
  • combined/ — seven topic bundles, each in a full and an __under_6K variant. Paste one into your global or local rules config and you're done. The trimmed variants stay under 6,000 characters to fit Windsurf's global_rules.md hard limit.

GitHub Copilot lives here rather than in the skills section, because it has no SKILL.md support. Three options, in the order Copilot documents them:

  • Copy a combined/ bundle to .github/copilot-instructions.md for repo-wide guidance.
  • Copy rules/ files into .github/instructions/ as <name>.instructions.md, each with applyTo: "**/*.dart" frontmatter, so they only load for Dart files.
  • Copilot also reads a root AGENTS.md, so a bundle pasted there works for Copilot, Codex, and Antigravity at once.

📏 Recommended file sizes by tool

Size guidance from each tool's own official documentation, for rule/instruction files and for SKILL.md files (accessed 2026-07-11).

ToolRule file — recommended sizeSKILL.md — recommended size
Claude CodeCLAUDE.md: under 200 lines (soft)Under 500 lines (soft); description 1,536 chars (hard)
Cursor.mdc rule: under 500 lines (soft)No numeric limit — "keep focused, move detail to separate files"
OpenAI CodexAGENTS.md: no limit statedSkill bundle: zip ≤ 50 MB, uncompressed file ≤ 25 MB, ≤ 500 files/version (no per-SKILL.md text limit)
Google Antigravityrule file: 12,000 chars each (hard)No numeric limit stated
Windsurfglobal_rules.md: 6,000 chars; .windsurf/rules/*.md: 12,000 chars/file (hard)No numeric limit — "keeps your context window lean"
GitHub Copilotcopilot-instructions.md: ≤ 2 pages (soft, approx.)Not supported — no repo-level SKILL.md

Notes:

  • Hard = enforced/truncated at the limit; soft = a documented quality recommendation.
  • Only Claude Code publishes a numeric SKILL.md length recommendation (under 500 lines). Cursor, Windsurf, and Antigravity just say "keep it focused/lean" with no figure; OpenAI documents skill-bundle limits (50 MB zip / 25 MB per file / 500 files) rather than a text length; and GitHub Copilot has no repo-level SKILL.md — it uses copilot-instructions.md plus path-specific *.instructions.md (no size limit stated for the latter).
  • Claude Code loads CLAUDE.md in full regardless of length, but notes files over 200 lines "consume more context and reduce adherence"; its auto-memory MEMORY.md loads only the "first 200 lines or 25KB, whichever comes first."
  • Windsurf is still named Windsurf; its docs are served through Cognition (docs.windsurf.com → docs.devin.ai) and reference .windsurf/rules and .windsurf/skills.
  • This repo keeps the combined/ sets under 6,000 characters to satisfy the strictest hard limit above (Windsurf global_rules.md).

Official sources: Claude Code — memory · skills | Cursor — rules · skills | OpenAI Codex — AGENTS.md · skills | Google Antigravity — rules · skills | Windsurf — rules & skills | GitHub Copilot — instructions

📌 No opinions, just documentation

Every skill is sourced from official documentation — no personal preferences or subjective interpretations. That's intentional. You're free to alter them to taste, but this repo stays objective by sticking to the source.

One consequence worth knowing: skills can contradict each other, because their sources do. If one package recommends a folder layout and another recommends a different one, you'll see both.

Content is re-fetched from upstream docs on a schedule, so skills track the official guidance as it changes rather than freezing at whatever was true when they were written.

🛠️ Contributing

Contributions are welcome:

  1. Fork this repository.
  2. Add or modify a skill in skills/, or a rule in rules/.
  3. Open a pull request explaining the change.

Include an official documentation link for anything you add or change. That's the one hard requirement — it's what keeps the repo objective and reviewable. If your source isn't already listed in ATTRIBUTION.md, add it there with its license — and if that license isn't a permissive one, restate the guidance instead of quoting it.

📚 Sources

Official documentation these skills are built from:

Flutter — App Architecture · Common Errors · Simple State Management

Dart — Effective Dart · Language tour · Records · Patterns · Pattern types · Branches

State management — Bloc · Riverpod · Provider

Testing — Mockito · Mocktail · Patrol

Firebase — Firebase for Flutter · FlutterFire · Multiple flavors with the FlutterFire CLI

📄 License

MIT — for this repository's own content: the choice of topics, the trigger descriptions, and the wording and structure of every skill.

The underlying documentation keeps its own terms. Most of it is CC BY 4.0 (Flutter, Dart, Firebase), with code samples under BSD-3 or Apache 2.0, package READMEs under MIT or Apache 2.0, and a few sources — Apple, Google Play, RevenueCat — that aren't openly licensed and are therefore restated as fact rather than copied. ATTRIBUTION.md maps every source to its license and to the skills built on it.

If you redistribute this repo or lift a single skill out of it, keep the source links — that's what the CC BY attribution requirement actually asks for.

其他

中风险

  • 来源需自行核对维护者身份。
  • 未检测到明显脚本安装指令。
  • 未检测到明显外部权限要求。
  • 未检测到高风险命令。
  • 扫描发现:2 条。

Codex — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/evanca/flutter-ai-rules.git
  3. 将 "skills/accessibility" 文件夹复制到 Codex 的 skills 目录中。
  4. 重启 Codex 让新的 skill 生效。

Codex — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Codex 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Codex 让新的 skill 生效。

Claude Code — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/evanca/flutter-ai-rules.git
  3. 将 "skills/accessibility" 文件夹复制到 Claude Code 的 skills 目录中。
  4. 重启 Claude Code 让新的 skill 生效。

Claude Code — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Claude Code 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Claude Code 让新的 skill 生效。

Cursor — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/evanca/flutter-ai-rules.git
  3. 将 "skills/accessibility" 文件夹复制到 Cursor 的 skills 目录中。
  4. 重启 Cursor 让新的 skill 生效。

Cursor — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Cursor 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Cursor 让新的 skill 生效。

GitHub Copilot — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/evanca/flutter-ai-rules.git
  3. 将 "skills/accessibility" 文件夹复制到 GitHub Copilot 的 skills 目录中。
  4. 重启 GitHub Copilot 让新的 skill 生效。

GitHub Copilot — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 GitHub Copilot 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 GitHub Copilot 让新的 skill 生效。

Windsurf — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/evanca/flutter-ai-rules.git
  3. 将 "skills/accessibility" 文件夹复制到 Windsurf 的 skills 目录中。
  4. 重启 Windsurf 让新的 skill 生效。

Windsurf — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Windsurf 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Windsurf 让新的 skill 生效。
查看 SKILL.md 原文
name: accessibility
description: "Use when working on accessibility, a11y, WCAG, ARIA, screen readers, keyboard nav, focus order, contrast, alt text, captions, reduced motion, or target sizes; not language/culture/device (see inclusive-design)."
license: MIT

Accessibility

Accessibility answers one question:

Can someone use this with assistive tools, a different input method, or a different ability?

It is specifically about people with disabilities being able to perceive, understand, navigate, and interact with a product on equal terms — whether they use a screen reader, only a keyboard, a switch, voice control, magnification, or captions. This is the ability half of designing for everyone. The context half — language, culture, device, affordability, confidence — belongs to the sibling inclusive-design skill. They overlap but have different focuses; keep them distinct so neither gets diluted.

When to use

Use this skill when the task involves any of: WCAG conformance, ARIA, semantic markup, screen-reader support, keyboard/focus management, color contrast, text alternatives (alt text, captions, transcripts), accessible forms and error messages, target sizes, timing/timeouts, motion sensitivity, or cognitive accessibility. Also use it whenever someone asks to "make this accessible," run an a11y audit, or check whether a disabled user can complete a task.

When not to use it: if the real concern is who gets left out by context — non-English speakers, people on cheap phones or slow networks, people who can't afford data, first-time or anxious users, or global name/address formats — that is inclusion, not accessibility. Switch to the inclusive-design skill.

The mental model: POUR

WCAG organizes all of accessibility under four principles. Use them as your audit lens — every issue you find maps to one of them.

  • Perceivable — users can sense the content through some channel. Don't rely on one sense alone. (Text alternatives for images, captions/transcripts for audio and video, sufficient color contrast, not using color alone to convey meaning, content that reflows and survives zoom.)
  • Operable — users can drive the interface with whatever input they have. (Everything reachable and usable by keyboard, visible focus, no keyboard traps, adequate target sizes, generous or adjustable time limits, nothing that flashes in a seizure-inducing way.)
  • Understandable — users can predict and comprehend behavior. (Clear labels, instructions, and error messages; consistent navigation; predictable interactions; readable language.)
  • Robust — assistive tech can actually parse it. (Valid semantic structure; correct name/role/value on every control; native semantics first, ARIA only to fill gaps.)

A useful test for any element: if I could not see it, hear it, use a mouse, or read quickly — could I still complete this task? If the answer is no under any of those, you've found the principle that's failing.

Who and what you are designing for

Design for the assistive tools and input methods people actually use, not an abstract "disabled user":

  • Screen readers (VoiceOver, TalkBack, NVDA, JAWS) — need correct semantics, reading order, labels, and announcements of dynamic changes.
  • Keyboard-only and switch users — need a logical focus order, visible focus, and no mouse-only interactions.
  • Voice control — needs visible, speakable labels that match the accessible name.
  • Screen magnification and zoom — needs layouts that reflow without horizontal scrolling or clipping at 200%+.
  • Captions / transcripts users — Deaf and hard-of-hearing users, and anyone in a loud or silent environment.
  • People with cognitive and learning disabilities — need clear language, low memory load, and forgiving flows (see below).

Note the recurring pattern: most of these help far more people than the group they target — the same insight that drives inclusive design.

Fast audit checklist

Walk these in order; each line is a concrete thing to check or fix.

  1. Keyboard — Tab through the whole flow. Is every control reachable and operable? Is focus visible? Is the order logical? Can you get trapped?
  2. Screen reader — Does every control announce a meaningful name and role? Are images given text alternatives (or marked decorative)? Are dynamic updates (errors, loading, toasts) announced?
  3. Contrast & color — Does text meet contrast minimums (4.5:1 body, 3:1 large)? Is any meaning carried by color alone (e.g., red = error with no icon/text)?
  4. Structure — Are headings, lists, landmarks/regions, and labels semantic rather than visual-only? Does reading order match visual order?
  5. Forms & errors — Is every field labeled (not placeholder-only)? Are errors identified in text, tied to their field, and explained with how to fix?
  6. Targets & timing — Are tap targets large enough and spaced? Are time limits absent, generous, or adjustable? Is autosave used to prevent data loss?
  7. Media & motion — Captions/transcripts for audio/video? Does the UI honor reduced-motion preferences? Nothing flashing more than ~3×/second?
  8. Zoom/reflow — At 200% zoom (or large system font), does content reflow without clipping or horizontal scroll?

Beyond conformance: cognitive accessibility

WCAG alone does not cover everything people with cognitive and learning disabilities (dyslexia, ADHD, autism, dementia, aphasia, memory or attention differences) need. The W3C COGA guidance is supplemental, not required for WCAG conformance, and it is where the highest-leverage improvements for the largest hidden population usually live: clear language, consistent design, single-step instructions, not relying on memory, forgiving error recovery, and minimizing distraction.

Read references/cognitive-accessibility.md for COGA's eight objectives and their concrete design patterns when the task touches readability, complex flows, forms, logins, or "this is confusing/overwhelming."

Motion, sensory, and age-related needs

Animation and motion can cause real harm (nausea, dizziness, loss of focus) for people with vestibular disorders, and seizures for people with photosensitivity. Honor the user's prefers-reduced-motion setting — reduce or replace motion rather than removing all feedback.

Older users are a large group whose age-related changes in vision, dexterity, hearing, and memory overlap directly with disability needs — designing well here helps everyone age into your product. (Treat age as a context/identity dimension — first-time confidence, life stage — in the inclusive-design skill; treat age-related ability change here.)

Read references/motion-and-sensory.md for prefers-reduced-motion patterns (with code), photosensitivity limits, and the older-user ability overlap.

How to verify

Automated checkers (axe, Lighthouse, Accessibility Scanner, etc.) catch maybe a third of issues — necessary but never sufficient. Always add manual checks: navigate the real flow with the keyboard only, then again with a screen reader, then with the OS reduced-motion and large-text settings on. The bug a tool can't catch — a focus order that makes no sense, a label that lies — is usually the one that actually blocks someone.

References

Load these only when the task calls for the depth:

Primary sources:

发现问题?提交给管理员复核

评分:

评论 (0)

暂无评论,成为第一个评论者吧!