К основному содержанию
скилл CX Codex

flutter-development — скилл для Claude Code: Flutter и Dart

Скилл для разработки мобильных приложений на Flutter и Dart: виджеты, состояние через Provider или BLoC, навигация, интеграция с API.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add aj-geddes/useful-ai-prompts --skill flutter-development -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/flutter-development/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/flutter-development/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора118

access-control-rbac Скилл, который помогает агенту проектировать ролевую модель доступа: роли, разрешения, политики и принцип наименьших привилегий. CX Codex +1 757установок user-guide-creation Скилл для написания пользовательских руководств, туториалов и пошаговых инструкций со скриншотами и примерами. Пригодится, когда нужна документация для продукта. CX Codex +1 751установок kubernetes-deployment Помогает создавать манифесты и настраивать развёртывание приложений в Kubernetes: от rolling update и лимитов ресурсов до RBAC и проверок жизнеспособности подов. CX Codex +1 745установок logging-best-practices Скилл для настройки логирования: уровни, JSON-формат, контекст, защита PII и централизованный сбор логов. CX Codex +1 730установок visual-regression-testing Ловит случайные визуальные изменения интерфейса: снимает скриншоты компонентов и страниц и сравнивает их между версиями. CX Codex +1 718установок Funnel Analysis Скилл для анализа пользовательских воронок: считает конверсию по шагам, ищет точки отвала и рисует графики на Python. CX Codex +1 693установок e2e-testing-automation Скилл помогает писать end-to-end тесты: браузерные сценарии, проверка пользовательских путей и связки фронтенда с бэкендом. CX Codex +1 689установок react-component-architecture Скилл задаёт агенту правила проектирования React-компонентов: функциональные компоненты, хуки, композиция и TypeScript. Пригодится, когда растёт библиотека переиспользуемых компонентов. CX Codex +1 674установок

Похожие

flutter-dev MiniMax-AI Гайд для разработки Flutter-приложений с паттернами виджетов, Riverpod, Bloc и GoRouter. Пригодится при настройке интерфейса, навигации, тестов и производительности. CX Codex +1 2 000установок flutter-expert https://github.com/Jeffallan Скилл для разработки кросс-платформных приложений на Flutter 3+ и Dart. Помогает с виджетами, управлением состоянием через Riverpod или Bloc, маршрутизацией GoRouter и оптимизацией производительности. CX Codex +1 14 300установок flutter-navigation Stanislav [MADTeacher] Chernyshev Скилл для ИИ-агента, который разбирается с навигацией во Flutter: Navigator, go_router, диплинки, редиректы и история браузера. CX Codex +1 589установок dart-flutter-patterns affaan-m Набор готовых паттернов для Dart и Flutter: null safety, состояние, навигация, сеть. Пригодится, когда пишете или ревьюите код на Flutter. CX Codex +1 4 700установок flutter alinaqi Скилл для работы с Flutter и Dart: подсказывает структуру проекта, провайдеры Riverpod, модели Freezed и навигацию go_router. CX Codex +1 736установок flutter-animations Stanislav [MADTeacher] Chernyshev Скилл для работы с анимациями во Flutter: добавить, починить, отрефакторить или объяснить движение в интерфейсе. CX Codex +1 15 400установок

Рядом в теме «Мобильная разработка»

Всё по теме «Мобильная разработка» →

Вопросы о 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой