syncfusion-maui-toolkit-shimmer

Q: How do I install syncfusion-maui-toolkit-shimmer?

Run npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-shimmer 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-maui-toolkit-shimmer/ (personal) or .claude/skills/syncfusion-maui-toolkit-shimmer/ (project).

by syncfusionFrontend & Design

Implements Syncfusion .NET MAUI Shimmer (SfShimmer) loading placeholder effects. Use when implementing shimmer or skeleton loading animations, loading placeholders, or content loading indicators in .NET MAUI apps. Covers shimmer types (CirclePersona, Article, Feed, Shopping), custom shimmer views, wave animation, and customization.

Installs: 45
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-shimmer

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-maui-toolkit-shimmer automatically when relevant.
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 .NET MAUI Shimmer (SfShimmer)

SfShimmer displays an animated shimmer placeholder while content loads in the background, improving perceived app responsiveness. It supports 7 built-in layout types, fully custom views using ShimmerView shapes, and extensive wave animation customization.

When to Use This Skill

Use this skill when users need to:

Add a loading placeholder before data or content is fetched
Show a skeleton screen while an API call completes
Replace a spinner with a content-shaped loading animation
Customize shimmer colors, wave direction, or animation speed
Build a custom shimmer layout that mirrors your actual UI

Component Overview

The SfShimmer control provides:

Built-in Layout Types: 7 pre-designed shimmer patterns (CirclePersona, SquarePersona, Profile, Article, Video, Feed, Shopping)
Custom View Support: Build custom shimmer layouts using ShimmerView with Circle, Rectangle, and RoundedRectangle shapes
Wave Animation Control: Configurable wave direction (5 options), width, and animation duration
Color Customization: Independent Fill (background) and WaveColor (highlight) properties
Repeat Patterns: RepeatCount property for vertical stacking of shimmer layouts
Content Toggle: IsActive property for seamless switching between shimmer and loaded content
Flexible Integration: Works with any .NET MAUI View as child content
Performance Optimized: Lightweight animation that improves perceived app responsiveness

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installing Syncfusion.Maui.Toolkit NuGet package
Registering the handler in MauiProgram.cs
Adding SfShimmer in XAML and C#
Toggling between shimmer and content with IsActive

Built-in View Types

📄 Read: references/built-in-views.md

7 built-in ShimmerType values: CirclePersona, SquarePersona, Profile, Article, Video, Feed, Shopping
Setting the Type property in XAML and C#
Default type and when to choose each layout

Custom Views

📄 Read: references/custom-views.md

Building a custom shimmer layout with CustomView and BoxView
Using ShimmerView with ShapeType (Circle, Rectangle, RoundedRectangle)
Full XAML and C# examples for complex custom layouts

Customization & Animation

📄 Read: references/customization.md

Fill — shimmer background color
WaveColor — shimmer highlight color
WaveWidth — width of the wave highlight
WaveDirection — 5 directions (Default, LeftToRight, RightToLeft, TopToBottom, BottomToTop)
RepeatCount — repeat the shimmer pattern vertically
AnimationDuration — control animation speed in milliseconds

FAQ

What does the syncfusion-maui-toolkit-shimmer skill do?

How do I install syncfusion-maui-toolkit-shimmer?

Run npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-shimmer 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-maui-toolkit-shimmer/ (personal) or .claude/skills/syncfusion-maui-toolkit-shimmer/ (project).

Which AI agents can use syncfusion-maui-toolkit-shimmer?

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-maui-toolkit-shimmer 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-maui-toolkit-shimmer?

It is published by syncfusion in syncfusion/maui-toolkit-ui-components-skills. It has 45 recorded installs.