菜单
Flutter framework for building beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Use when building Flutter apps, working with widgets, state management, navigation, animations, or Material Design components.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Migrate a React Native project from NativeWind to Uniwind. Use when the user wants to replace NativeWind with Uniwind, upgrade from NativeWind, switch to Uniwind, or mentions NativeWind-to-Uniwind migration. Handles package removal, config migration, Tailwind 4 upgrade, cssInterop removal, theme conversion, and all breaking changes.
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent-* color props, platform/data/state/responsive variants, CSS variables, custom utilities, withUniwind for third-party components, cn/tailwind-merge, tailwind-variants, safe area utilities, gradients, fonts, React Navigation, UI kits, diagnostics, troubleshooting, and Uniwind Pro features. Does not cover NativeWind migration.
Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.
Use Tailwind CSS to style React Native components across web and native
Build and maintain React Native apps with Expo SDK, EAS Build, EAS Update, and Continuous Native Generation. Use when configuring Expo projects, adding native modules, building binaries, or shipping over-the-air updates.
End-to-end testing patterns with Playwright for full-stack Python/React applications. Use when writing E2E tests for complete user workflows (login, CRUD, navigation), critical path regression tests, or cross-browser validation. Covers test structure, page object model, selector strategy (data-testid > role > label), wait strategies, auth state reuse, test data management, and CI integration. Does NOT cover unit tests or component tests (use pytest-patterns or react-testing-patterns).
| name | flutter |
| description | Flutter framework for building beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Use when building Flutter apps, working with widgets, state management, navigation, animations, or Material Design components. |
| metadata | {"author":"hairy","version":"2026.1.31","source":"Generated from https://github.com/flutter/flutter, scripts located at https://github.com/hairyf/skills"} |
The skill is based on Flutter framework, generated at 2026-01-31.
Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.
Flutter uses Dart as its programming language and follows a widget-based architecture where everything is a widget. The framework provides hot reload for fast development cycles, a rich set of Material Design and Cupertino widgets, and excellent performance through compiled code.
| Topic | Description | Reference |
|---|---|---|
| Widget System | StatelessWidget, StatefulWidget, Widget lifecycle, keys | core-widgets |
| State Management | setState, StatefulWidget, ValueNotifier, ChangeNotifier | core-state-management |
| Layout System | Row, Column, Stack, Flex, constraints, sizing | core-layout |
| BuildContext | Context usage, InheritedWidget, theme access | core-build-context |
| InheritedWidget | Sharing data down widget tree, InheritedWidget patterns | features-inherited-widget |
| Topic | Description | Reference |
|---|---|---|
| Text & Styling | Text widget, TextStyle, RichText, TextSpan | widgets-text |
| Images | Image widget, AssetImage, NetworkImage, ImageProvider | widgets-images |
| Icons | Icon widget, IconData, IconTheme | widgets-icons |
| Buttons | ElevatedButton, TextButton, OutlinedButton, IconButton | widgets-buttons |
| Input Fields | TextField, TextFormField, Form, FormField | widgets-input |
| Async Widgets | FutureBuilder, StreamBuilder, async operations | widgets-async |
| ValueListenableBuilder | Building widgets based on ValueListenable changes | widgets-value-listenable |
| PageView | Swipeable pages, PageController, page navigation | widgets-pageview |
| RefreshIndicator | Pull-to-refresh functionality | widgets-refresh-indicator |
| Dismissible | Swipe-to-dismiss widgets | widgets-dismissible |
| TabBar & Tabs | Tab navigation, TabController, TabBarView | widgets-tabs |
| Forms & Validation | Form validation, validators, form handling | features-forms-validation |
| Topic | Description | Reference |
|---|---|---|
| Flex Layouts | Row, Column, Flex, Flexible, Expanded | layout-flex |
| Stack Layout | Stack, Positioned, alignment | layout-stack |
| Container | Container, BoxDecoration, padding, margin | layout-container |
| List Views | ListView, ListTile, GridView, Sliver widgets | layout-lists |
| Slivers | CustomScrollView, SliverList, SliverGrid, advanced scrolling | features-slivers |
| Scroll Controller | Programmatic scroll control, scroll listeners | features-scroll-controller |
| Topic | Description | Reference |
|---|---|---|
| Navigator | Navigator.push, Navigator.pop, routes | features-navigation |
| Named Routes | Route configuration, onGenerateRoute | features-named-routes |
| Router | GoRouter, declarative routing | features-router |
| Topic | Description | Reference |
|---|---|---|
| Implicit Animations | AnimatedContainer, AnimatedOpacity, AnimatedSize | features-implicit-animations |
| Explicit Animations | AnimationController, Tween, AnimationBuilder | features-explicit-animations |
| Hero Animations | Hero widget, shared element transitions | features-hero-animations |
| Topic | Description | Reference |
|---|---|---|
| Material App | MaterialApp, Theme, ThemeData | features-material-app |
| Material Components | AppBar, Scaffold, Drawer, BottomNavigationBar | features-material-components |
| Material 3 | Material 3 design system, color schemes | features-material-3 |
| Topic | Description | Reference |
|---|---|---|
| Cupertino Widgets | iOS-style widgets, CupertinoApp, CupertinoNavigationBar | features-cupertino |
| Topic | Description | Reference |
|---|---|---|
| Dialogs & Modals | AlertDialog, showDialog, showModalBottomSheet | features-dialogs |
| Focus Management | FocusNode, FocusScope, keyboard navigation | features-focus |
| Topic | Description | Reference |
|---|---|---|
| Platform Channels | MethodChannel, EventChannel, native communication | features-platform-channels |
| Platform Views | AndroidView, UiKitView, embedding native views | features-platform-views |
| Assets & Resources | Asset management, pubspec.yaml, asset loading | features-assets |
| HTTP & Networking | HTTP requests, API calls, JSON parsing | features-http |
| Responsive Design | MediaQuery, LayoutBuilder, screen adaptation | features-responsive |
| Keys | ValueKey, ObjectKey, GlobalKey, when to use keys | features-keys |
| Widget Lifecycle | initState, dispose, lifecycle management | features-lifecycle |
| Error Handling | Try-catch, error widgets, error boundaries | features-error-handling |
| PopScope | Handle back button and navigation pop events | features-pop-scope |
| Topic | Description | Reference |
|---|---|---|
| Custom Paint | CustomPainter, Canvas, custom graphics | advanced-custom-paint |
| Gestures | GestureDetector, GestureRecognizer, drag and drop | advanced-gestures |
| Performance | Performance optimization, const constructors, keys | advanced-performance |
| Testing | Widget testing, integration testing, test utilities | advanced-testing |
| Topic | Description | Reference |
|---|---|---|
| State Management | When to use setState, state lifting, patterns | best-practices-state |
| Performance | Optimization techniques, const usage, patterns | best-practices-performance |
