複数のアプリやMCPホストからブランド画像・動画を生成、調整、書き出し、挿入する作業を支援します。ライブラリ選択や修正依頼も扱います。
- スライド用のブランド画像を作りたいとき
- 既存素材をフィードバックに合わせて直したいとき
- 動画素材を生成して書き出したいとき
BuilderIO/agent-native7,5262026年10月26日 更新
無料GitHub で公開日本語紹介
booker
予約画面の日時・枠・入力フォームを段階的に進めるフローを実装し、選択内容の保存や確認表示、再予約にも対応するスキルです。
原文原文の説明を見る
Public booking flow — the state machine, animations, and URL/app-state sync.
BuilderIO/agent-nativeスター 7,526(GitHub 7,526 + cccskills 0)
実行スコア 未検証
インストール方法を見るこんなときに便利
- 予約受付の画面を作りたいとき
- 日時の選択をURLに保存したいとき
- 既存予約から再予約したいとき
- モバイル対応の予約画面を作りたいとき
日本語での紹介
できること
予約画面を、日付選択、空き枠選択、参加者情報の入力、完了表示へと進む段階的なフローとして設計します。既存予約のUIDを使った再予約にも対応し、選択した日付や枠、タイムゾーン、所要時間をURLとアプリ状態に反映して、再読み込み後も選択内容を保てるようにします。ブラウザーのタイムゾーンを初期値にしつつ、利用者が変更した設定の保存や、12時間・24時間表示の切り替えも扱います。イベント種別ごとのリンクコピー、画面遷移のアニメーション、キーボード操作や読み上げへの配慮、画面幅に応じたモバイル表示も含みます。
こんなときに便利
予約受付ページや日程調整画面を作るときに向いています。予約の選択状態を共有可能なURLに反映したい場合や、再予約、モバイル表示、アクセシビリティまで含めて画面の振る舞いを整理したい場合にも使えます。
使い方の例
- 「日付選択から予約完了までの画面フローを実装してください」
- 「選択した日時をURLとアプリ状態に保存してください」
- 「既存予約から再予約できる画面にしてください」
注意点
アニメーションには motion/react、通知には Sonner を使います。
この紹介文は、公開されている SKILL.md をもとに AI（OpenAI Codex）が作成しました。正確な仕様は下の原文を確認してください。
含まれるファイル（1）
- SKILL.md1.6 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Booker
Stages
- pick-date — month grid shows days with availability
- pick-slot — available slots on the selected day
- fill-form — attendee form (name, email, custom fields)
- success — confirmation with add-to-calendar buttons
Plus reschedule mode — prefilled from existing booking uid.
Animations
Use motion (motion/react) AnimatePresence with fadeInLeft variants. The outer
container animates its width across stages: narrow (calendar only) → wider
(calendar + slots) → widest (form).
Timezone + 12/24h
- Detect browser timezone at mount; let user override via dropdown.
- Persist choice to localStorage key
scheduling.timezone. - 12/24h toggle near slot column; persist to user settings.
URL + application-state sync
Selected date, slot, timezone, and duration are mirrored to URL query
params AND application_state.booker-state so:
- Page refresh preserves selection.
- Agent can read the user's current pick.
Copy-link affordance
Every event-type row has a "copy link" button. On click, write to clipboard and toast "Copied!" with Sonner. Works on mobile Safari too.
Accessibility
- Month grid is ARIA
grid+gridcellwith arrow-key nav. - Slot buttons are keyboard-focusable, with
aria-pressed. - Focus returns to trigger on modal close.
- Toast content announced via
aria-live=polite.
Mobile
< 768px: stack vertically. Calendar full-width, slot list below, form
slides in as full-screen sheet.
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
コメント
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
同じリポジトリのスキル
特定の顧客企業について、契約と製品利用の数値を照らし合わせ、根拠や不足情報を明記した健全性レポートをまとめます。
- 顧客の健全性を確認したいとき
- 契約席数と実利用を比べたいとき
- 更新前に利用状況を整理したいとき
BuilderIO/agent-native7,5262026年10月26日 更新
アプリの操作をエージェントと画面の両方から呼び出せるアクションとして実装し、API連携や画面のデータ取得を一貫した形で追加するスキルです。
- 新しいアプリ操作を追加したいとき
- 外部APIと連携したいとき
- 画面からデータを取得したいとき
BuilderIO/agent-native7,5262026年10月26日 更新
新機能をUI・エージェント用アクション・説明資料・画面状態の4領域でそろえ、利用者とエージェントのどちらからも一貫して使えるようにするチェックリストです。
- 新機能追加の作業範囲を整理したいとき
- UIとエージェント操作をそろえたいとき
- 画面状態の同期漏れを防ぎたいとき
BuilderIO/agent-native7,5262026年10月26日 更新
複数のデータソースを照合して、傾向や指標、根拠をまとめた分析結果を作成します。必要に応じて、再実行できるダッシュボードとして保存できます。
- 商談と通話記録を照合したいとき
- 顧客の利用状況を横断して調べたいとき
- 繰り返し更新できる分析を保存したいとき
BuilderIO/agent-native7,5262026年10月26日 更新
Analyticsの管理画面で、機能フラグの状態確認と切り替え、ダッシュボード利用状況の調査、接続先アプリのデータベース管理を行います。
- アプリごとの機能フラグを確認・変更したいとき
- ダッシュボードの所有者や利用状況を調べたいとき
- 接続済みアプリのテーブルを管理したいとき
BuilderIO/agent-native7,5262026年10月26日 更新