[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M70FRVNQMSXYCEZN0J89TCVH":3,"skill-same:01M70FRVNQMSXYCEZN0J89TCVH":114},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":34,"publishedAt":55,"linkOnly":56,"markdownContent":57,"markdownBody":58,"frontMatter":59,"refName":60,"commitSha":61,"skillDirectory":62,"forksCount":63,"repositoryHtmlUrl":64,"repositoryHomepageUrl":65,"ownerHtmlUrl":66,"ownerBlogUrl":67,"ownerDescription":68,"updatedAt":69,"install":70,"resources":83},"01M70FRVNQMSXYCEZN0J89TCVH","flutter-development",null,"Comprehensive Flutter development guidance covering widget composition (including ADHD-friendly UI patterns), state management (Bloc and Riverpod), navigation with go_router, platform-specific code for iOS\u002FAndroid\u002FWeb\u002FDesktop, Material Design 3 implementation, and performance optimization. Use when building Flutter applications, implementing state management, creating cross-platform features, optimizing performance, or designing accessible user interfaces.","shengdabai\u002FTony-Claude-Code-Skills","shengdabai","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F116417419?v=4","01M70F6D2WY5PQV5A92BKYJQEW","Tony Sheng","01M70F6D3GAAAYZ5H4CC1G8VXM",3,"MIT","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fdot_claude\u002Fskills\u002Fflutter-development\u002FSKILL.md",[18,23,26,31],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":32,"categoryName":33,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师",[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54],"development","flutter development","flutter","patterns","when","ui patterns","features","for","implementing","material design","optimizing performance","platform","design","router","adhd","Composition","ui","code","performance","go","2026-11-10 10:12:30",false,"---\nname: flutter-development\ndescription: Comprehensive Flutter development guidance covering widget composition (including ADHD-friendly UI patterns), state management (Bloc and Riverpod), navigation with go_router, platform-specific code for iOS\u002FAndroid\u002FWeb\u002FDesktop, Material Design 3 implementation, and performance optimization. Use when building Flutter applications, implementing state management, creating cross-platform features, optimizing performance, or designing accessible user interfaces.\n---\n\n# Flutter Development\n\n## Overview\n\nProvide expert guidance on Flutter application development with focus on modern best practices, accessible UI design, efficient state management, and cross-platform development. Leverage comprehensive reference documentation for detailed patterns and techniques.\n\n## When to Use This Skill\n\nUse this skill when:\n- Building or maintaining Flutter applications\n- Implementing state management with Bloc or Riverpod\n- Creating ADHD-friendly or accessible user interfaces\n- Setting up navigation and routing (especially with go_router)\n- Writing platform-specific code for iOS, Android, Web, or Desktop\n- Implementing Material Design 3 components and theming\n- Optimizing Flutter app performance\n- Designing reusable widget compositions\n- Debugging performance issues or memory leaks\n- Migrating from Material 2 to Material 3\n\n## Core Capabilities\n\n### 1. ADHD-Friendly UI Design\n\nCreate user interfaces optimized for users with ADHD, following principles that reduce cognitive load and improve focus.\n\n**Key considerations:**\n- Minimize visual clutter and distractions\n- Establish clear visual hierarchies\n- Provide immediate, obvious feedback\n- Use card-based layouts for information chunking\n- Implement focus management and progressive disclosure\n- Apply consistent color coding for states\n\n**Reference:** Load `references\u002Fadhd_friendly_ui.md` for comprehensive patterns including:\n- Simplified navigation patterns\n- Distraction-free mode implementations\n- Progress visualization techniques\n- Typography and spacing guidelines\n- Form design best practices\n\n**Example request:** \"Design a task management screen with ADHD-friendly UI patterns\"\n\n### 2. State Management\n\nImplement robust state management using Bloc (event-driven) or Riverpod (reactive) patterns.\n\n**Choose Bloc when:**\n- Building large-scale applications with complex business logic\n- Need clear separation between UI and business logic\n- Want predictable state transitions with events\n- Prefer event-driven architecture\n\n**Choose Riverpod when:**\n- Need simpler, more flexible state management\n- Want compile-time safety\n- Building small to medium applications\n- Prefer declarative, reactive patterns\n\n**Reference:** Load `references\u002Fstate_management.md` for:\n- Complete Bloc implementation patterns with sealed classes\n- Riverpod provider types and advanced patterns\n- Testing strategies for both approaches\n- Performance optimization techniques\n- Migration guides between state management solutions\n\n**Example requests:**\n- \"Implement authentication flow using Bloc with loading states\"\n- \"Create a Riverpod provider for user profile data with caching\"\n- \"Set up state management for a shopping cart feature\"\n\n### 3. Navigation and Routing\n\nImplement modern, declarative navigation using go_router with support for deep linking, route guards, and nested navigation.\n\n**Key capabilities:**\n- Declarative routing with go_router\n- Nested routes and shell routes\n- Route guards and redirects\n- Deep linking for iOS, Android, and Web\n- Integration with state management (Bloc\u002FRiverpod)\n- Platform-specific navigation patterns\n\n**Reference:** Load `references\u002Fnavigation_routing.md` for:\n- go_router setup and configuration\n- Shell routes for persistent UI (bottom nav, drawer)\n- Deep linking implementation\n- Route guards and authentication flows\n- Custom page transitions\n- Multi-platform navigation patterns\n\n**Example requests:**\n- \"Set up go_router with authentication guards\"\n- \"Implement bottom navigation that persists across routes\"\n- \"Add deep linking support for product details pages\"\n\n### 4. Platform-Specific Code\n\nHandle platform differences across iOS, Android, Web, Desktop (Windows, macOS, Linux), and embedded platforms.\n\n**Key capabilities:**\n- Platform detection and conditional code\n- Platform channels (Method and Event channels)\n- Adaptive widgets (Material vs Cupertino)\n- Platform-specific permissions\n- Conditional imports\n- Responsive design for different form factors\n\n**Reference:** Load `references\u002Fplatform_specific.md` for:\n- Platform detection patterns\n- Platform channel implementation (iOS Swift, Android Kotlin)\n- Adaptive widget patterns\n- Permission handling per platform\n- Desktop-specific features (window management, system tray)\n- Web-specific features (URL strategy, JavaScript interop)\n\n**Example requests:**\n- \"Implement platform-specific camera functionality\"\n- \"Create adaptive UI that uses Cupertino on iOS and Material on Android\"\n- \"Add desktop window management features\"\n- \"Implement platform channels to access native APIs\"\n\n### 5. Material Design 3\n\nImplement Material Design 3 (Material You) with dynamic colors, updated components, and modern theming.\n\n**Key capabilities:**\n- Material 3 color system with dynamic colors\n- Updated component library\n- Typography and shape system\n- Tonal elevation\n- Dark theme support\n- Migration from Material 2\n\n**Reference:** Load `references\u002Fmaterial_design_3.md` for:\n- Complete Material 3 setup and configuration\n- Color scheme generation from seed colors\n- All Material 3 components with examples\n- Dynamic color support (Android 12+)\n- Component theming\n- Migration guide from Material 2\n\n**Example requests:**\n- \"Set up Material 3 theming with dynamic colors\"\n- \"Implement NavigationBar with badges\"\n- \"Create a dark theme variant\"\n- \"Migrate this Material 2 app to Material 3\"\n\n### 6. Performance Optimization\n\nOptimize Flutter apps for smooth 60fps rendering, minimal memory usage, and fast load times.\n\n**Key areas:**\n- Widget optimization (const constructors, RepaintBoundary)\n- List performance (ListView.builder, itemExtent)\n- Image optimization (caching, sizing)\n- Build method optimization\n- Memory management (resource disposal)\n- Async operations (compute, debouncing)\n- Animation performance\n- Build size optimization\n\n**Reference:** Load `references\u002Fperformance_optimization.md` for:\n- Profiling with Flutter DevTools\n- Widget optimization techniques\n- Image caching strategies\n- Memory leak prevention\n- Async operation best practices\n- JSON parsing in isolates\n- Testing performance\n\n**Example requests:**\n- \"Optimize this ListView with many images\"\n- \"Profile and fix performance issues in this animation\"\n- \"Reduce app size and improve load time\"\n- \"Fix memory leaks in this widget\"\n\n### 7. Widget Composition\n\nDesign reusable, maintainable widget hierarchies following Flutter best practices.\n\n**Key principles:**\n- Single responsibility per widget\n- Composition over inheritance\n- Proper use of const constructors\n- Clear data flow (data down, callbacks up)\n- Separation of concerns\n- Testability\n\n**Reference:** Load `references\u002Fwidget_composition.md` for:\n- Core composition principles\n- Reusable widget patterns\n- Layout patterns (responsive, spacing utilities)\n- State management patterns\n- Error handling patterns\n- Testing patterns\n- Anti-patterns to avoid\n\n**Example requests:**\n- \"Refactor this large widget into smaller, reusable components\"\n- \"Create a reusable product card component\"\n- \"Design a responsive layout that works on mobile and desktop\"\n\n## Workflow Guidelines\n\n### Initial Assessment\n\nWhen receiving a Flutter development request:\n\n1. **Identify the primary concern** (UI, state, navigation, platform-specific, theming, performance)\n2. **Determine which reference(s) to load** based on the request\n3. **Consider cross-cutting concerns** (accessibility, performance, platform differences)\n4. **Ask clarifying questions** if requirements are ambiguous\n\n### Reference Loading Strategy\n\nLoad reference documentation as needed rather than all at once:\n\n- **Single focus requests**: Load one reference file\n- **Complex requests**: Load multiple references progressively\n- **Performance concerns**: Always consider loading `performance_optimization.md`\n- **UI requests**: Consider if `adhd_friendly_ui.md` applies for better accessibility\n\n### Implementation Approach\n\nFollow these principles when implementing solutions:\n\n1. **Start with current Flutter best practices** (Flutter 3.x, Dart 3.x)\n2. **Use Material 3** unless Material 2 is explicitly required\n3. **Apply const constructors** wherever possible\n4. **Consider performance implications** from the start\n5. **Think multi-platform** unless single platform specified\n6. **Prioritize accessibility** and inclusive design\n7. **Write testable code** with clear separation of concerns\n8. **Follow widget composition best practices** (small, focused widgets)\n\n### Code Quality Standards\n\nEnsure all generated code:\n- Uses modern Flutter\u002FDart syntax (null safety, pattern matching, records)\n- Follows official Dart style guide\n- Includes necessary imports\n- Uses meaningful variable and widget names\n- Has appropriate const constructors\n- Disposes resources properly (controllers, streams, listeners)\n- Handles errors gracefully\n- Is testable\n\n## Examples\n\n### Example 1: ADHD-Friendly Task Manager\n\n**Request:** \"Build a task management screen with ADHD-friendly UI\"\n\n**Approach:**\n1. Load `references\u002Fadhd_friendly_ui.md`\n2. Implement card-based layout for discrete information chunks\n3. Use clear visual hierarchy with Material 3 typography\n4. Provide immediate feedback for all actions\n5. Include progress indicators for multi-step tasks\n6. Apply simplified navigation patterns\n7. Consider focus mode for distraction-free work\n\n### Example 2: Authentication with Bloc\n\n**Request:** \"Implement authentication flow with Bloc\"\n\n**Approach:**\n1. Load `references\u002Fstate_management.md`\n2. Create sealed classes for auth states (Initial, Loading, Authenticated, Unauthenticated, Error)\n3. Define auth events (Login, Logout, CheckAuth)\n4. Implement AuthBloc with proper event handlers\n5. Use BlocListener for navigation side effects\n6. Use BlocBuilder for UI rendering\n7. Add proper error handling\n\n### Example 3: Multi-Platform App\n\n**Request:** \"Create an app that works on iOS, Android, and Web\"\n\n**Approach:**\n1. Load `references\u002Fplatform_specific.md` and `references\u002Fnavigation_routing.md`\n2. Set up go_router with web-friendly URLs\n3. Implement adaptive widgets for iOS\u002FAndroid differences\n4. Handle platform-specific features (permissions, deep linking)\n5. Create responsive layouts for different screen sizes\n6. Test on all target platforms\n\n### Example 4: Performance Optimization\n\n**Request:** \"This list is laggy with many images\"\n\n**Approach:**\n1. Load `references\u002Fperformance_optimization.md`\n2. Profile with Flutter DevTools to identify bottlenecks\n3. Switch to ListView.builder if not already using it\n4. Add itemExtent for fixed-height items\n5. Implement image caching with cached_network_image\n6. Use cacheWidth\u002FcacheHeight to decode images at appropriate size\n7. Add RepaintBoundary if needed\n8. Extract static widgets to prevent unnecessary rebuilds\n\n## Additional Notes\n\n- **Stay Current**: Follow Flutter's official blog and release notes for latest features\n- **Test Thoroughly**: Always test on target platforms (physical devices when possible)\n- **Consider Accessibility**: Use Semantics widgets and test with screen readers\n- **Document Decisions**: Explain why specific patterns or approaches are chosen\n- **Performance First**: Consider performance implications from the start, not as an afterthought\n- **Progressive Enhancement**: Start with core functionality, add enhancements progressively\n\n## Resources\n\nThis skill includes comprehensive reference documentation in the `references\u002F` directory:\n\n- **adhd_friendly_ui.md**: ADHD-friendly UI design patterns and principles\n- **state_management.md**: Bloc and Riverpod implementation patterns\n- **navigation_routing.md**: go_router and navigation best practices\n- **platform_specific.md**: Cross-platform development techniques\n- **material_design_3.md**: Material Design 3 implementation guide\n- **performance_optimization.md**: Performance profiling and optimization\n- **widget_composition.md**: Widget composition patterns and best practices\n\nLoad these references as needed to provide detailed, accurate guidance.\n","# Flutter Development\n\n## Overview\n\nProvide expert guidance on Flutter application development with focus on modern best practices, accessible UI design, efficient state management, and cross-platform development. Leverage comprehensive reference documentation for detailed patterns and techniques.\n\n## When to Use This Skill\n\nUse this skill when:\n- Building or maintaining Flutter applications\n- Implementing state management with Bloc or Riverpod\n- Creating ADHD-friendly or accessible user interfaces\n- Setting up navigation and routing (especially with go_router)\n- Writing platform-specific code for iOS, Android, Web, or Desktop\n- Implementing Material Design 3 components and theming\n- Optimizing Flutter app performance\n- Designing reusable widget compositions\n- Debugging performance issues or memory leaks\n- Migrating from Material 2 to Material 3\n\n## Core Capabilities\n\n### 1. ADHD-Friendly UI Design\n\nCreate user interfaces optimized for users with ADHD, following principles that reduce cognitive load and improve focus.\n\n**Key considerations:**\n- Minimize visual clutter and distractions\n- Establish clear visual hierarchies\n- Provide immediate, obvious feedback\n- Use card-based layouts for information chunking\n- Implement focus management and progressive disclosure\n- Apply consistent color coding for states\n\n**Reference:** Load `references\u002Fadhd_friendly_ui.md` for comprehensive patterns including:\n- Simplified navigation patterns\n- Distraction-free mode implementations\n- Progress visualization techniques\n- Typography and spacing guidelines\n- Form design best practices\n\n**Example request:** \"Design a task management screen with ADHD-friendly UI patterns\"\n\n### 2. State Management\n\nImplement robust state management using Bloc (event-driven) or Riverpod (reactive) patterns.\n\n**Choose Bloc when:**\n- Building large-scale applications with complex business logic\n- Need clear separation between UI and business logic\n- Want predictable state transitions with events\n- Prefer event-driven architecture\n\n**Choose Riverpod when:**\n- Need simpler, more flexible state management\n- Want compile-time safety\n- Building small to medium applications\n- Prefer declarative, reactive patterns\n\n**Reference:** Load `references\u002Fstate_management.md` for:\n- Complete Bloc implementation patterns with sealed classes\n- Riverpod provider types and advanced patterns\n- Testing strategies for both approaches\n- Performance optimization techniques\n- Migration guides between state management solutions\n\n**Example requests:**\n- \"Implement authentication flow using Bloc with loading states\"\n- \"Create a Riverpod provider for user profile data with caching\"\n- \"Set up state management for a shopping cart feature\"\n\n### 3. Navigation and Routing\n\nImplement modern, declarative navigation using go_router with support for deep linking, route guards, and nested navigation.\n\n**Key capabilities:**\n- Declarative routing with go_router\n- Nested routes and shell routes\n- Route guards and redirects\n- Deep linking for iOS, Android, and Web\n- Integration with state management (Bloc\u002FRiverpod)\n- Platform-specific navigation patterns\n\n**Reference:** Load `references\u002Fnavigation_routing.md` for:\n- go_router setup and configuration\n- Shell routes for persistent UI (bottom nav, drawer)\n- Deep linking implementation\n- Route guards and authentication flows\n- Custom page transitions\n- Multi-platform navigation patterns\n\n**Example requests:**\n- \"Set up go_router with authentication guards\"\n- \"Implement bottom navigation that persists across routes\"\n- \"Add deep linking support for product details pages\"\n\n### 4. Platform-Specific Code\n\nHandle platform differences across iOS, Android, Web, Desktop (Windows, macOS, Linux), and embedded platforms.\n\n**Key capabilities:**\n- Platform detection and conditional code\n- Platform channels (Method and Event channels)\n- Adaptive widgets (Material vs Cupertino)\n- Platform-specific permissions\n- Conditional imports\n- Responsive design for different form factors\n\n**Reference:** Load `references\u002Fplatform_specific.md` for:\n- Platform detection patterns\n- Platform channel implementation (iOS Swift, Android Kotlin)\n- Adaptive widget patterns\n- Permission handling per platform\n- Desktop-specific features (window management, system tray)\n- Web-specific features (URL strategy, JavaScript interop)\n\n**Example requests:**\n- \"Implement platform-specific camera functionality\"\n- \"Create adaptive UI that uses Cupertino on iOS and Material on Android\"\n- \"Add desktop window management features\"\n- \"Implement platform channels to access native APIs\"\n\n### 5. Material Design 3\n\nImplement Material Design 3 (Material You) with dynamic colors, updated components, and modern theming.\n\n**Key capabilities:**\n- Material 3 color system with dynamic colors\n- Updated component library\n- Typography and shape system\n- Tonal elevation\n- Dark theme support\n- Migration from Material 2\n\n**Reference:** Load `references\u002Fmaterial_design_3.md` for:\n- Complete Material 3 setup and configuration\n- Color scheme generation from seed colors\n- All Material 3 components with examples\n- Dynamic color support (Android 12+)\n- Component theming\n- Migration guide from Material 2\n\n**Example requests:**\n- \"Set up Material 3 theming with dynamic colors\"\n- \"Implement NavigationBar with badges\"\n- \"Create a dark theme variant\"\n- \"Migrate this Material 2 app to Material 3\"\n\n### 6. Performance Optimization\n\nOptimize Flutter apps for smooth 60fps rendering, minimal memory usage, and fast load times.\n\n**Key areas:**\n- Widget optimization (const constructors, RepaintBoundary)\n- List performance (ListView.builder, itemExtent)\n- Image optimization (caching, sizing)\n- Build method optimization\n- Memory management (resource disposal)\n- Async operations (compute, debouncing)\n- Animation performance\n- Build size optimization\n\n**Reference:** Load `references\u002Fperformance_optimization.md` for:\n- Profiling with Flutter DevTools\n- Widget optimization techniques\n- Image caching strategies\n- Memory leak prevention\n- Async operation best practices\n- JSON parsing in isolates\n- Testing performance\n\n**Example requests:**\n- \"Optimize this ListView with many images\"\n- \"Profile and fix performance issues in this animation\"\n- \"Reduce app size and improve load time\"\n- \"Fix memory leaks in this widget\"\n\n### 7. Widget Composition\n\nDesign reusable, maintainable widget hierarchies following Flutter best practices.\n\n**Key principles:**\n- Single responsibility per widget\n- Composition over inheritance\n- Proper use of const constructors\n- Clear data flow (data down, callbacks up)\n- Separation of concerns\n- Testability\n\n**Reference:** Load `references\u002Fwidget_composition.md` for:\n- Core composition principles\n- Reusable widget patterns\n- Layout patterns (responsive, spacing utilities)\n- State management patterns\n- Error handling patterns\n- Testing patterns\n- Anti-patterns to avoid\n\n**Example requests:**\n- \"Refactor this large widget into smaller, reusable components\"\n- \"Create a reusable product card component\"\n- \"Design a responsive layout that works on mobile and desktop\"\n\n## Workflow Guidelines\n\n### Initial Assessment\n\nWhen receiving a Flutter development request:\n\n1. **Identify the primary concern** (UI, state, navigation, platform-specific, theming, performance)\n2. **Determine which reference(s) to load** based on the request\n3. **Consider cross-cutting concerns** (accessibility, performance, platform differences)\n4. **Ask clarifying questions** if requirements are ambiguous\n\n### Reference Loading Strategy\n\nLoad reference documentation as needed rather than all at once:\n\n- **Single focus requests**: Load one reference file\n- **Complex requests**: Load multiple references progressively\n- **Performance concerns**: Always consider loading `performance_optimization.md`\n- **UI requests**: Consider if `adhd_friendly_ui.md` applies for better accessibility\n\n### Implementation Approach\n\nFollow these principles when implementing solutions:\n\n1. **Start with current Flutter best practices** (Flutter 3.x, Dart 3.x)\n2. **Use Material 3** unless Material 2 is explicitly required\n3. **Apply const constructors** wherever possible\n4. **Consider performance implications** from the start\n5. **Think multi-platform** unless single platform specified\n6. **Prioritize accessibility** and inclusive design\n7. **Write testable code** with clear separation of concerns\n8. **Follow widget composition best practices** (small, focused widgets)\n\n### Code Quality Standards\n\nEnsure all generated code:\n- Uses modern Flutter\u002FDart syntax (null safety, pattern matching, records)\n- Follows official Dart style guide\n- Includes necessary imports\n- Uses meaningful variable and widget names\n- Has appropriate const constructors\n- Disposes resources properly (controllers, streams, listeners)\n- Handles errors gracefully\n- Is testable\n\n## Examples\n\n### Example 1: ADHD-Friendly Task Manager\n\n**Request:** \"Build a task management screen with ADHD-friendly UI\"\n\n**Approach:**\n1. Load `references\u002Fadhd_friendly_ui.md`\n2. Implement card-based layout for discrete information chunks\n3. Use clear visual hierarchy with Material 3 typography\n4. Provide immediate feedback for all actions\n5. Include progress indicators for multi-step tasks\n6. Apply simplified navigation patterns\n7. Consider focus mode for distraction-free work\n\n### Example 2: Authentication with Bloc\n\n**Request:** \"Implement authentication flow with Bloc\"\n\n**Approach:**\n1. Load `references\u002Fstate_management.md`\n2. Create sealed classes for auth states (Initial, Loading, Authenticated, Unauthenticated, Error)\n3. Define auth events (Login, Logout, CheckAuth)\n4. Implement AuthBloc with proper event handlers\n5. Use BlocListener for navigation side effects\n6. Use BlocBuilder for UI rendering\n7. Add proper error handling\n\n### Example 3: Multi-Platform App\n\n**Request:** \"Create an app that works on iOS, Android, and Web\"\n\n**Approach:**\n1. Load `references\u002Fplatform_specific.md` and `references\u002Fnavigation_routing.md`\n2. Set up go_router with web-friendly URLs\n3. Implement adaptive widgets for iOS\u002FAndroid differences\n4. Handle platform-specific features (permissions, deep linking)\n5. Create responsive layouts for different screen sizes\n6. Test on all target platforms\n\n### Example 4: Performance Optimization\n\n**Request:** \"This list is laggy with many images\"\n\n**Approach:**\n1. Load `references\u002Fperformance_optimization.md`\n2. Profile with Flutter DevTools to identify bottlenecks\n3. Switch to ListView.builder if not already using it\n4. Add itemExtent for fixed-height items\n5. Implement image caching with cached_network_image\n6. Use cacheWidth\u002FcacheHeight to decode images at appropriate size\n7. Add RepaintBoundary if needed\n8. Extract static widgets to prevent unnecessary rebuilds\n\n## Additional Notes\n\n- **Stay Current**: Follow Flutter's official blog and release notes for latest features\n- **Test Thoroughly**: Always test on target platforms (physical devices when possible)\n- **Consider Accessibility**: Use Semantics widgets and test with screen readers\n- **Document Decisions**: Explain why specific patterns or approaches are chosen\n- **Performance First**: Consider performance implications from the start, not as an afterthought\n- **Progressive Enhancement**: Start with core functionality, add enhancements progressively\n\n## Resources\n\nThis skill includes comprehensive reference documentation in the `references\u002F` directory:\n\n- **adhd_friendly_ui.md**: ADHD-friendly UI design patterns and principles\n- **state_management.md**: Bloc and Riverpod implementation patterns\n- **navigation_routing.md**: go_router and navigation best practices\n- **platform_specific.md**: Cross-platform development techniques\n- **material_design_3.md**: Material Design 3 implementation guide\n- **performance_optimization.md**: Performance profiling and optimization\n- **widget_composition.md**: Widget composition patterns and best practices\n\nLoad these references as needed to provide detailed, accurate guidance.\n",{"name":5,"description":7},"main","7850740bd837adb32f0a109ab2af82482196c6f2","skills\u002F_collections\u002Fdot_claude\u002Fskills\u002Fflutter-development",1,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills","https:\u002F\u002Fzturnsgo.com","https:\u002F\u002Fgithub.com\u002Fshengdabai","https:\u002F\u002Fzturnsgo.com\u002F","AI × education creator — producer, not consumer. Taught 6,000+ learners; shipping learning tools & daily essays with Claude Code, practicing @xiaolai's way 🥋","2026-11-01 21:28:23",{"source":8,"skillName":5,"commands":71,"prompt":81,"zipAvailable":82},[72,75,78],{"tool":73,"command":74},"npx","npx skills add shengdabai\u002FTony-Claude-Code-Skills --skill flutter-development",{"tool":76,"command":77},"bunx","bunx skills add shengdabai\u002FTony-Claude-Code-Skills --skill flutter-development",{"tool":79,"command":80},"pnpm","pnpm dlx skills add shengdabai\u002FTony-Claude-Code-Skills --skill flutter-development","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fdot_claude\u002Fskills\u002Fflutter-development\u002FSKILL.md",true,[84,90,94,98,102,106,110],{"path":85,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002Fadhd_friendly_ui.md","REFERENCE","参考文档",8811,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fdot_claude\u002Fskills\u002Fflutter-development\u002Freferences\u002Fadhd_friendly_ui.md",{"path":91,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Fmaterial_design_3.md",17419,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fdot_claude\u002Fskills\u002Fflutter-development\u002Freferences\u002Fmaterial_design_3.md",{"path":95,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002Fnavigation_routing.md",15504,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fdot_claude\u002Fskills\u002Fflutter-development\u002Freferences\u002Fnavigation_routing.md",{"path":99,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":100,"sourceHtmlUrl":101},"references\u002Fperformance_optimization.md",17040,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fdot_claude\u002Fskills\u002Fflutter-development\u002Freferences\u002Fperformance_optimization.md",{"path":103,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":104,"sourceHtmlUrl":105},"references\u002Fplatform_specific.md",17382,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fdot_claude\u002Fskills\u002Fflutter-development\u002Freferences\u002Fplatform_specific.md",{"path":107,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":108,"sourceHtmlUrl":109},"references\u002Fstate_management.md",13519,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fdot_claude\u002Fskills\u002Fflutter-development\u002Freferences\u002Fstate_management.md",{"path":111,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":112,"sourceHtmlUrl":113},"references\u002Fwidget_composition.md",18637,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fdot_claude\u002Fskills\u002Fflutter-development\u002Freferences\u002Fwidget_composition.md",[115,132,159,185,207,227],{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":124,"publishedAt":55},"01M70P17DAD4C1C47NPH6A96EM","xiaolai-methodology","以李笑来(Li Xiaolai)的思考方式、方法论与表达风格,为用户做全方位 1-on-1 教练指导,覆盖创业、赚钱、投资、学习、自学、读书写作、用 AI、以及人生心态与自我管理。当用户提到 \"李笑来\"、\"笑来\"、\"笑来老师\"、\"扮演李笑来\"、\"找笑来聊聊\"、\"笑来怎么看\"、\"xiaolai\"、\"把时间当作朋友\"、\"通往财富自由之路\"、\"定投改变命运\"、\"韭菜的自我修养\"、\"自学是门手艺\"、\"让时间陪你慢慢变富\"、\"七年就是一辈子\"、\"元认知\"、\"活在未来\"、\"复利\u002F长期主义\"、\"践行\"、\"痴迷改进\"、\"个人商业模式\u002F出售时间\"、\"睡后收入\"、\"定投\"、\"财富自由\"、\"操作系统升级\"、\"最少必要知识\"、\"北极星提示词\"、\"用 AI 该怎么学\u002F思考\" 等任一触发词,或当用户带着关于创业\u002F赚钱\u002F投资\u002F学习\u002F职业\u002F重大人生决策的困惑、希望被人用笑来式的「逻辑 + 大白话 + 类比 + 重新定义 + 践行导向」来点醒和指导时,自动进入李笑来教练模式。","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fxiaolai-methodology\u002FSKILL.md",[121],{"categoryNo":122,"categoryName":123,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",[125,126,127,128,129,130,131],"methodology","xiaolai","xiaolai methodology","朋友","投资","writing","收入",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":140,"publishedAt":55},"01M70P13NB9YP7ACJR1S861CDS","zread","Produce and consume a wiki-style knowledge base for a code repository via the `zread` CLI and its on-disk output under `.\u002F.zread\u002Fwiki\u002F`. Use this skill whenever the user wants to understand, onboard onto, explore, summarize, map, or get an overview of an unfamiliar codebase; asks for architecture docs, a project wiki, a repo walkthrough, module\u002Fpackage explanations, or \"what does this repo do\"; wants to generate, regenerate, resume, browse, or serve code documentation locally; or mentions zread \u002F zread.ai directly. Also use it proactively before diving into a large unknown repo — if `.\u002F.zread\u002Fwiki\u002Fcurrent` exists, read the generated pages instead of crawling source file-by-file; if it doesn't, consider offering to run `zread generate`. The trigger is the intent (understand a codebase through generated docs), not the literal word \"zread\".","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fzread\u002FSKILL.md",[138,139],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},[134,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,52,157,158],"knowledge","wiki","explore","walkthrough","project","get","knowledge base","run","generate","intent","cli","map","documentation","project wiki","disk","architecture","unknown","generated",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":169,"publishedAt":55},"01M70P10S4SWMZQ8BJAFBFDRW3","youtube","Launch the YouTube Creator Agent to auto-generate videos.\nUse when: user types \u002Fyoutube, wants to create YouTube videos,\ngenerate video content, or upload to YouTube.\nKeywords: youtube, video, 视频, 创作视频, 发布视频","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube\u002FSKILL.md",[165,166],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":167,"categoryName":168,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000036","内容创作者",[161,170,171,172,173,174,175,176,149,177,178,179,39,180,181,182,183,184],"user","content","视频","creator","generate video","videos","launch","video content","create","upload","use","auto","types","Video","创作",{"skillNo":186,"name":187,"nameZh":6,"description":188,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":189,"categories":190,"keywords":192,"publishedAt":55},"01M70P0YE95D8BACZCGV8BK90K","youtube-script-sync","Sync, update, or optimize Tony's GetNote knowledge base `Youtube视频逐字稿` by turning each parent recording or first-person idea note into an idempotent child note containing a directly recordable YouTube long-video or Shorts script. Use when the user says “更新\u002F同步\u002F优化 Youtube视频逐字稿知识库”, or says “更新\u002F同步\u002F优化该知识库” while this knowledge base is the active context.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-script-sync\u002FSKILL.md",[191],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[193,194,161,195,196,183,197,198,199,200,201,202,203,204,147,205,39,180,141,206],"sync","script","youtube script sync","recording","shorts","first","base","person","update","active","child","optimize","idempotent","long",{"skillNo":208,"name":209,"nameZh":6,"description":210,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":211,"categories":212,"keywords":217,"publishedAt":55},"01M70P0WMV5XT0EEC0N445PW07","writing-skills","How to write SKILL.md files that trigger reliably and teach effectively. Use when creating, improving, or reviewing Claude Code skills.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-skills\u002FSKILL.md",[213,214,215,216],{"categoryNo":122,"categoryName":123,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},{"categoryNo":167,"categoryName":168,"taxonomyType":29,"taxonomyTypeDesc":30},[218,130,219,220,221,222,52,39,180,223,224,225,226],"writing skills","how","teach","write skill","write","claude code skills","files","how to","trigger",{"skillNo":228,"name":229,"nameZh":6,"description":230,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":231,"categories":232,"keywords":235,"publishedAt":55},"01M70P0SJFR4YVJQBGMHKGSKXT","writing-rules","How to write .claude\u002Frules\u002F files that Claude actually follows. Use when creating, improving, or reviewing project rules.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-rules\u002FSKILL.md",[233,234],{"categoryNo":122,"categoryName":123,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":167,"categoryName":168,"taxonomyType":29,"taxonomyTypeDesc":30},[236,130,237,145,238,224,39,219,222,180,225],"Rules","writing rules","project rules"]