skills.rest
pepeccz
pepecczCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sileo-react-toasts

Implement Sileo toast notifications in React with physics-based animations and swipe-to-dismiss.

Updated Jan 7, 2026
Search Tags:#ui#react#notifications#toast#swipe#sileo#gooey
One-click install
npx skills add https://github.com/pepeccz/msi-a --skill sileo-react-toasts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sileo-react-toasts
Source: https://github.com/pepeccz/msi-a/tree/main/.agents/skills/sileo-react-toasts
Command: npx skills add https://github.com/pepeccz/msi-a --skill sileo-react-toasts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Help developers implement polished, physics-based toast notifications in React applications.

Core Features & Use Cases

  • Physics-based gooey SVG toast components with expandable details, per-state styling, and accessible live regions.
  • Quick setup with a single Toaster viewport and simple API calls (sileo.success, sileo.info, sileo.show) for synchronous and asynchronous flows.
  • Theming, per-toast overrides, and swipe-to-dismiss support to adapt to various UI requirements in React/Next.js apps.

Quick Start

Mount a Toaster at your app root and trigger toasts using the sileo API (e.g., sileo.success or sileo.info) as needed.

Frequently Asked Questions about sileo-react-toasts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement physics-based React toast notifications in my app?▼

To implement physics-based React toast notifications, mount a single Toaster viewport at your app root and trigger toasts using simple API calls like sileo.success or sileo.info. This provides polished, ephemeral feedback with gooey SVG animations and swipe-to-dismiss support.

Can I use these toast notifications in a Next.js project?▼

Yes, these toast notifications are designed for both React and Next.js projects. They support theming and per-toast overrides, allowing you to adapt accessible live regions and ephemeral feedback to various UI requirements within your Next.js application.

How do swipe-to-dismiss and expandable details work in React toasts?▼

Swipe-to-dismiss and expandable details function through physics-based gooey SVG components. This mechanism allows users to physically swipe notifications away and expand their content, providing interactive per-state styling and accessible feedback for asynchronous flows.

What's the best way to trigger synchronous and asynchronous toast flows in React?▼

The best way to trigger synchronous and asynchronous toast flows is by using the sileo API (eileo.success, sileo.info, sileo.show). These simple API calls manage ephemeral feedback and per-toast actions seamlessly within your React application.

Do I need specific dependencies to add accessible live regions for toasts?▼

No specific external dependencies are required to add accessible live regions for toasts. The Skill is self-contained, enforcing a safe structure with a root SKILL.md and optional directories to ensure accessible, ephemeral notifications without external toxicity or conflicts.

Related Skills

Explore More Software Engineering Skills→
antonyfmunozantonyfmunoz

sonner

Configure Sonner toast notifications for React async operations.

Community
Advanced
serverpodserverpod
8

shadcn_ui-sonner

Display and manage toast notifications in Flutter apps using shadcn_ui Sonner.

Official
Basic
coastdigitalgroupcoastdigitalgroup
2

accessible-toast-implementation

Implement accessible toast notifications using ARIA live regions.

Official
Advanced
starrank-softstarrank-soft

motion-advanced

Implement advanced motion patterns for React and Next.js applications.

Official
Advanced