Flutter Add Widget Preview
If you're building Flutter UI and tired of running the full app just to see a button, this skill walks Claude Code through adding `@Preview` annotations so components render in Flutter's Widget Previewer, isolated from your app's full context. It covers the annotation parameters that matter (size constraints, themes, brightness, text scale, wrappers for injected state) and shows how to layer custom `Preview` subclasses or `MultiPreview` to generate light and dark variants automatically. The main catch is the web-based previewer: anything touching `dart:io` or `dart:ffi` will throw, so you'll need conditional imports or mocks for native plugins. Worth reaching for on new components; for heavily stateful screens, expect some wrapper work before the preview is useful.
- skills.sh installs
- 38.7K
- GitHub stars
- 3.2K
- last updated
- Oct 26, 2026
Install
$ npx -y skills add flutter/agent-plugins --skill flutter-add-widget-preview --agent claude-codeInstalls into .claude/skills of the current project.
Files
Previewing Flutter Widgets
Contents
Preview Guidelines
Use the Flutter Widget Previewer to render widgets in real-time, isolated from the full application context.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/flutter/agent-plugins
- Categories
- Frontend Development, Testing & QA, AI & Agent Building, Mobile Development, Design & UI/UX
- First seen
- Oct 26, 2026
More from flutter/agent-plugins
All 10- Flutter Setup Localization38.7K
- Flutter Use Http Package37.9K
- Flutter Apply Architecture Best Practices45.5K
- Flutter Build Responsive Layout45.1K
- Flutter Fix Layout Issues42.2K
- Flutter Add Widget Test41.4K
- Flutter Add Integration Test40.2K
- Flutter Setup Declarative Routing39.7K
- Flutter Implement Json Serialization39.4K
Recommended
More Frontend Development
react-native-best-practicescallstackincubator/agent-skillsProvides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes32Kskills.sh installs
argent-react-native-optimizationsoftware-mansion/argentOptimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues. Entry-point for all performance work. Use when th30.2Kskills.sh installsargent-react-native-app-workflowsoftware-mansion/argentStep-by-step workflows for developing or debugging React Native apps on iOS simulator or Android emulator. Use when starting the app, debugging Metro, fixing bu30Kskills.sh installsargent-react-native-profilersoftware-mansion/argentProfile a React Native Hermes app to measure re-render and CPU performance using argent profiler tools. Use when optimizing for performance, measuring before/af30Kskills.sh installs
layoutpbakaus/impeccableImprove layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling o26.4Kskills.sh installs