flutter-add-widget-preview Skill for Claude: What It Does and How to Install It

Makes Claude add @Preview annotations to Flutter widgets so you can see them in the Widget Previewer, in many states at once.

Installs: 37.8K; on skills.sh
Stars: 3.1K; on GitHub
Updated: Nov 2026; last repo commit

This is the Flutter team's skill for the Flutter Widget Previewer. Claude adds @Preview to a top-level function, static method or no-argument widget constructor and sets options such as name, group, size, text scale, theme and brightness.

It also knows the previewer's limits. Previews run in a web environment, so widgets that depend on dart:io or dart:ffi fail unless you mock them.

Good for

Flutter developers building UI components in isolation
Design-minded teams checking light, dark and large-text states
Anyone who wants preview setups shared across many widgets

Install flutter-add-widget-preview

Claude Code

Copy this prompt.

Install the flutter-add-widget-preview skill in Claude Code. Run this command:

npx skills add https://github.com/flutter/agent-plugins --skill flutter-add-widget-preview

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.

Sections in SKILL.md

Contents
Preview Guidelines
Preview Parameters
Handling Limitations
Workflows
Creating a Widget Preview
Interacting with Previews
Examples
Basic Preview
Custom Preview with PreviewThemeData and Transformation
MultiPreview Implementation

Key facts

Author: Flutter team
License: BSD-3-Clause
Installs on skills.sh: 37,763 (Nov 2, 2026)
GitHub stars: 3,136 for the whole flutter/agent-plugins repo (Nov 2, 2026)
Last repo commit: Nov 1, 2026
What it includes: 1 file: SKILL.md (no scripts)
Needs: A Flutter project. Previews open in a supported IDE (Android Studio, IntelliJ, VS Code with Flutter 3.47+) or with flutter widget-preview start
Part of: flutter/agent-plugins, which lists 10 Flutter skills in its README
Works in: Not listed. The README names no supported clients and links to docs.flutter.dev/ai/get-started for setup in your preferred agent

What it includes

Marks widgets to show in the previewer
Applies @Preview from package:flutter/widget_previews.dart to top-level functions, static methods or public constructors with no required arguments.
Try: “Create a preview for the ProductCard widget with different price states.”
Write · @Preview annotation
Sets name, group, size, text scale, theme and brightness
Also supports a wrapper function for state or inherited widgets and a localizations function.
Write · Preview parameters
Shares one setup across many widgets
Extend Preview or MultiPreview, and override transform() to change the configuration at runtime.
Write · Custom Preview and MultiPreview
Avoids dart:io, dart:ffi and plain asset paths
Keeps previewable widgets free of native APIs and uses package-based asset paths such as packages/my_package/assets/image.png.
Read · Limits check
Opens it in the IDE or runs flutter widget-preview start
In a supported IDE it starts on its own. On the command line it opens a Chrome window. The build cache lives in a .widget_preview/ folder in your project.
Runs code · Start the previewer

From the official docs

Permissions

Low risk

The skill edits Dart files and starts the previewer, which writes a build cache in your project. Check that .widget_preview/ is ignored by git.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It creates a .widget_preview/ cache folder
The previewer keeps its build cache in your project root. Add the folder to .gitignore if your repo does not ignore it. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode. Use version control.
Sign-in and keys	SKILL.md does not mention any account or key.
Scopes	Edits Dart files in your project Runs flutter widget-preview start, which opens Chrome The previewer caches builds in .widget_preview/ in the project root

Questions

What does the flutter-add-widget-preview skill do?

It teaches Claude to add @Preview annotations and configure them. You then see your widgets in the Flutter Widget Previewer without launching the whole app.

How do I install flutter-add-widget-preview?

Use the install box at the top of this page. The skill is one SKILL.md file, so there is nothing else to download. Start a new session afterwards so it loads.

How do I open the previews?

In Android Studio, IntelliJ or VS Code (the skill says Flutter 3.47+), the previewer starts automatically. Open the "Flutter Widget Preview" tab in the sidebar. On the command line, run flutter widget-preview start in the project root.

Why does my widget throw an error in the preview?

The previewer runs on the web. Widgets that depend on dart:io, dart:ffi or native plugins throw when invoked. Use conditional imports or a wrapper to mock them in preview mode.

Can one preview setup be reused?

Yes. Extend Preview to share properties such as a theme or wrapper, or extend MultiPreview to generate several previews from one annotation.

Is flutter-add-widget-preview safe?

It edits Dart files, and the previewer it points to opens Chrome and keeps a .widget_preview/ cache folder in your project root. Review the edits and keep the project under version control.

Does flutter-add-widget-preview work in Codex or Cursor?

The README does not list supported clients. It links to https://docs.flutter.dev/ai/get-started for installing the plugins in your preferred agent, so follow that guide for Codex or Cursor.

Information

updated Nov 2, 2026

Repository: flutter/agent-plugins
Folder: skills/flutter-add-widget-preview

flutter/agent-plugins skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

flutter-add-widget-preview SKILL.md · github.com
Flutter agent-plugins README · github.com