flutter-development — скилл для Claude Code: Flutter и Dart
Скилл для разработки мобильных приложений на Flutter и Dart: виджеты, состояние через Provider или BLoC, навигация, интеграция с API.
npx skills add aj-geddes/useful-ai-prompts --skill flutter-development -a claude-codeЧто делает flutter-development
Скилл задаёт агенту рамки работы с Flutter-проектом. Внутри — инструкция по композиции виджетов, паттернам управления состоянием (Provider и BLoC), навигации и подключению API. Плюс набор правил: не строить целые экраны внутри build(), не делать сетевые вызовы в build(), использовать const-конструкторы, освобождать ресурсы в жизненном цикле состояния.
В references/ лежат три подробных руководства: структура проекта и навигация, управление состоянием через Provider, экраны с интеграцией Provider. В быстром старте показан pubspec.yaml с зависимостями provider, http и go_router и набросок main.dart с MaterialApp.router. Полная реализация — в справочниках.
Скилл рассчитан на iOS и Android, но проверять поведение придётся на обоих: в правилах отдельно оговорено тестирование на разных размерах экрана и учёт различий платформ. Если проект на другом стеке, брать его незачем.
Какие задачи решает
- собрать структуру Flutter-проекта с навигацией
- вынести состояние из
setStateв Provider или BLoC - подключить HTTP-запросы к API без вызовов в
build() - разложить экран на виджеты вместо одного большого
build() - настроить маршрутизацию через
go_router
Примеры запросов агенту
- помоги спроектировать структуру Flutter-приложения с go_router
- перепиши этот экран так, чтобы состояние шло через Provider
- проверь мой
main.dartна нарушения правил из скилла
Как установить flutter-development
1Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill flutter-development -a claude-code2Вручную: положить файлы
~/.claude/skills/flutter-development/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/flutter-development/
1Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill flutter-development -a codex2Вручную: положить файлы
.agents/skills/flutter-development/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill flutter-development -a cursor2Вручную: положить файлы
.cursor/skills/flutter-development/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install aj-geddes/useful-ai-prompts flutter-development2Вручную: положить файлы
.github/skills/flutter-development/SKILL.md1Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill flutter-development -a gemini-cli2Командой платформы
gemini skills install https://github.com/aj-geddes/useful-ai-prompts --path skills/flutter-developmentВручную: положить файлы
.devin/skills/flutter-development/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill flutter-development -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора118
Похожие
Рядом в теме «Мобильная разработка»
Всё по теме «Мобильная разработка» →Вопросы о flutter-development
Как установить flutter-development в Claude?
Выполните npx skills add aj-geddes/useful-ai-prompts --skill flutter-development -a claude-code. Скилл окажется в ~/.claude/skills/flutter-development/SKILL.md.
Что делает flutter-development?
Даёт агенту инструкции по Flutter и Dart: виджеты, управление состоянием через Provider или BLoC, навигация, интеграция с API и правила оформления кода.
Какие зависимости нужны для примеров из скилла?
В быстром старте фигурируют пакеты provider, http и go_router, прописанные в pubspec.yaml. Подробные реализации лежат в трёх файлах каталога references/.
Исходный текст
SKILL.md · MIT
---
name: flutter-development
description: >
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers
widgets, state management with Provider/BLoC, navigation, API integration, and
material design.
---
# Flutter Development
## Table of Contents
- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)
## Overview
Create high-performance, visually stunning mobile applications using Flutter with Dart language. Master widget composition, state management patterns, navigation, and API integration.
## When to Use
- Building iOS and Android apps with native performance
- Designing custom UIs with Flutter's widget system
- Implementing complex animations and visual effects
- Rapid app development with hot reload
- Creating consistent UX across platforms
## Quick Start
Minimal working example:
```dart
// pubspec.yaml
name: my_flutter_app
version: 1.0.0
dependencies:
flutter:
sdk: flutter
provider: ^6.0.0
http: ^1.1.0
go_router: ^12.0.0
// main.dart with GoRouter navigation
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp.router(
// ... (see reference guides for full implementation)
```
## Reference Guides
Detailed implementations in the `references/` directory:
| Guide | Contents |
|---|---|
| [Project Structure & Navigation](references/project-structure-navigation.md) | Project Structure & Navigation |
| [State Management with Provider](references/state-management-with-provider.md) | State Management with Provider |
| [Screens with Provider Integration](references/screens-with-provider-integration.md) | Screens with Provider Integration |
## Best Practices
### ✅ DO
- Use widgets for every UI element
- Implement proper state management
- Use const constructors where possible
- Dispose resources in state lifecycle
- Test on multiple device sizes
- Use meaningful widget names
- Implement error handling
- Use responsive design patterns
- Test on both iOS and Android
- Document custom widgets
### ❌ DON'T
- Build entire screens in build() method
- Use setState for complex state logic
- Make network calls in build()
- Ignore platform differences
- Create overly nested widget trees
- Hardcode strings
- Ignore performance warnings
- Skip testing
- Forget to handle edge cases
- Deploy without thorough testing
© aj-geddes · MIT · aj-geddes/useful-ai-prompts