{"id":"52d52bce-bb97-499d-812c-1306172e306c","shortId":"r2Xevr","kind":"skill","title":"syncfusion-maui-cards","tagline":"Implements Syncfusion .NET MAUI Cards (SfCards) - dismissible card views and swipeable card stacks. Use when working with cards, card views, card layouts, swipeable cards, dismissible cards, or card stacks in .NET MAUI. Covers card customization, card events, card data binding, a","description":"# Implementing .NET MAUI Cards (SfCards)\n\nThe Syncfusion .NET MAUI Cards control, which provides both dismissible single card views (`SfCardView`) and swipeable card stacks (`SfCardLayout`). This skill covers installation, card creation, swipe gestures, customization, data binding, events, and modern visual effects.\n\n## When to Use This Skill\n\nUse this skill when the user needs to:\n\n- **Create dismissible card views** - Single cards that can be swiped away (left/right)\n- **Build card stacks** - Multiple stacked cards with swipe navigation\n- **Implement swipe gestures** - Cards that respond to swipe in four directions (left, right, top, bottom)\n- **Display card-based UI** - Visual card containers for content organization\n- **Add interactive cards** - Cards with tap events, dismiss events, and state management\n- **Bind data to cards** - Dynamically generate cards from data collections using BindableLayout\n- **Customize card appearance** - Borders, corners, indicators, colors, and glass effects\n- **Handle card events** - Tapped, dismissing, dismissed, index changing events\n\nThis skill is specifically for Syncfusion's .NET MAUI Cards control (SfCardView and SfCardLayout), not generic card layouts or other card libraries.\n\n## Component Overview\n\nThe Syncfusion .NET MAUI Cards control provides two main components:\n\n1. **SfCardView** - A single card that can optionally be dismissed by swiping\n2. **SfCardLayout** - A container for stacking multiple SfCardView items with swipe navigation\n\n**Key Capabilities:**\n- Swipe-to-dismiss functionality\n- Multi-directional swipe support (left, right, top, bottom)\n- Visual customization (borders, corners, indicators)\n- Programmatic card dismissal\n- Data binding with BindableLayout\n- Comprehensive event handling\n- Modern liquid glass effect (.NET 10+)\n\n## Documentation and Navigation Guide\n\n### Getting Started\n📄 **Read:** [references/getting-started.md](references/getting-started.md)\n\nRead this reference when the user needs to:\n- Install the Syncfusion.Maui.Cards NuGet package\n- Register Syncfusion handlers in MauiProgram.cs\n- Create their first SfCardView\n- Understand basic XAML and C# implementation patterns\n\n### Card View Features\n📄 **Read:** [references/card-views.md](references/card-views.md)\n\nRead this reference when the user works with single cards and needs:\n- SfCardView component overview and usage\n- SwipeToDismiss property for swipe-away functionality\n- IsDismissed property for programmatic dismissal\n- FadeOutOnSwiping visual effect\n- Single card implementation patterns\n- Standalone card scenarios\n\n### Card Layout Features\n📄 **Read:** [references/card-layouts.md](references/card-layouts.md)\n\nRead this reference when the user needs card stacks with:\n- SfCardLayout component (multiple stacked cards)\n- ShowSwipedCard property for edge display\n- VisibleIndex property for card navigation\n- SwipeDirection configuration (Left, Right, Top, Bottom)\n- Multiple card management\n- Swipe gesture navigation between cards\n\n### Customization and Styling\n📄 **Read:** [references/customization.md](references/customization.md)\n\nRead this reference when the user wants to customize:\n- BorderColor, BorderWidth, CornerRadius properties\n- Background colors and gradients\n- Indicator customization (color, thickness, position)\n- FadeOutOnSwiping effect\n- Advanced visual styling\n- Custom card designs and themes\n\n### Data Binding with BindableLayout\n📄 **Read:** [references/data-binding.md](references/data-binding.md)\n\nRead this reference when the user needs to:\n- Generate cards dynamically from data collections\n- Use BindableLayout with SfCardLayout\n- Set up ViewModels and data sources\n- Configure ItemsSource and ItemTemplate\n- Create data-driven card interfaces\n- Bind card properties to data models\n\n### Events and Interactions\n📄 **Read:** [references/events.md](references/events.md)\n\nRead this reference when the user needs to handle:\n- Tapped event (card tap detection)\n- VisibleIndexChanging event (before card changes, with Cancel support)\n- VisibleIndexChanged event (after card changes)\n- Dismissing event (before dismiss, with Cancel support)\n- Dismissed event (after dismiss completes)\n- Event handler implementation and scenarios\n\n### Liquid Glass Effect\n📄 **Read:** [references/liquid-glass-effect.md](references/liquid-glass-effect.md)\n\nRead this reference when the user wants:\n- Modern translucent glass effect\n- EnableLiquidGlassEffect property usage\n- Platform requirements (macOS 26+, iOS 26+, .NET 10)\n- Background configuration for glass appearance\n- Sleek, modern card designs","tags":["syncfusion","maui","cards","components","skills","agent-skills"],"capabilities":["skill","source-syncfusion","skill-syncfusion-maui-cards","topic-agent-skills"],"categories":["maui-ui-components-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-cards","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add syncfusion/maui-ui-components-skills","source_repo":"https://github.com/syncfusion/maui-ui-components-skills","install_from":"skills.sh"}},"qualityScore":"0.476","qualityRationale":"deterministic score 0.48 from registry signals: · indexed on github topic:agent-skills · 53 github stars · SKILL.md body (4,580 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:56:05.621Z","embedding":null,"createdAt":"2026-04-18T22:15:05.433Z","updatedAt":"2026-04-22T00:56:05.621Z","lastSeenAt":"2026-04-22T00:56:05.621Z","tsv":"'1':223 '10':283,574 '2':235 '26':570,572 'add':146 'advanc':442 'appear':172,579 'away':109,350 'background':431,575 'base':138 'basic':316 'bind':44,80,158,272,451,491 'bindablelayout':169,274,453,472 'border':173,265 'bordercolor':427 'borderwidth':428 'bottom':134,262,403 'build':111 'c':319 'cancel':523,535 'capabl':248 'card':4,9,12,16,22,23,25,28,30,32,38,40,42,49,55,62,67,74,101,104,112,116,123,137,141,148,149,161,164,171,181,198,205,209,217,227,269,322,337,361,365,367,380,387,396,405,411,446,466,489,492,514,520,528,582 'card-bas':136 'chang':187,521,529 'collect':167,470 'color':176,432,437 'complet':541 'compon':211,222,341,384 'comprehens':275 'configur':399,481,576 'contain':142,238 'content':144 'control':56,199,218 'corner':174,266 'cornerradius':429 'cover':37,72 'creat':99,311,485 'creation':75 'custom':39,78,170,264,412,426,436,445 'data':43,79,159,166,271,450,469,479,487,495 'data-driven':486 'design':447,583 'detect':516 'direct':130,256 'dismiss':11,29,60,100,153,184,185,232,252,270,356,530,533,537,540 'display':135,392 'document':284 'driven':488 'dynam':162,467 'edg':391 'effect':85,179,281,359,441,549,563 'enableliquidglasseffect':564 'event':41,81,152,154,182,188,276,497,513,518,526,531,538,542 'fadeoutonswip':357,440 'featur':324,369 'first':313 'four':129 'function':253,351 'generat':163,465 'generic':204 'gestur':77,122,408 'get':288 'glass':178,280,548,562,578 'gradient':434 'guid':287 'handl':180,277,511 'handler':308,543 'implement':5,46,120,320,362,544 'index':186 'indic':175,267,435 'instal':73,301 'interact':147,499 'interfac':490 'io':571 'isdismiss':352 'item':243 'itemssourc':482 'itemtempl':484 'key':247 'layout':26,206,368 'left':131,259,400 'left/right':110 'librari':210 'liquid':279,547 'maco':569 'main':221 'manag':157,406 'maui':3,8,36,48,54,197,216 'mauiprogram.cs':310 'model':496 'modern':83,278,560,581 'multi':255 'multi-direct':254 'multipl':114,241,385,404 'navig':119,246,286,397,409 'need':97,299,339,379,463,509 'net':7,35,47,53,196,215,282,573 'nuget':304 'option':230 'organ':145 'overview':212,342 'packag':305 'pattern':321,363 'platform':567 'posit':439 'programmat':268,355 'properti':346,353,389,394,430,493,565 'provid':58,219 'read':290,293,325,328,370,373,415,418,454,457,500,503,550,553 'refer':295,330,375,420,459,505,555 'references/card-layouts.md':371,372 'references/card-views.md':326,327 'references/customization.md':416,417 'references/data-binding.md':455,456 'references/events.md':501,502 'references/getting-started.md':291,292 'references/liquid-glass-effect.md':551,552 'regist':306 'requir':568 'respond':125 'right':132,260,401 'scenario':366,546 'set':475 'sfcard':10,50 'sfcardlayout':69,202,236,383,474 'sfcardview':64,200,224,242,314,340 'showswipedcard':388 'singl':61,103,226,336,360 'skill':71,90,93,190 'skill-syncfusion-maui-cards' 'sleek':580 'sourc':480 'source-syncfusion' 'specif':192 'stack':17,33,68,113,115,240,381,386 'standalon':364 'start':289 'state':156 'style':414,444 'support':258,524,536 'swipe':76,108,118,121,127,234,245,250,257,349,407 'swipe-away':348 'swipe-to-dismiss':249 'swipeabl':15,27,66 'swipedirect':398 'swipetodismiss':345 'syncfus':2,6,52,194,214,307 'syncfusion-maui-card':1 'syncfusion.maui.cards':303 'tap':151,183,512,515 'theme':449 'thick':438 'top':133,261,402 'topic-agent-skills' 'transluc':561 'two':220 'ui':139 'understand':315 'usag':344,566 'use':18,88,91,168,471 'user':96,298,333,378,423,462,508,558 'view':13,24,63,102,323 'viewmodel':477 'visibleindex':393 'visibleindexchang':517,525 'visual':84,140,263,358,443 'want':424,559 'work':20,334 'xaml':317","prices":[{"id":"64eb804e-8aea-4510-bdc7-10ce664cd1ef","listingId":"52d52bce-bb97-499d-812c-1306172e306c","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"syncfusion","category":"maui-ui-components-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:15:05.433Z"}],"sources":[{"listingId":"52d52bce-bb97-499d-812c-1306172e306c","source":"github","sourceId":"syncfusion/maui-ui-components-skills/syncfusion-maui-cards","sourceUrl":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-cards","isPrimary":false,"firstSeenAt":"2026-04-18T22:15:05.433Z","lastSeenAt":"2026-04-22T00:56:05.621Z"}],"details":{"listingId":"52d52bce-bb97-499d-812c-1306172e306c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"syncfusion","slug":"syncfusion-maui-cards","github":{"repo":"syncfusion/maui-ui-components-skills","stars":53,"topics":["agent-skills"],"license":null,"html_url":"https://github.com/syncfusion/maui-ui-components-skills","pushed_at":"2026-04-08T07:27:37Z","description":"Skills for Syncfusion .NET MAUI components. Enable AI-assisted development with comprehensive documentation, code examples, and best practices for 100+ UI controls including DataGrid, Charts, Scheduler, and more.","skill_md_sha":"9a18c4fa624d845ae08be1cadd21fe72f3d5428c","skill_md_path":"skills/syncfusion-maui-cards/SKILL.md","default_branch":"master","skill_tree_url":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-cards"},"layout":"multi","source":"github","category":"maui-ui-components-skills","frontmatter":{"name":"syncfusion-maui-cards","description":"Implements Syncfusion .NET MAUI Cards (SfCards) - dismissible card views and swipeable card stacks. Use when working with cards, card views, card layouts, swipeable cards, dismissible cards, or card stacks in .NET MAUI. Covers card customization, card events, card data binding, and interactive card components with swipe functionality."},"skills_sh_url":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-cards"},"updatedAt":"2026-04-22T00:56:05.621Z"}}