New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Self Contained Modals

by UsefulSoftwareCo in UsefulSoftwareCo/executor

Build modals/dialogs self-contained: form and in-flight state lives inside, closing unmounts it.

MITAuto-check passedBackend & APIs

Install Self Contained Modals

skills CLI
$ npx skills add UsefulSoftwareCo/executor --skill self-contained-modals -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install UsefulSoftwareCo/executor self-contained-modals --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/UsefulSoftwareCo/executor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/self-contained-modals .claude/skills/self-contained-modals && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
self-contained-modals
GitHub stars
4.1k
Token cost
~878 tokens
SKILL.md length
395 words
Files
1
Skills in repo
21
Repo updated
First seen
Licence
MIT

At a glance

Build modals/dialogs self-contained: form and in-flight state lives inside, closing unmounts it.

  • Works in 3 steps: A hand-written reset() exists. Its… → An always-mounted dialog (rendered… → A busy/loading flag composed from a…
  • Reviewing a modal/dialog
  • SKILL.md covers Why, How to apply and Reviewing: flag these smells
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Self Contained Modals is an agent skill from UsefulSoftwareCo/executor. Build modals/dialogs self-contained: form and in-flight state lives inside, closing unmounts it. Use when writing or reviewing a modal/dialog, especially one that owns async work (OAuth popups, timers, subscriptions, AbortControllers). Catches the stuck-on-Connecting class of lifecycle-leak bugs.

Its SKILL.md is about 880 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Backend & APIs, covering OAuth and OpenID Connect. The repository describes itself as: The missing integration layer for AI agents. Let them call any OpenAPI / MCP / GraphQL / custom js functions in secure environment. The licence is MIT.

When your agent uses it

  • Reviewing a modal/dialog
  • Especially one that owns async work (OAuth popups
  • AbortControllers)

Example prompts

  • “/self-contained-modals”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. A hand-written reset() exists. Its presence means state outlives the modal;
  2. An always-mounted dialog (rendered unconditionally with an open prop) that
  3. A busy/loading flag composed from a child hook (e.g. ccBusy || someHook.busy)

What it can do on your machine

Read from SKILL.md and the folder at commit 27dccb8. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Self Contained Modals loads about 878 tokens when it runs. Until then it costs about 80 tokens; SKILL.md has 395 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~80
When it runs · the whole SKILL.md, loaded when a task matches
~878

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from UsefulSoftwareCo/executor at commit 27dccb8, republished under its MIT licence (© UsefulSoftwareCo). 395 words, ~878 tokens.

Download SKILL.mdSave it as .claude/skills/self-contained-modals/SKILL.md (or your agent's skills folder).
name
self-contained-modals
description
Build modals/dialogs self-contained: form and in-flight state lives inside, closing unmounts it. Use when writing or reviewing a modal/dialog, especially one that owns async work (OAuth popups, timers, subscriptions, AbortControllers). Catches the stuck-on-Connecting class of lifecycle-leak bugs.

Self-contained modals

A modal's form state and in-flight work live INSIDE the modal, and closing the modal UNMOUNTS that state so it is destroyed, not hand-reset. Only the open/route intent belongs to the parent (deep links, programmatic open, reconnect handoffs need it).

Why

A hand-written reset() has to enumerate every field, and it silently drifts out of sync with state owned by child hooks the parent can't see. Unmounting resets everything for free, including child-hook cleanup effects (cancelling a dangling server session, clearing a timer, aborting a fetch).

Concrete bug this prevents (executor, add-account-modal): the modal was mounted unconditionally, so useOAuthPopupFlow's busy survived close. reset() zeroed its own booleans but never called oauthPopup.cancel(). Abandon the OAuth popup, close, reopen, and oauthBusy = false || busy(true) = true, so the footer is wedged on "Connecting…" with Close disabled. Unmounting would have cleared busy AND run the hook's cleanup that cancels the server OAuth session.

How to apply

Default to genuine conditional unmount, state inside. When closed the component returns null, so React destroys all of it and runs every child hook's cleanup. This is the cleanest fix and the one to reach for first:

tsx
function Parent() {
  const [open, setOpen] = useState(false);
  return open ? <Modal onClose={() => setOpen(false)} /> : null;
}

A key bump (<Body key={openCount} />) is still a manual reset, just spelled as a remount. Prefer real unmount; only reach for keyed remount in the one case below.

That case: Radix Dialog (this repo's components/dialog.tsx) Content/Overlay use data-[state=closed]:animate-out exit animations, so unmounting the whole Dialog drops the close animation. If you must keep that animation, keep the Dialog + DialogContent shell mounted and remount only the state-bearing body per open:

Show full SKILL.md (136 more words)Show less
tsx
function Parent() {
  const [open, setOpen] = useState(false);
  const [openCount, setOpenCount] = useState(0);
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent>{open ? <ModalBody key={openCount} /> : null}</DialogContent>
    </Dialog>
  );
}

This only works when DialogContent is independent of body state. If the shell depends on the body (e.g. a width className driven by the body's current sub-view), the body must own DialogContent, so there is no stable shell to keep, and genuine unmount (losing the exit animation) is the right call. That is exactly the executor add-account-modal: it genuinely unmounts and accepts the lost animation rather than plumbing body state up to a shell.

Reviewing: flag these smells

  1. A hand-written reset() exists. Its presence means state outlives the modal; ask why the modal isn't just unmounted.
  2. An always-mounted dialog (rendered unconditionally with an open prop) that owns async/in-flight state: popups, timers, subscriptions, AbortControllers, server sessions.
  3. A busy/loading flag composed from a child hook (e.g. ccBusy || someHook.busy) where reset() clears only part of it.

© UsefulSoftwareCo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/self-contained-modals of UsefulSoftwareCo/executor.

Open the folder on GitHubat commit 27dccb8

Compare with similar skills

Self Contained Modals next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Self Contained Modals compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Self Contained Modals this skillUsefulSoftwareCo/executor4.1k—~878Automated safety check: PassMIT
Fortify Developmentcoollabsio/coolify63k4 repos~1.9kAutomated safety check: PassMIT
Antipattern Preventiondoorkeeper-gem/doorkeeper5.5k—~1.1kAutomated safety check: PassMIT
OmniRoute Provider Managementdiegosouzapw/OmniRoute74k—~2.4kAutomated safety check: PassMIT
Stripe Best Practiceskanchengw/cnllm1753 repos~925Automated safety check: PassApache-2.0
Notion Worker Third-Party Auth Guidemakenotion/workers-template4391 repos~3.5kAutomated safety check: NotesMIT

Similar skills

  • Fortify Development

    coollabsio/coolify

    ACTIVATE when the user works on authentication in Laravel. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 4 repos~1.9k tokens
    Backend & APIsAuto-check passed

  • Antipattern Prevention

    doorkeeper-gem/doorkeeper

    Avoid common Ruby and Rails antipatterns that degrade maintainability and performance.

    5.5k GitHub stars~1.1k tokensUpdated yesterday
    Backend & APIsAuto-check passed

  • OmniRoute Provider Management

    diegosouzapw/OmniRoute

    Manages AI provider connections, API keys, OAuth flows and connection tests through OmniRoute's REST API across its 327-provider catalog.

    74k GitHub stars~2.4k tokensUpdated today
    Backend & APIsAuto-check passed

  • Stripe Best Practices

    kanchengw/cnllm

    Guides Stripe integration decisions — API selection (Checkout Sessions vs PaymentIntents), Connect platform setup (Accounts v2, controller properties), billing/subscriptions, Treasury financial…

    175 GitHub starsUsed in 3 repos~925 tokens
    Backend & APIsAuto-check passed

  • Notion Worker Third-Party Auth Guide

    makenotion/workers-template

    Official

    Decides whether a Notion Worker should use a brokered credential, a plaintext environment secret, or OAuth to authenticate against a non-Notion service.

    439 GitHub starsUsed in 1 repo~3.5k tokens
    Backend & APIsAuto-check: notes

  • Dependency Safety

    doorkeeper-gem/doorkeeper

    Ensure gems are safe, necessary, and properly constrained when adding, updating, or reviewing dependencies in Doorkeeper.

    5.5k GitHub stars~931 tokensUpdated yesterday
    Backend & APIsAuto-check passed

More from UsefulSoftwareCo/executor

All 21 skills in this repo

  • Effect Client Wrapper

    UsefulSoftwareCo/executor

    Pattern for wrapping third-party SDK clients (Stripe, Resend, AWS, etc.) with Effect.

    4.1k GitHub starsUsed in 1 repo~1.4k tokens
    Auto-check passed

  • CLI Release

    UsefulSoftwareCo/executor

    Runbook for releasing the executor CLI package (stable and beta).

    4.1k GitHub stars~2k tokensUpdated today
    Auto-check passed

  • Effect Atom Optimistic Updates

    UsefulSoftwareCo/executor

    Pattern for implementing optimistic UI updates with effect-atom in this codebase.

    4.1k GitHub stars~2.5k tokensUpdated today
    Auto-check passed

  • Effect HTTP Testing

    UsefulSoftwareCo/executor

    Testing Effect HttpApi services end-to-end. An agent skill from UsefulSoftwareCo/executor.

    4.1k GitHub stars~1.6k tokensUpdated today
    Auto-check passed

  • Emulate

    UsefulSoftwareCo/executor

    Use the @executor-js/emulate service emulators (GitHub, Google, Stripe, Resend, WorkOS, …) to test integrations for real — full OpenAPI specs, working OAuth flows, mintable credentials, and a…

    4.1k GitHub stars~2.2k tokensUpdated today
    Auto-check: notes

  • Prod Telemetry

    UsefulSoftwareCo/executor

    Query Executor's production telemetry — Axiom traces (executor-cloud dataset), prod Postgres via PlanetScale, PostHog product analytics — through the Executor MCP.

    4.1k GitHub stars~1.9k tokensUpdated today
    Auto-check passed

Categories

Questions about Self Contained Modals

What does Self Contained Modals do?

Build modals/dialogs self-contained: form and in-flight state lives inside, closing unmounts it. Self Contained Modals is an agent skill from UsefulSoftwareCo/executor. Build modals/dialogs self-contained: form and in-flight state lives inside, closing unmounts it.

When should I use Self Contained Modals?

Self Contained Modals fits situations like: reviewing a modal/dialog; especially one that owns async work (OAuth popups; abortControllers).

How do I install Self Contained Modals in Claude Code?

Run `npx skills add UsefulSoftwareCo/executor --skill self-contained-modals -a claude-code`. Or copy the skill folder (.claude/skills/self-contained-modals in UsefulSoftwareCo/executor) into .claude/skills/self-contained-modals in your project. Claude Code loads it when a task matches its description.

How do I install Self Contained Modals in Codex?

Run `npx skills add UsefulSoftwareCo/executor --skill self-contained-modals -a codex`. Or copy the skill folder (.claude/skills/self-contained-modals in UsefulSoftwareCo/executor) into .agents/skills/self-contained-modals in your project. Codex loads it when a task matches its description.

Can I use Self Contained Modals in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add UsefulSoftwareCo/executor --skill self-contained-modals -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/self-contained-modals, .gemini/skills/self-contained-modals, .github/skills/self-contained-modals and .opencode/skills/self-contained-modals in your project.

What does Self Contained Modals need to run?

SKILL.md names no scripts, command-line tools or credentials: Self Contained Modals is instructions for the agent only.

Does Self Contained Modals access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Self Contained Modals safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Self Contained Modals use?

Self Contained Modals is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Self Contained Modals use?

About 878 tokens (SKILL.md is roughly 3.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Self Contained Modals?

Skills that share tags, products or a category with Self Contained Modals: Fortify Development (coollabsio/coolify, 63k stars), Antipattern Prevention (doorkeeper-gem/doorkeeper, 5.5k stars), OmniRoute Provider Management (diegosouzapw/OmniRoute, 74k stars) and Stripe Best Practices (kanchengw/cnllm, 175 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Self Contained Modals?

UsefulSoftwareCo (a GitHub organization) maintains it in UsefulSoftwareCo/executor, which has 4,094 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on October 8, 2026.

Source: UsefulSoftwareCo/executor on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.