SkillsAdd

hairyf/skills

overlastic

Comprehensive skills for working with Overlastic

First seen Jan 29, 2026

Installation

$ npx skills add hairyf/skills --skill overlastic
View on skills.sh ↗ GitHub repository ↗

Also in this package

Other skills from hairyf/skills · top by installs.

npx skills add hairyf/skills
tailwindcss 3K motion 1.1K hairy-utils 1.1K next 809 react-use 807 valtio 743 valtio-define 714 openapi-specification-v3.2 713 hairy-react-lib 713 vitest 646

Browse all from hairyf/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Also listed on

Alternate registries and mirrors of this skill.

Repository health

Stars 25
License LICENSE.md
Default branch main
Open issues 0
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version2026.01.29
More metadata
author
Hairyf
version
2026.01.29
source
Internal Documentation

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,561 B
  • docs SUMMARY.md 63 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 639 installs

SKILL.md

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](references/core-constructor.md)
Deferred Promise variation with external control methods [core-deferred](references/core-deferred.md)
Global Functions Utilities for mounting elements and name management [core-defines](references/core-defines.md)
useDisclosure Hook for managing overlay lifecycle and state [core-disclosure](references/core-disclosure.md)

Framework References

Topic Description Reference
React Integration Using Overlastic with React components [framework-react](references/framework-react.md)
Vue Integration Using Overlastic with Vue 3 components [framework-vue](references/framework-vue.md)
Svelte Integration Using Overlastic with Svelte components [framework-svelte](references/framework-svelte.md)

Advanced References

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

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