Communitygithub.com

fluttersdk/wind

Flutter向けTailwind CSS — flex, p-4, dark:bg-gray-800などのクラスをウィジェットツリーに組み込みます。MCPサーバー+Claude CodeスキルとしてAIエージェントが利用可能です。

wind とは?

fluttersdk/windは、Tailwind CSSのユーティリティファーストなデザインアプローチをFlutterアプリ開発に持ち込むスキルです。flex、p-4、dark:bg-gray-800といったおなじみのTailwindクラスを、そのままFlutterのウィジェットツリーとして解釈・構成できます。これにより、従来のFlutterスタイリング(コンテナ、パディング、カラー設定などを個別に記述)に比べて、コード量が大幅に削減され、デザインの一貫性と開発速度が向上します。本スキルはMCPサーバーとClaude Codeスキルの両方に対応しており、AIエージェント(Claude Codeなど)が自然言語の指示から直接Flutter UIを生成・編集できるようになります。開発者は「暗い背景にパディング4のflexレイアウト」といった抽象的な指示を出すだけで、AIが適切なTailwindライクなクラスを選択し、ウィジェットとしてレンダリングします。GitHub上でオープンソースとして公開されており、Flutterプロジェクトへの統合も容易です。

対応Claude Code~Codex CLI~Cursor
npx skills add fluttersdk/wind

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

wind は何をしますか?

Tailwind CSS for Flutter — classes like flex, p-4, dark:bg-gray-800 compose into widget trees. MCP server + Claude Code skill for AI agents.

関連スキル