syncfusion-maui-badge-view
Implements Syncfusion .NET MAUI Badge View (SfBadgeView) control. Use when adding badge notifications, status indicators, unread counts, or notification overlays to MAUI applications. Covers SfBadgeView setup, badge text customization, position adjustments, animations, predefined symbols, and accessibility features.
- Installs
- 208
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/syncfusion/maui-ui-components-skills --skill syncfusion-maui-badge-view- 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-badge-view 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 Badge Views in .NET MAUI
A comprehensive guide for implementing and customizing Syncfusion's .NET MAUI Badge View (SfBadgeView) control. Badge views display notification counts, status indicators, or alerts overlaid on content like buttons, images, or avatars.
When to Use This Skill
Use this skill when you need to:
- Add notification badges to buttons, icons, or profile images
- Display unread message counts or notification numbers
- Show status indicators (available, busy, away)
- Implement notification overlays with custom positioning
- Add animated badge notifications
- Create badges with predefined symbols or icons
- Customize badge appearance (colors, fonts, shapes)
- Position badges around content elements
- Implement accessible badge notifications with screen reader support
Component Overview
The Badge View (SfBadgeView) is a notification control that overlays badges on content elements. It supports:
- Text badges: Display notification counts or short text
- Icon badges: Show predefined status symbols (available, away, busy, etc.)
- Positioning: Place badges at 8 positions around content (TopRight, TopLeft, BottomRight, etc.)
- Customization: Fonts, colors, strokes, backgrounds, corner radius
- Animation: Scale animations when badge text changes
- Predefined styles: 8 color types (Primary, Error, Success, Warning, etc.)
- Accessibility: Screen reader support for badge content
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
Read this reference when you need to:
- Install Syncfusion.Maui.Core NuGet package
- Register the Syncfusion handler in MauiProgram.cs
- Create your first badge view
- Add badge text or content
- Implement basic badge notifications
- Add accessibility with ScreenReaderText
Badge Customization
📄 Read: references/customization.md
Read this reference when you need to:
- Customize font properties (size, family, attributes)
- Add stroke borders and adjust thickness
- Change text color and padding
- Apply predefined badge types (Primary, Error, Success, Warning, Info, Dark, Light, Secondary)
- Set custom background colors
- Configure corner radius for rounded badges
- Align badges (Center, Start, End)
- Handle badge alignment with different sizing scenarios
- Keep multiple badges aligned uniformly with AutoHide
- Enable font auto-scaling for accessibility
- Control badge visibility
Position Customization
📄 Read: references/positioning.md
Read this reference when you need to:
- Position badges around content (TopRight, TopLeft, BottomRight, BottomLeft, Left, Top, Right, Bottom)
- Fine-tune badge placement with Offset property
- Adjust X,Y coordinates for precise positioning
- Position badges on images, buttons, or custom controls
Animation
📄 Read: references/animation.md
Read this reference when you need to:
- Enable or disable badge animations
- Configure scale animation when badge text changes
- Adjust animation duration for faster or slower effects
- Create dynamic badge notifications
Predefined Symbols
📄 Read: references/predefined-symbols.md
Read this reference when you need to:
- Use badge icons instead of text (Add, Available, Away, Busy, Delete, Dot, Prohibit)
- Display status indicators with predefined symbols
- Understand icon vs text priority
- Implement icon-based badges on avatars or images
FAQ
What does the syncfusion-maui-badge-view skill do?
Implements Syncfusion .NET MAUI Badge View (SfBadgeView) control. Use when adding badge notifications, status indicators, unread counts, or notification overlays to MAUI applications. Covers SfBadgeView setup, badge text customization, position adjustments, animations, predefined symbols, and accessibility features.
How do I install syncfusion-maui-badge-view?
Run npx skills add https://github.com/syncfusion/maui-ui-components-skills --skill syncfusion-maui-badge-view 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-badge-view/ (personal) or .claude/skills/syncfusion-maui-badge-view/ (project).
Which AI agents can use syncfusion-maui-badge-view?
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-badge-view 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-badge-view?
It is published by syncfusion in syncfusion/maui-ui-components-skills. It has 208 recorded installs.
More from syncfusion/maui-ui-components-skills
syncfusion-maui-parallax-view
syncfusion/maui-ui-components-skills
Open the skill to read its SKILL.md instructions.
syncfusion-maui-cartesian-charts
syncfusion/maui-ui-components-skills
Open the skill to read its SKILL.md instructions.
syncfusion-maui-button
syncfusion/maui-ui-components-skills
Implements and customize Syncfusion .NET MAUI Button (SfButton) control. Use when working with MAUI buttons, SfButton implementation, button customization, or visual states. Covers button icons, background images, RTL support, Liquid Glass effects, custom button views, button styling, events, and checkable buttons.
syncfusion-maui-listview
syncfusion/maui-ui-components-skills
Implements Syncfusion® .NET MAUI ListView (SfListView). Use when displaying lists or collections of data in MAUI applications, implementing data grids, creating scrollable item lists, or adding sorting/filtering/grouping. Covers item selection, layout customization, swipe actions, pull-to-refresh, load more, and drag-drop items.
syncfusion-maui-combobox
syncfusion/maui-ui-components-skills
Open the skill to read its SKILL.md instructions.
syncfusion-maui-picker
syncfusion/maui-ui-components-skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
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-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.
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.
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.
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.
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.