overlastic

Name: overlastic
Author: hairyf

github.com/hairyfDevelopment26675 installsUpdated 2w ago

About overlastic

A reference skill for Overlastic, a promise-based modal, dialog, and popup library for React, Vue, and Svelte. It documents imperative and declarative usage, lifecycle control, and framework-specific integration.

Key features

01Overlay constructors and deferred control
02React, Vue, and Svelte integration
03Imperative and declarative usage
04Provider-based context inheritance
05External overlay lifecycle control

Use cases

01Adding promise-based dialogs to a React app
02Using overlays in Vue or Svelte components
03Controlling an overlay from outside its component

Install

Copy the command and run it in a terminal.

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

After installing, type/overlasticin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with 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

Details

From the project README

Based on Overlastic v0.8.7. A promise-based modal/dialog/popup library supporting React, Vue, and Svelte.

Core References

Topic	Description	Reference
Constructor	Core method for creating overlay constructors	core-constructor
Deferred	Promise variation with external control methods	core-deferred
Global Functions	Utilities for mounting elements and name management	core-defines
useDisclosure	Hook for managing overlay lifecycle and state	core-disclosure

Framework References

Topic	Description	Reference
React Integration	Using Overlastic with React components	framework-react
Vue Integration	Using Overlastic with Vue 3 components	framework-vue
Svelte Integration	Using Overlastic with Svelte components	framework-svelte

Advanced References

Topic	Description	Reference
Provider Pattern	Using OverlaysProvider for context inheritance	advanced-provider
Custom Components	Integrating existing component libraries	advanced-customization
External Control	Controlling overlay lifecycle from outside	advanced-external-control
Declarative Usage	Using overlays in templates/JSX	advanced-declarative

Key Concepts

Constructor: Receives component, props, and options to mount overlays
Deferred: Promise-like object with confirm and cancel methods for external control
Mount Options: Configuration for container, ID, index, and deferred instance
Lifecycle: Components are destroyed after duration ends when deferred resolves/rejects
Imperative Usage: defineOverlay and renderOverlay for callback-based invocation
Declarative Usage: Components can be used in templates/JSX with props
Provider Pattern: OverlaysProvider for context inheritance
Dual Mode Support: Components work in both imperative and declarative modes

Comments

Markdown supported

Details

Author: hairyf
Repository: hairyf/skills
Category: Development
Installs: 675
GitHub stars: 26

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: 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

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.