SkillsAdd

smithery/hairyf

overlastic

Comprehensive skills for working with Overlastic

Installation

$ npx skills add smithery/hairyf --skill overlastic
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

overlastic Similar name
hairyf/skills

Comprehensive skills for working with Overlastic

639 installs

Also in this package

Other skills from smithery/hairyf.

npx skills add smithery/hairyf
hairy-utils 0 hairy-react-lib 0

Browse all from smithery/hairyf

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

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 66 B

History

  1. First recorded snapshot · 0 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