overlastic

Name: overlastic
Author: hairyf

github.com/hairyf開発26675 回インストール2 週間前に更新

overlastic について

Overlastic のリファレンススキルです。Overlastic は React、Vue、Svelte 向けの Promise ベースのモーダル、ダイアログ、ポップアップライブラリです。命令的・宣言的な使い方、ライフサイクル制御、フレームワーク連携を説明します。

主な機能

01オーバーレイ構築と Deferred 制御
02React、Vue、Svelte 連携
03命令的・宣言的な利用方法
04Provider によるコンテキスト継承
05外部からのライフサイクル制御

活用シーン

01React アプリへの Promise ベースのダイアログ追加
02Vue または Svelte コンポーネントでのオーバーレイ利用
03コンポーネント外からのオーバーレイ制御

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hairyf/skills --skill overlastic

インストール後、Claude Code で/overlasticを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.md

SYNC.md

references/

advanced-customization.md

advanced-declarative.md

advanced-external-control.md

advanced-provider.md

core-constructor.md

core-deferred.md

core-defines.md

core-disclosure.md

framework-react.md

framework-svelte.md

framework-vue.md

詳細

Overlastic v0.8.7 に基づいています。React、Vue、Svelte をサポートする、Promise ベースのモーダル／ダイアログ／ポップアップライブラリです。

コアリファレンス

トピック	説明	リファレンス
コンストラクター	オーバーレイコンストラクターを作成するためのコアメソッド	core-constructor
Deferred	外部制御メソッドを備えた Promise の派生形	core-deferred
グローバル関数	要素のマウントと名前管理のためのユーティリティ	core-defines
useDisclosure	オーバーレイのライフサイクルと状態を管理するフック	core-disclosure

フレームワークリファレンス

トピック	説明	リファレンス
React 連携	Overlastic を React コンポーネントで使用する方法	framework-react
Vue 連携	Overlastic を Vue 3 コンポーネントで使用する方法	framework-vue
Svelte 連携	Overlastic を Svelte コンポーネントで使用する方法	framework-svelte

高度なリファレンス

トピック	説明	リファレンス
プロバイダーパターン	コンテキスト継承に OverlaysProvider を使用する方法	advanced-provider
カスタムコンポーネント	既存のコンポーネントライブラリを統合する方法	advanced-customization
外部制御	外部からオーバーレイのライフサイクルを制御する方法	advanced-external-control
宣言的な使用方法	テンプレート／JSX でオーバーレイを使用する方法	advanced-declarative

主な概念

コンストラクター：コンポーネント、props、オプションを受け取り、オーバーレイをマウントします
Deferred：外部制御用の confirm メソッドと cancel メソッドを備えた、Promise のように扱えるオブジェクトです
マウントオプション：コンテナー、ID、インデックス、Deferred インスタンスの設定です
ライフサイクル：Deferred が解決または拒否されると、duration の終了後にコンポーネントが破棄されます
命令的な使用方法：コールバックベースで呼び出すには、defineOverlay と renderOverlay を使用します
宣言的な使用方法：props を指定して、テンプレート／JSX でコンポーネントを使用できます
プロバイダーパターン：コンテキスト継承には OverlaysProvider を使用します
デュアルモードのサポート：コンポーネントは命令的モードと宣言的モードの両方で動作します

Markdown 対応

ログインしてコメント

基本情報

作者: hairyf
リポジトリ: hairyf/skills
カテゴリ: 開発
インストール数: 675
GitHub スター: 26

問題を報告

おすすめの Skills

すべての Skills

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

コードベースをスキャンして改善の機会を探し、ビジュアル HTML レポートとして提示し、選択したものを詳しく掘り下げる。

design-mobile-apps

github.com/designed-by-ai

1.1M

Sleek でモバイルアプリの画面をデザインし、Sleek プロジェクトを編集して、React Native または HTML でデザインを実装します。

vercel-react-best-practices

github.com/vercel-labs

848.6k

Vercel Engineering の React および Next.js パフォーマンス最適化ガイドライン。React / Next.js コードを記述、レビュー、またはリファクタリングするときに、最適なパフォーマンスパターンを確保するため、このスキルを使用する必要があります。React コンポーネント、Next.js ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。