Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add sutchan/Agent-Skills-Hub --skill flutter-add-widget-previewgit clone --depth 1 https://github.com/sutchan/Agent-Skills-HubWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/sutchan/agent-skills-hub/flutter-add-widget-preview)<a href="https://agentmods.dev/skills/sutchan/agent-skills-hub/flutter-add-widget-preview"><img src="https://agentmods.dev/badge/skills/sutchan/agent-skills-hub/flutter-add-widget-preview/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/sutchan/agent-skills-hub/flutter-add-widget-preview"><img src="https://agentmods.dev/badge/skills/sutchan/agent-skills-hub/flutter-add-widget-preview.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00036 | $0.01324 |
| Opus 5 | $0.00018 | $0.00662 |
| Sonnet 5 | $0.00007 | $0.00265 |
| Haiku 4.5 | $0.00004 | $0.00132 |
Grade A, and why
flutter-add-widget-preview scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
91% identical to flutter-add-widget-preview — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 146 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Previewing Flutter Widgets
Contents
Preview Guidelines
Use the Flutter Widget Previewer to render widgets in real-time, isolated from the full application context.
- Target Elements: Apply the
@Previewannotation to top-level functions, static methods within a class, or public widget constructors/factories that have no required arguments and return aWidgetorWidgetBuilder. - Imports: Always import
package:flutter/widget_previews.dartto access the preview annotations. - Custom Annotations: Extend the
Previewclass to create custom annotations that inject common properties (e.g., themes, wrappers) across multiple widgets. - Multiple Configurations: Apply multiple
@Previewannotations to a single target to generate multiple preview instances. Alternatively, extendMultiPreviewto encapsulate common multi-preview configurations. - Runtime Transformations: Override the
transform()method in customPrevieworMultiPreviewclasses to modify preview configurations dynamically at runtime (e.g., generating names based on dynamic values, which is impossible in aconstcontext).
Handling Limitations
Adhere to the following constraints when authoring previewable widgets, as the Widget Previewer runs in a web environment:
- No Native APIs: Do not use native plugins or APIs from
dart:ioordart:ffi. Widgets with transitive dependencies ondart:ioordart:ffiwill throw exceptions upon invocation. Use conditional imports to mock or bypass these in preview mode. - Asset Paths: Use package-based paths for assets loaded via
dart:uifromAssetAPIs (e.g.,packages/my_package_name/assets/my_image.pnginstead ofassets/my_image.png). - Public Callbacks: Ensure all callback arguments provided to preview annotations are public and constant to satisfy code generation requirements.
- Constraints: Apply explicit constraints using the
sizeparameter in the@Previewannotation if your widget is unconstrained, as the previewer defaults to constraining them to approximately half the viewport.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- today Changed · -4 lines · +15 tokens per session 88cfeb7084e7
- 6d ago First seen · 150 lines · 21 tokens per session scan A 33119de8baba
flutter-add-widget-preview is a skill published in the GitHub repository sutchan/Agent-Skills-Hub (2 stars, last pushed yesterday), licensed MIT. It adds 36 tokens to every session and 1,324 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 91% identical to flutter-add-widget-preview, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
apple-ecosystem-expert
Expert guide for Apple Ecosystem development. Covers iOS support, Safari WebKit compatibility, PWAs (Progressive Web Apps) for iOS, and Human Interface Guidelines (HIG) for web and native apps / Panduan ahli pengembangan ekosistem Apple (iOS & Web).
compose-multiplatform-patterns
Patterns for building shared UI across Android, iOS, Desktop, and Web with Compose Multiplatform and Jetpack Compose — state hoisting with ViewModel/StateFlow, type-safe navigation, slot-based composables, recomposition performance, and expect/actual platform code. Use when writing or reviewing Compose UI, wiring a…
leanback-to-compose-tv-migration
Provides instructions and architectural patterns for migrating Android TV applications from legacy Leanback UI Toolkit, Android Views, or Support Fragments to Jetpack Compose for TV (androidx.tv). Use this skill for Leanback to Compose migrations, including browse screen, settings screen, authentication screen, login…
edge-to-edge
Use this skill to migrate your Jetpack Compose app to add adaptive edge-to-edge support and troubleshoot common issues. Use this skill to fix UI components (like buttons or lists) that are obscured by or overlapping with the navigation bar or status bar, fix IME insets, and fix system bar legibility.
migrate-xml-views-to-jetpack-compose
Provides a structured workflow for migrating an Android XML View to Jetpack Compose. This skill details the step-by-step process, from planning and dependency setup, to theming and layout migration, validation and XML cleanup. Use this skill when you need to migrate an XML View to Jetpack Compose in an Android…
animated-sketch-diagram
A tool for making animated diagrams and flowcharts in a hand-drawn ink style, with paper-like backgrounds, simple icons, and moving dots along connections. It produces a self-contained HTML file and can also create a looping GIF.