MCPInstall

syncfusion-aspnetcore-notifications

by syncfusionFrontend & Design

Implement Syncfusion ASP.NET Core notification components including Toast, Message, and Skeleton. Use this skill when building toast notifications, brief auto-dismissing alerts, snackbar messages, contextual Message components with severity levels, or Skeleton loading placeholders with shimmer animations. This skill covers positioning, action buttons, severity variants, animation effects, and shape options.

Installs
100
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-notifications
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads syncfusion-aspnetcore-notifications automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing Syncfusion ASP.NET Core Notifications

Toast

The Toast component displays brief, auto-dismissing notification messages on screen. It supports positioning, animations, action buttons, progress bars, templates, timeout control, and accessibility—covering simple alerts to rich notification UIs.

Do NOT skip this skill if users mention: notifications, alerts, snackbar, brief messages, dismiss popup, toast utility, progress notification, action button popup.

Component Overview

Key Capabilities

FeatureDescription
Types / cssClassPredefined styles: e-toast-success, e-toast-info, e-toast-warning, e-toast-danger
PositionX: Left/Center/Right, Y: Top/Bottom or custom pixel/percent values
TimeoutAuto-dismiss via timeOut; extendedTimeout for hover delay; 0 for static toast
Progress BarVisual countdown bar with showProgressBar; direction via progressDirection
Action ButtonsAdd button models with click handlers via buttons / e-toast-buttonmodelprops
TemplatesFull custom HTML via template property or <e-content-template> tag
AnimationCustom show/hide animation effects via animation settings
Close ButtonManual close via showCloseButton
Multiple ToastsSeparate toast instances per position; newestOnTop ordering
Toast UtilityToastUtility.show() for zero-markup quick toasts
AccessibilityWAI-ARIA role="alert", WCAG 2.2 AA, Section 508, RTL support

NuGet Package

Install-Package Syncfusion.EJ2.AspNet.Core

Setup (one-time)

~/Pages/_ViewImports.cshtml

@addTagHelper *, Syncfusion.EJ2

~/Pages/Shared/_Layout.cshtml — inside <head>:

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>

And before </body>:

<ejs-scripts></ejs-scripts>

Documentation & Navigation Guide

📖 Getting Started

📄 Read: references/getting-started.md

  • Installation and NuGet setup
  • Tag helper registration
  • Basic toast with title and content
  • Triggering toast via JavaScript show() method
  • First working example

📖 Configuration & Options

📄 Read: references/configuration.md

  • Title and content setup
  • Custom target container
  • Close button (showCloseButton)
  • Progress bar (showProgressBar, progressDirection)
  • Newest-on-top ordering (newestOnTop)
  • Width and height customization
  • HTML sanitizer (enableHtmlSanitizer)

📖 Position & Layout

📄 Read: references/position.md

  • Predefined X/Y positions (Left, Center, Right / Top, Bottom)
  • Custom pixel or percentage positions
  • Multiple toasts in different positions
  • Full-width toast with width="100%"

📖 Timeout & Lifecycle

📄 Read: references/timeout.md

  • Auto-dismiss with timeOut (milliseconds)
  • Extended hover timeout (extendedTimeout)
  • Static (persistent) toast with timeOut="0"
  • Closing toast on click/tap
  • Restricting maximum visible toasts
  • Preventing duplicate toasts

📖 Action Buttons

📄 Read: references/action-buttons.md

  • Adding buttons with e-toast-buttonmodelprops
  • Button click handlers
  • Dismissing toast from a button click

📖 Templates & Animation

📄 Read: references/templates-animation.md

  • Static HTML template via template property
  • Dynamic content template with <e-content-template>
  • Changing templates dynamically on show()
  • Custom show/hide animation effects
  • Playing audio before toast opens

📖 Toast Types & Styling

📄 Read: references/types-and-styling.md

  • Predefined types using cssClass (success, info, warning, danger)
  • CSS customization for title, content, icon, background
  • ToastUtility.show() with predefined types
  • ToastUtility.show() with full ToastModel
  • Mobile swipe-close prevention

📖 Accessibility

📄 Read: references/accessibility.md

  • WAI-ARIA role="alert"
  • WCAG 2.2 AA compliance
  • Section 508 support
  • RTL rendering (enableRtl)
  • Screen reader compatibility

📖 API Reference

📄 Read: references/api.md

  • All properties with types and defaults
  • All events (BeforeOpen, Open, Close, BeforeClose, Click, Created, Destroyed, BeforeSanitizeHtml)
  • Sub-component types (ToastPosition, ToastAnimationSettings, ToastButtonModelProp)

Quick Start Example

@* ~/Pages/Index.cshtml *@
<ejs-toast id="toast_default"
           title="Friend Request"
           content="Matt sent you a friend request."
           showCloseButton="true"
           showProgressBar="true"
           timeOut="5000">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>

<ejs-button id="showBtn" content="Show Toast" cssClass="e-btn"></ejs-button>

<script>
    setTimeout(function () {
        var toast = document.getElementById('toast_default').ej2_instances[0];
        toast.target = document.body;
        toast.show();
    }, 500);

    document.getElementById('showBtn').addEventListener('click', function () {
        var toast = document.getElementById('toast_default').ej2_instances[0];
        toast.show();
    });
</script>

Common Patterns

Pattern 1: Show Typed Notification (Success / Error / Warning / Info)

<ejs-toast id="typed_toast">
    <e-toast-position X="Right" Y="Top"></e-toast-position>
</ejs-toast>

<script>
    var toasts = [
        { title: 'Success !', content: 'Record saved successfully.', cssClass: 'e-toast-success' },
        { title: 'Error !',   content: 'Failed to save record.',    cssClass: 'e-toast-danger'  },
        { title: 'Warning !', content: 'Unsaved changes present.',  cssClass: 'e-toast-warning' },
        { title: 'Info !',    content: 'Session expires in 5 min.', cssClass: 'e-toast-info'    }
    ];
    function showToast(index) {
        var toast = document.getElementById('typed_toast').ej2_instances[0];
        toast.target = document.body;
        toast.show(toasts[index]);
    }
</script>

Pattern 2: Toast Utility (Zero Markup)

// Predefined type — no container element needed
ejs.notifications.ToastUtility.show('Record saved successfully', 'Success', 5000);

// With full model
ejs.notifications.ToastUtility.show({
    title: 'Upload Complete',
    content: 'Your file has been uploaded.',
    timeOut: 5000,
    position: { X: 'Right', Y: 'Bottom' },
    showCloseButton: true
});

Pattern 3: Action Buttons with Close Handler

<ejs-toast id="action_toast" title="New Message" timeOut="0">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
    <e-toast-buttonmodelprops>
        <e-toast-buttonmodelprop model="ViewBag.AcceptBtn" click="onAccept"></e-toast-buttonmodelprop>
        <e-toast-buttonmodelprop model="ViewBag.DismissBtn"></e-toast-buttonmodelprop>
    </e-toast-buttonmodelprops>
</ejs-toast>

<script>
    function onAccept(e) {
        var toastEle = ej.base.closest(e.target, '.e-toast');
        document.getElementById('action_toast').ej2_instances[0].hide(toastEle);
    }
</script>

// Controller
ViewBag.AcceptBtn  = new { content = "Accept" };
ViewBag.DismissBtn = new { content = "Dismiss" };

Pattern 4: Prevent Duplicate Toast

<ejs-toast id="dup_toast" beforeOpen="onBeforeOpen" close="onClose"
           title="Alert" content="Network issue detected.">
    <e-toast-position X="Center" Y="Top"></e-toast-position>
</ejs-toast>

<script>
    var isOpen = false;
    function onBeforeOpen(e) {
        if (isOpen) { e.cancel = true; }
        else { isOpen = true; }
    }
    function onClose() { isOpen = false; }
</script>

Pattern 5: Restrict Maximum Toasts

<ejs-toast id="max_toast" beforeOpen="onBeforeOpen"
           title="Notification" content="New item added.">
    <e-toast-position X="Center" Y="Top"></e-toast-position>
</ejs-toast>

<script>
    var maxCount = 3;
    function onBeforeOpen(e) {
        var toast = document.getElementById('max_toast').ej2_instances[0];
        if (toast.element.childElementCount >= maxCount) {
            e.cancel = true;
        }
    }
</script>

Message

The Syncfusion Message component displays contextual messages with visual severity indicators—icons and colors—to communicate importance and context to end users. It supports five severity levels, three visual variants, close-icon dismissal, content templates, and full accessibility compliance.

Documentation & Navigation Guide

Getting Started

📄 Read: references/message-getting-started.md

  • NuGet installation of Syncfusion.EJ2.AspNet.Core
  • Tag helper registration in _ViewImports.cshtml
  • Stylesheet and script registration in _Layout.cshtml
  • Adding the first <ejs-message> tag helper
  • Content via content attribute or inner content
  • First working example

Severity Levels

📄 Read: references/message-severities.md

  • Five severity levels: Normal, Success, Info, Warning, Error
  • severity attribute usage and valid values
  • Visual distinctions (icons and colors per severity)
  • Choosing the right severity for your use case
  • Dynamic severity from a model value

Display Variants

📄 Read: references/message-variants.md

  • Three variants: Text (default), Outlined, Filled
  • variant attribute usage
  • Combining variant with severity
  • Visual trade-offs and when to use each

Icons and Close Icon

📄 Read: references/message-icons-and-close.md

  • Severity icon visibility: showIcon attribute (default true)
  • Disabling severity icons
  • Custom severity icons via cssClass CSS overrides
  • Close icon: showCloseIcon attribute (default false)
  • closed event handler for dismiss callbacks
  • Toggling visibility with the visible attribute

Customization and Templates

📄 Read: references/message-customization.md

  • Content alignment: left (default), center (e-content-center), right (e-content-right)
  • Custom appearance with cssClass
  • CSS-only message rendering (no JS, pure HTML + CSS)
  • Content templates: <e-content-template> child element
  • RTL support via enableRtl
  • Persistence with enablePersistence

Accessibility

📄 Read: references/message-accessibility.md

  • WCAG 2.2, Section 508, ADA compliance
  • WAI-ARIA attributes (role="alert", aria-label)
  • Keyboard navigation (Tab, Enter/Space)
  • Screen reader support

API Reference

📄 Read: references/message-api.md

  • All properties with types, defaults, and tag attribute names
  • Events: closed, created, destroyed
  • Severity and Variant enum values
  • Tag helper syntax reference

Quick Start

@* ~/Pages/Index.cshtml *@
<ejs-message id="msg_default" content="Please read the comments carefully"></ejs-message>

Common Patterns

Severity Messages

<ejs-message id="msg_normal"  content="Editing is restricted"></ejs-message>
<ejs-message id="msg_success" content="Operation completed"  severity="Success"></ejs-message>
<ejs-message id="msg_info"    content="Read these notes"     severity="Info"></ejs-message>
<ejs-message id="msg_warning" content="Check your connection" severity="Warning"></ejs-message>
<ejs-message id="msg_error"   content="Submission failed"    severity="Error"></ejs-message>

Variant + Severity Combo

<ejs-message id="msg_ft" content="Editing is restricted" variant="Filled"></ejs-message>
<ejs-message id="msg_os" content="Operation completed"  severity="Success" variant="Outlined"></ejs-message>
<ejs-message id="msg_fe" content="Submission failed"    severity="Error"   variant="Filled"></ejs-message>

Dismissible Message

<ejs-message id="msg_dismiss"
             content="Your session will expire soon"
             severity="Warning"
             showCloseIcon="true"
             visible="true"
             closed="onMessageClosed">
</ejs-message>

<script>
    function onMessageClosed() {
        var msg = document.getElementById('msg_dismiss').ej2_instances[0];
        msg.visible = false;
    }
</script>

Content Template

<ejs-message id="msg_template" severity="Success" showCloseIcon="true" closed="onTemplateClosed">
    <e-content-template>
        <div>
            <h4>Build succeeded</h4>
            <p>All 42 tests passed.</p>
        </div>
    </e-content-template>
</ejs-message>

<script>
    function onTemplateClosed() {
        document.getElementById('msg_template').ej2_instances[0].visible = false;
    }
</script>

Skeleton

The Syncfusion Skeleton component renders animated placeholder shapes that mimic the layout of loading content. It reduces perceived load time and communicates progress to users with configurable shapes, shimmer animations, and full accessibility support.

Documentation & Navigation Guide

Getting Started

📄 Read: references/skeleton-getting-started.md

  • NuGet installation of Syncfusion.EJ2.AspNet.Core
  • Tag helper registration in _ViewImports.cshtml
  • Stylesheet and script registration in _Layout.cshtml
  • Minimal <ejs-skeleton> setup with height and width
  • All four shape types (Circle, Square, Text, Rectangle)

Shapes

📄 Read: references/skeleton-shapes.md

  • shape attribute: "Circle", "Square", "Rectangle", "Text" (default)
  • Dimension rules: width required for Circle/Square; width + height for Rectangle/Text
  • Building multi-shape card skeleton layouts
  • Choosing the right shape for avatar, image, text, and icon placeholders

Shimmer Effects

📄 Read: references/skeleton-shimmer-effect.md

  • shimmerEffect attribute: "Wave" (default), "Pulse", "Fade"
  • Visual behavior of each effect type
  • List skeleton example with Pulse effect
  • Selecting an effect to match UI context

Styles and Visibility

📄 Read: references/skeleton-styles.md

  • cssClass attribute for custom CSS overrides (wave color, background, animation speed)
  • visible attribute to toggle skeleton on/off based on loading state
  • Transition pattern: skeleton → actual content
  • CSS variable customization

Accessibility

📄 Read: references/skeleton-accessibility.md

  • WCAG 2.2, Section 508, ADA compliance
  • WAI-ARIA attributes: role="status", aria-label, aria-live, aria-busy
  • label attribute for accessible skeleton names
  • RTL support via enableRtl
  • prefers-reduced-motion respect

API Reference

📄 Read: references/skeleton-api.md

  • All properties with types, defaults, and tag attribute names
  • SkeletonType and ShimmerEffect enum values
  • Tag helper syntax reference

Quick Start

@* ~/Pages/Index.cshtml *@
<ejs-skeleton id="sk_default" height="15px" width="100%"></ejs-skeleton>

Common Patterns

Profile Card Skeleton

<div style="display: flex; align-items: center; gap: 12px; padding: 16px;">
    @* Avatar placeholder *@
    <ejs-skeleton id="sk_avatar" shape="Circle" width="48px"></ejs-skeleton>
    @* Name and subtitle placeholders *@
    <div style="flex: 1;">
        <ejs-skeleton id="sk_name" width="60%" height="15px"></ejs-skeleton>
        <br />
        <ejs-skeleton id="sk_sub"  width="40%" height="12px"></ejs-skeleton>
    </div>
</div>

Toggle Skeleton on Data Load

@{
    var loading = true;
    var content = "Data loaded successfully";
}
<div>
    @if (loading)
    {
        <ejs-skeleton id="sk_loader" width="80%" height="20px"></ejs-skeleton>
    }
    else
    {
        <p>@content</p>
    }
</div>

Shimmer List with Pulse Effect

<ul style="list-style: none; padding: 0;">
    @for (var i = 1; i <= 3; i++)
    {
        <li style="display: flex; gap: 10px; margin-bottom: 12px;">
            <ejs-skeleton id="@($"sk_av_{i}")" shape="Circle" width="40px" shimmerEffect="Pulse"></ejs-skeleton>
            <div style="flex: 1;">
                <ejs-skeleton id="@($"sk_t1_{i}")" width="70%" height="14px" shimmerEffect="Pulse"></ejs-skeleton>
                <br />
                <ejs-skeleton id="@($"sk_t2_{i}")" width="45%" height="12px" shimmerEffect="Pulse"></ejs-skeleton>
            </div>
        </li>
    }
</ul>

Key Properties at a Glance

AttributeTypeDefaultPurpose
shapeSkeletonTypeTextSkeleton shape variant
widthstring""Width; required for Circle/Square
heightstring""Height; used for Rectangle/Text
shimmerEffectShimmerEffectWaveAnimation style
visiblebooltrueShow/hide skeleton
css-classstring""Custom CSS class(es)
labelstring"Loading..."ARIA label for accessibility
enable-rtlboolfalseRight-to-left rendering
enable-persistenceboolfalsePersist state across reloads

FAQ

What does the syncfusion-aspnetcore-notifications skill do?

Implement Syncfusion ASP.NET Core notification components including Toast, Message, and Skeleton. Use this skill when building toast notifications, brief auto-dismissing alerts, snackbar messages, contextual Message components with severity levels, or Skeleton loading placeholders with shimmer animations. This skill covers positioning, action buttons, severity variants, animation effects, and shape options.

How do I install syncfusion-aspnetcore-notifications?

Run npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-notifications in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-aspnetcore-notifications/ (personal) or .claude/skills/syncfusion-aspnetcore-notifications/ (project).

Which AI agents can use syncfusion-aspnetcore-notifications?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-aspnetcore-notifications safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-aspnetcore-notifications?

It is published by syncfusion in syncfusion/aspnetcore-ui-components-skills. It has 100 recorded installs.

More from syncfusion/aspnetcore-ui-components-skills

View all →

syncfusion-aspnetcore-charts

syncfusion/aspnetcore-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design112 installs

syncfusion-aspnetcore-common

syncfusion/aspnetcore-ui-components-skills

CONFIGURATION GUIDE — Assist with Syncfusion ASP.NET Core EJ2 components setup, localization, and version compatibility. Use when: installing Syncfusion packages, configuring globalization/localization, selecting compatible versions.

Frontend & Design111 installs

syncfusion-aspnetcore-license

syncfusion/aspnetcore-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design111 installs

syncfusion-aspnetcore-grid

syncfusion/aspnetcore-ui-components-skills

Implements Syncfusion ASP.NET Core Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.

Frontend & Design110 installs

syncfusion-aspnetcore-security

syncfusion/aspnetcore-ui-components-skills

Open the skill to read its SKILL.md instructions.

Security108 installs

syncfusion-aspnetcore-gantt-chart

syncfusion/aspnetcore-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design108 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs