Agent skill

Goey Toast

Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion.

MITAuto-check: warningsFrontend & Design

Install Goey Toast

The automated check flagged lines worth reading first. See the safety section below.

skills CLI

$ npx skills add anl331/goey-toast --skill goey-toast -a claude-code

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

GitHub CLI

$ gh skill install anl331/goey-toast goey-toast --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/anl331/goey-toast.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/goey-toast .claude/skills/goey-toast && 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/

Paste into Claude Code

Install the "goey-toast" agent skill from https://github.com/anl331/goey-toast/tree/main/skills/goey-toast into .claude/skills/goey-toast/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "goey-toast", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/anl331/goey-toast/tree/main/skills/goey-toast

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add anl331/goey-toast --skill goey-toast -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install anl331/goey-toast goey-toast --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/anl331/goey-toast.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/goey-toast .agents/skills/goey-toast && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "goey-toast" agent skill from https://github.com/anl331/goey-toast/tree/main/skills/goey-toast into .agents/skills/goey-toast/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "goey-toast", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add anl331/goey-toast --skill goey-toast -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install anl331/goey-toast goey-toast --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/anl331/goey-toast.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/goey-toast .cursor/skills/goey-toast && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "goey-toast" agent skill from https://github.com/anl331/goey-toast/tree/main/skills/goey-toast into .cursor/skills/goey-toast/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "goey-toast", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/anl331/goey-toast.git --path skills/goey-toast

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add anl331/goey-toast --skill goey-toast -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install anl331/goey-toast goey-toast --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/anl331/goey-toast.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/goey-toast .gemini/skills/goey-toast && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "goey-toast" agent skill from https://github.com/anl331/goey-toast/tree/main/skills/goey-toast into .gemini/skills/goey-toast/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "goey-toast", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install anl331/goey-toast goey-toast

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add anl331/goey-toast --skill goey-toast -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/anl331/goey-toast.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/goey-toast .github/skills/goey-toast && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "goey-toast" agent skill from https://github.com/anl331/goey-toast/tree/main/skills/goey-toast into .github/skills/goey-toast/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "goey-toast", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add anl331/goey-toast --skill goey-toast -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install anl331/goey-toast goey-toast --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/anl331/goey-toast.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/goey-toast .opencode/skills/goey-toast && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "goey-toast" agent skill from https://github.com/anl331/goey-toast/tree/main/skills/goey-toast into .opencode/skills/goey-toast/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "goey-toast", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: goey-toast
GitHub stars: 1.3k
Token cost: ~1.3k tokens
SKILL.md length: 286 words
Files: 1
Skills in repo: 1
Repo updated: Sep 5, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion.

Works in 2 steps: Mount once near the app root. → Import the stylesheet once at the entry…
Adding toast/notification UI to a React app (success/error/warning/info/promise toasts)
SKILL.md covers When to use, Install, Two required steps to render… and API: gooeyToast, plus 3 more sections
Calls npm and npx; reaches goey-toast.vercel.app

What it does

Goey Toast is an agent skill from anl331/goey-toast. Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion. Use when adding toast/notification UI to a React app (success/error/warning/info/promise toasts), or when the user mentions goey-toast / gooey toast.

Its SKILL.md is about 1.3k 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 Frontend & Design, covering Web animation and motion. It works with React, Motion, Next.js and TypeScript. The repository describes itself as: A gooey, morphing toast component built on Sonner with Framer Motion animations. The licence is MIT.

When your agent uses it

Adding toast/notification UI to a React app (success/error/warning/info/promise toasts)
The user mentions goey-toast / gooey toast

Example prompts

“/goey-toast”

Requirements

Node.js

Workflow steps

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

Mount once near the app root.
Import the stylesheet once at the entry point. Without it toasts render

What it can do on your machine

Read from SKILL.md and the folder at commit be6bd88. 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
Shell commands in SKILL.md call:
- npm
- npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- goey-toast.vercel.app
Also links to:
- npmjs.com
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

Goey Toast loads about 1.3k tokens when it runs. Until then it costs about 66 tokens; SKILL.md has 286 words of instructions outside code blocks.

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

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: warnings

The automated check found patterns that need a careful read before installing.

WarningMentions a paste, webhook or tunnelling service often used to send data outSKILL.md:69
```
gooeyToast.promise(promise, data)   // loading → success/error
```
WarningMentions a paste, webhook or tunnelling service often used to send data outSKILL.md:115
```
gooeyToast.promise(saveData(), {
```

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 anl331/goey-toast at commit be6bd88, republished under its MIT licence (© anl331). 286 words, ~1,337 tokens.

Download SKILL.mdSave it as .claude/skills/goey-toast/SKILL.md (or your agent's skills folder).

name: goey-toast
description: Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion. Use when adding toast/notification UI to a React app (success/error/warning/info/promise toasts), or when the user mentions goey-toast / gooey toast.
license: MIT

goey-toast

A gooey, morphing React toast component built on Sonner with Framer Motion animations (pill → blob → pill). Use this skill to install the package and write correct usage code in any React project.

When to use

Adding toast / notification UI to a React app (React >= 18).
The user mentions "goey-toast", "gooey toast", or wants animated/morphing toasts.
Replacing raw sonner toasts with the gooey variant.

Install

bash

npm install goey-toast react react-dom framer-motion

Peer deps (must exist in the host app):

Package	Version
react	>= 18.0.0
react-dom	>= 18.0.0
framer-motion	>= 10.0.0

shadcn/ui projects

bash

npx shadcn@latest add https://goey-toast.vercel.app/r/goey-toaster.json

Installs a wrapper at components/ui/goey-toaster.tsx and auto-installs deps.

Two required steps to render toasts

Mount <GooeyToaster /> once near the app root.
Import the stylesheet once at the entry point. Without it toasts render unstyled.

tsx

import { GooeyToaster, gooeyToast } from 'goey-toast'
import 'goey-toast/styles.css' // REQUIRED — import once at app entry

function App() {
  return (
    <>
      <GooeyToaster position="bottom-right" />
      <button onClick={() => gooeyToast.success('Saved!')}>Save</button>
    </>
  )
}

API: `gooeyToast`

gooeyToast(title, options?)         // default (neutral)
gooeyToast.success(title, options?) // green
gooeyToast.error(title, options?)   // red
gooeyToast.warning(title, options?) // yellow
gooeyToast.info(title, options?)    // blue
gooeyToast.promise(promise, data)   // loading → success/error
gooeyToast.update(id, options)      // update an existing toast in-place
gooeyToast.dismiss(idOrFilter?)     // dismiss one, by type, or all

Common options (2nd arg)

Option	Type	Notes
`description`	`ReactNode`	String or component body
`action`	`GooeyToastAction`	`{ label, onClick, successLabel? }`
`icon`	`ReactNode`	Custom icon (`null` clears in `update`)
`duration`	`number`	ms
`id`	`string \| number`	Stable id (needed for `update`)
`fillColor` / `borderColor` / `borderWidth`	colors / px	Blob styling
`spring` / `bounce`	`boolean` / `number`	bounce `0.05`–`0.8`, default `0.4`
`preset`	`'smooth' \| 'bouncy' \| 'subtle' \| 'snappy'`	Animation preset
`showProgress`	`boolean`	Countdown bar
`showTimestamp`	`boolean`	Default `true`
`onDismiss` / `onAutoClose`	`(id) => void`	Dismiss callbacks

`<GooeyToaster />` key props

Recipes

Description + action button

tsx

gooeyToast.info('Share link ready', {
  description: 'Your link has been generated.',
  action: {
    label: 'Copy',
    onClick: () => navigator.clipboard.writeText(url),
    successLabel: 'Copied!', // morphs back to pill after click
  },
})

Promise toast

tsx

gooeyToast.promise(saveData(), {
  loading: 'Saving...',
  success: (data) => `Saved ${data.count} items`,
  error: (e) => `Failed: ${String(e)}`,
  description: { success: 'All changes synced.', error: 'Try again later.' },
  action: { error: { label: 'Retry', onClick: () => retry() } },
})

Update in place

tsx

const id = gooeyToast('Uploading...', { icon: <Spinner /> })
gooeyToast.update(id, { title: 'Done', type: 'success', icon: null })

Dismiss by filter

tsx

gooeyToast.dismiss(id)                       // one
gooeyToast.dismiss({ type: 'error' })        // all errors
gooeyToast.dismiss({ type: ['error','warning'] })
gooeyToast.dismiss()                         // all

Gotchas

Forgetting import 'goey-toast/styles.css' → unstyled toasts. Most common bug.
<GooeyToaster /> must be mounted exactly once, near the root.
update() requires the same id returned from the create call.
framer-motion is a peer dep — install it explicitly.
Backward-compat aliases exist (GoeyToaster, goeyToast) for v0.2.x; prefer the double-o names (GooeyToaster, gooeyToast).

Reference

Live demo & docs: https://goey-toast.vercel.app
npm: https://www.npmjs.com/package/goey-toast

Files

Just SKILL.md in skills/goey-toast of anl331/goey-toast.

Open the folder on GitHubat commit be6bd88

Compare with similar skills

Goey Toast 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.

Goey Toast compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Goey Toast this skillanl331/goey-toast	1.3k	—	~1.3k	Automated safety check: Warn	MIT	1 mo ago
Motion Dev Animations199-biotechnologies/motion-dev-animations-skill	133	1 repos	~2.8k	Automated safety check: Notes	MIT	6 mo ago
Animated React Component LibrariesHainrixz/editor-pro-max	264	1 repos	~5.7k	Automated safety check: Pass	Custom licence	6 mo ago
Animatedelphi-ai/animate-skill	113	—	~1.3k	Automated safety check: Pass	None	8 mo ago
Awwwards-Level React AnimationsHainrixz/editor-pro-max	264	—	~4.4k	Automated safety check: Pass	Custom licence	6 mo ago
Frontend UI Dark TSmicrosoft/skills	3.1k	5 repos	~3.6k	Automated safety check: Pass	MIT	yesterday

Similar skills

Motion Dev Animations
199-biotechnologies/motion-dev-animations-skill
Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.
133 GitHub starsUsed in 1 repo~2.8k tokens
Frontend & DesignAuto-check: notes
Animated React Component Libraries
Hainrixz/editor-pro-max
Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.
264 GitHub starsUsed in 1 repo~5.7k tokens
Frontend & DesignAuto-check passed
Animate
delphi-ai/animate-skill
Animation patterns and best practices for Next.js/React applications.
113 GitHub stars~1.3k tokensUpdated 8 mo ago
Frontend & DesignAuto-check passed
Awwwards-Level React Animations
Hainrixz/editor-pro-max
Guides React animation work with GSAP, Motion, Anime.js and Lenis for scroll effects, page transitions, text effects and generative visuals, with a library decision table.
264 GitHub stars~4.4k tokensUpdated 6 mo ago
Frontend & DesignAuto-check passed
Frontend UI Dark TS
microsoft/skills
Official
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations.
3.1k GitHub starsUsed in 5 repos~3.6k tokens
Frontend & DesignAuto-check passed
Motion
softmaple/softmaple
Animation skill for Motion (prev Framer Motion) and CSS animation.
161 GitHub stars~1.1k tokensUpdated 2 days ago
Frontend & DesignAuto-check passed

Works with

Questions about Goey Toast

What does Goey Toast do?

Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion. Goey Toast is an agent skill from anl331/goey-toast. Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion.

When should I use Goey Toast?

Goey Toast fits situations like: adding toast/notification UI to a React app (success/error/warning/info/promise toasts); the user mentions goey-toast / gooey toast.

How do I install Goey Toast in Claude Code?

Run `npx skills add anl331/goey-toast --skill goey-toast -a claude-code`. Or copy the skill folder (skills/goey-toast in anl331/goey-toast) into .claude/skills/goey-toast in your project. Claude Code loads it when a task matches its description.

How do I install Goey Toast in Codex?

Run `npx skills add anl331/goey-toast --skill goey-toast -a codex`. Or copy the skill folder (skills/goey-toast in anl331/goey-toast) into .agents/skills/goey-toast in your project. Codex loads it when a task matches its description.

Can I use Goey Toast 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 anl331/goey-toast --skill goey-toast -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/goey-toast, .gemini/skills/goey-toast, .github/skills/goey-toast and .opencode/skills/goey-toast in your project.

What does Goey Toast need to run?

Going by SKILL.md and its folder, Goey Toast needs the command-line tools its instructions call (npm and npx). Our summary lists: Node.js.

Does Goey Toast access the network?

SKILL.md names 2 domains. In commands or code: goey-toast.vercel.app; the agent is likely to contact it when it follows the instructions. As links in the text: npmjs.com. This is read from the text; nothing was executed.

Is Goey Toast safe to install?

Our automated static check of SKILL.md flagged 2 warning(s): mentions a paste, webhook or tunnelling service often used to send data out. Read the flagged lines before installing; the check is not a guarantee either way.

What licence does Goey Toast use?

Goey Toast is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Goey Toast use?

About 1.3k tokens (SKILL.md is roughly 5.3k 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 Goey Toast?

Skills that share tags, products or a category with Goey Toast: Motion Dev Animations (199-biotechnologies/motion-dev-animations-skill, 133 stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 264 stars), Animate (delphi-ai/animate-skill, 113 stars) and Awwwards-Level React Animations (Hainrixz/editor-pro-max, 264 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Goey Toast?

anl331 (a GitHub user) maintains it in anl331/goey-toast, which has 1,334 GitHub stars. The repository was last updated on September 5, 2026.

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

Install Goey Toast

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

goey-toast

When to use

Install

shadcn/ui projects

Two required steps to render toasts

API: gooeyToast

Common options (2nd arg)

<GooeyToaster /> key props

Recipes

Description + action button

Promise toast

Update in place

Dismiss by filter

Gotchas

Reference

Files

Compare with similar skills

Similar skills

Motion Dev Animations

Animated React Component Libraries

Animate

Awwwards-Level React Animations

Frontend UI Dark TS

Motion

Related

Questions about Goey Toast

API: `gooeyToast`

`<GooeyToaster />` key props