flutter

Name: flutter
Author: hairyf

github.com/hairyfDevelopment26165 installsUpdated 2w ago

About flutter

A skill for Flutter development, covering its widget-based UI model and common framework features across mobile, web, and desktop projects. It serves developers building apps with Dart from a shared codebase.

Key features

01Widget and state management
02Layout and navigation
03Material and Cupertino UI
04Animation and platform integration
05Networking, testing, and performance

Use cases

01Build responsive app screens
02Manage UI state and navigation
03Connect apps with native platform features

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/hairyf/skills --skill flutter

After installing, type/flutterin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

GENERATION.md

references/

advanced-custom-paint.md

advanced-gestures.md

advanced-performance.md

advanced-testing.md

best-practices-performance.md

best-practices-state.md

core-build-context.md

core-layout.md

core-state-management.md

core-widgets.md

features-assets.md

features-cupertino.md

features-dialogs.md

features-error-handling.md

features-explicit-animations.md

features-focus.md

features-forms-validation.md

features-hero-animations.md

features-http.md

features-implicit-animations.md

features-inherited-widget.md

features-keys.md

features-lifecycle.md

features-material-3.md

features-material-app.md

features-material-components.md

features-named-routes.md

features-navigation.md

features-platform-channels.md

Details

From the project README

Flutter

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.

Core References

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

Widgets

Basic Widgets

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

Layout Widgets

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

Features

Navigation

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

Animations

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

Material Design

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

Cupertino (iOS)

Topic	Description	Reference
Cupertino Widgets	iOS-style widgets, CupertinoApp, CupertinoNavigationBar	features-cupertino

UI Components

Topic	Description	Reference
Dialogs & Modals	AlertDialog, showDialog, showModalBottomSheet	features-dialogs
Focus Management	FocusNode, FocusScope, keyboard navigation	features-focus

Platform Integration

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

Advanced

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

Best Practices

Topic	Description	Reference
State Management	When to use setState, state lifting, patterns	best-practices-state
Performance	Optimization techniques, const usage, patterns	best-practices-performance

Comments

Markdown supported

Details

Author: hairyf
Repository: hairyf/skills
Category: Development
Installs: 165
GitHub stars: 26

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

858.0k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.