説明
できること
- Sycamoreの独特なリアクティビティシステム(画面の更新が必要な部分だけ自動で反応する仕組み)を理解し、仮想DOMなしで高速なWebUIを構築できます。
- ボタンクリック時の視覚的フィードバック、画面要素の滑らかなトランジションなど、ユーザーフレンドリーなインタラクションを実装できます。
- 視覚障害者や音声操作ユーザーなど、すべての人が使いやすいWebアプリケーションをセマンティックHTML(正しい意味のHTMLタグ)とARIA属性で実現できます。
- RustのWebAssembly(ブラウザで動作する高速なコード)技術により、Pythonやメディアプレイヤー並みの複雑な処理をブラウザで快適に実行できます。
- シンプルなカウンターアプリからダッシュボードUIまで、実際に動作するサンプルコードから学習パターンを即座に活用できます。
こんな人におすすめ
- Rustの型安全性を活かしながらWebフロントエンドを開発したい人
- JavaScriptフレームワーク(React、Vue等)の複雑さを避けたい開発者
- パフォーマンスを最優先にしたWebアプリケーションを構築する必要があるプロジェクト
- アクセシビリティとUXを両立させた高品質なUIを作りたい人
# Sycamore - Rust Reactive WebUI Framework **Sycamore**は、Rustで記述されたfine-grained reactivityベースのWebUIフレームワークです。仮想DOMを使用せず、SolidJS風のAPIで高性能なWebアプリケーションを構築できます。 ## 🎯 スキルの目的 このスキルは、**技術的な実装**と**UI/UXデザイン**の両面から、Sycamoreを使った優れたユーザー体験を持つアプリケーション開発を支援します。 ## 🌟 Sycamoreの特徴
Skill.md 情報
- バージョン
- v1.0.0
- カテゴリ
- automation
- 作成日
インストール
ワンコマンドで導入下の「Skill.mdをダウンロード」ボタンを押す
お使いのAIツール(Claude Code・Cursor・Copilot など)にファイルをアップロードして「このスキルを追加して」と入力する
$ mkdir -p ~/.claude/skills/ && curl -sL "https://github.com/chronista-club/fleetflow" -o ~/.claude/skills/SKILL.mdタグ
関連 Skill.md
Flutterアプリを自動ビルド・配布できる
by K9i-0
バージョン番号とビルド番号を自動更新:現在のバージョンを確認し、リリース内容に応じてバージョンを bump(例:1.19.0 → 1.20.0)して pubspec.yaml に反映できます。 更新内容を CHANGELOG に自動反映:前回リリース以降のコミットを自動解析し、Added / Changed / Fixed に分類して CHANGELOG を更新できます。 iOS・Android・macOS の任意の組み合わせで同時リリース:プラットフォームを選択するだけで、複数の OS 向けアプリを同時にビルド・署名・配布できます。 GitHub Actions による自動ビルド・署名・配布:タグ push 後、CI/CD パイプラインが自動実行され、TestFlight・Google Play への配布と GitHub Release 作成までが完全自動化されます。 リリース前の自動検証:静的解析とユニットテストをローカルで実行し、問題がある場合はリリースを防止できます。 Flutter アプリの開発・運用チーム:バージョン管理と配布プロセスを統一・自動化したい組織 複数プラットフォーム対応アプリの担当者:iOS と Android を同時リリースする際の手作業を削減したい リリース頻度が高いプロジェクト:毎週・毎日リリースする際の人的ミスを防ぎたい CI/CD パイプラインを構築したい組織:手動ビルド・配布から自動化へ移行したい Flutter アプリのリリースワークフロー全体を自動化します。前提として main ブランチで作業中で未コミット変更がないことが必要です。主な流れは:(1)現在のバージョン確認と差分コミット収集(grep で pubspec.yaml から version を取得、git log で前回タグ以降の差分を確認)→ (2)バージョンとプラットフォームをユーザーに確認(feat/fix コミット有無により minor/patch を推奨、build number は +1)→ (3)CHANGELOG.md を Added/Changed/Fixed で分類更新 → (4)pubspec.yaml の version 更新 → (5)dart analyze と flutter test による検証(失敗時は進まない)→ (6)git add/commit/push と複数プラットフォーム向けタグ打ち(ios/vX.Y.Z+N、android/vX.Y.Z+N、macos/vX.Y.Z+N)→ (7)GH Actions 自動実行(ios-release.yml で TestFlight・GitHub Release、android-release.yml で Google Play)。バージョン形式は X.Y.Z+N(N はビルド番号)です。
Bridge Server を npm に自動リリースできる
by K9i-0
コマンドラインから Bridge Server(@ccpocket/bridge)のバージョン bump・CHANGELOG 更新・タグ push を一元管理でき、その後 GitHub Actions が自動で npm publish と GitHub Release を作成します。 前回のリリースタグからの差分コミットを自動解析し、semantic versioning(major / minor / patch)の推奨版を提示してくれるため、バージョン決定の判断が簡単になります。 CHANGELOG を自動で構造化(Added / Changed / Fixed セクション)し、リリースノートの品質を保ちながら手作業を最小化できます。 ローカルで テスト・型チェック・ビルド を実行して検証してから push するため、リリース後の問題を事前に防げます。 Flutter アプリ側の expectedBridgeVersion を同時に更新できるため、Bridge と アプリのバージョンズレによるバナー表示ミスを防げます。 Bridge Server の保守・リリース担当者またはメンテナー バージョン管理・CHANGELOG 更新・リリース自動化を統一したいプロジェクトチーム npm パッケージの semantic versioning を厳密に運用したい組織 GitHub Actions を使った CI/CD パイプラインを構築・運用する開発者 前提: main ブランチで作業中、未コミット変更がないこと。 手順: 1. バージョン確認・差分収集: package.json の現在バージョンを確認し、前回タグからの差分コミット一覧を取得(git log + 条件指定)。 2. バージョン決定: 差分コミットを分析(feat = minor 推奨、fix のみ = patch、破壊的変更 = major)し、AskUserQuestion でユーザーに具体的なバージョン番号を提示・確認。 3. CHANGELOG 更新: packages/bridge/CHANGELOG.md の先頭に新セクション(Added / Changed / Fixed)を追加。 4. バージョン bump: packages/bridge/package.json を更新。 4.5. Flutter 同期: apps/mobile/lib/constants/app_constants.dart の expectedBridgeVersion を同じバージョンに更新(アプリの古いバージョン検出ロジック対応)。 5. ローカル検証: npm run test:bridge / npx tsc --noEmit / npm run bridge:build をすべて実行し pass を確認(失敗時はユーザーに報告・修正待ち)。 6. コミット・タグ: git add → git commit → git push origin main → git tag bridge/vX.Y.Z → git push origin bridge/vX.Y.Z。 7. 完了確認: GitHub Actions (bridge-release.yml) の自動実行を確認。テスト・ビルド・npm publish・GitHub Release 作成が完了したら終了。
Flutter新バージョンへの更新をステップバイステップで実行
by K9i-0
新しくリリースされたFlutterバージョンのBreaking Changes・非推奨APIを自動調査し、プロジェクトへの影響を可視化できます。 コードベース内の非推奨API使用箇所を自動検索し、修正が必要なファイルと行数を特定できます。 mise・GitHub Actions・Shorebird・dependency_overridesなどプロジェクト固有の構成それぞれについて、アップグレード時の対応内容をチェックリスト化できます。 Dart SDK制約やパッケージ互換性を確認し、アップグレード実行時の予期しないエラーを未然に防げます。 リリースノート調査から対応タスク作成まで一貫して進め、アップグレード作業の見落としをなくせます。 モバイルアプリ開発チームの技術リード(Flutter定期更新の計画・実行) Flutterエンジニア(新バージョンリリース時の個別対応確認) DevOps・インフラ担当者(mise・CI/CD・Shorebird等の統合管理) プロジェクトマネージャー(アップグレード作業のスケジューリング・見積もり判断) Flutterアップグレードは3フェーズで進みます。フェーズ1(情報収集): リリースノート(GitHub Issues、docs.flutter.dev、Breaking Changes、Blogから調査)とプロジェクト現状確認(flutter --version、.mise.toml、pubspec.yaml環境)。hotfixの場合はメジャーリリースの Breaking Changes も併せて調査。フェーズ2(影響分析): Breaking Changes について Grep でコードベース内の使用箇所を検索。mise・GitHub Actions・Shorebird・dependency_overrides・パッケージ互換性(flutter pub outdated)・Dart SDK制約を個別確認。フェーズ3(対応タスクリスト作成): 必須タスク(.mise.toml更新、mise install、各ワークフロー確認等)と修正対応(Breaking Changes修正、Shorebird doctor確認等)を整理。各フェーズで WebSearch/WebFetch でアップグレード最新情報を参照します。