Agent skill

Maui Graphics Drawing

by davidortinau in davidortinau/maui-skills

Guidance for custom drawing with Microsoft.Maui.Graphics, GraphicsView, canvas drawing operations, shapes, paths, text rendering, image drawing, shadows, clipping, and canvas state management.

MITAuto-check passedMobile

Install Maui Graphics Drawing

skills CLI
$ npx skills add davidortinau/maui-skills --skill maui-graphics-drawing -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install davidortinau/maui-skills maui-graphics-drawing --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/davidortinau/maui-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/maui-skills/skills/maui-graphics-drawing .claude/skills/maui-graphics-drawing && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
maui-graphics-drawing
GitHub stars
175
Token cost
~1.3k tokens
SKILL.md length
326 words
Files
2 (incl. references)
Skills in repo
41
Repo updated
First seen
Licence
MIT

At a glance

Guidance for custom drawing with Microsoft.Maui.Graphics, GraphicsView, canvas drawing operations, shapes, paths, text rendering, image drawing, shadows, clipping, and canvas state management.

  • : custom drawing
  • SKILL.md covers Common gotchas, Canvas state — always pair…, Triggering redraws and Performance tips, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Microsoft.Maui.Graphics

What it does

Maui Graphics Drawing is an agent skill from davidortinau/maui-skills. Guidance for custom drawing with Microsoft.Maui.Graphics, GraphicsView, canvas drawing operations, shapes, paths, text rendering, image drawing, shadows, clipping, and canvas state management. USE FOR: "custom drawing", "GraphicsView", "canvas drawing", "draw shapes", "draw path", "draw text", "ICanvas", "IDrawable", "shadows", "clipping", "Microsoft.Maui.Graphics". DO NOT USE FOR: view animations (use maui-animations), gesture handling on drawn elements (use maui-gestures), or app icons (use…

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/graphics-drawing-api.md`).

It sits in Mobile, covering Cross-platform mobile apps. The repository describes itself as: .NET MAUI skills for GitHub Copilot and Claude Code. The licence is MIT.

When your agent uses it

  • : custom drawing
  • Microsoft.Maui.Graphics
  • : view animations (use maui-animations)
  • Gesture handling on drawn elements (use maui-gestures)

Example prompts

  • “custom drawing”
  • “GraphicsView”
  • “canvas drawing”
  • “/maui-graphics-drawing”

What it can do on your machine

Read from SKILL.md and the folder at commit 79bb4bf. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are csharp).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Maui Graphics Drawing loads about 1.3k tokens when it runs, and up to ~2.3k if it reads all its reference files. Until then it costs about 136 tokens; SKILL.md has 326 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~136
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from davidortinau/maui-skills at commit 79bb4bf, republished under its MIT licence (© davidortinau). 326 words, ~1,256 tokens.

Download SKILL.mdSave it as .claude/skills/maui-graphics-drawing/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
maui-graphics-drawing
description
Guidance for custom drawing with Microsoft.Maui.Graphics, GraphicsView, canvas drawing operations, shapes, paths, text rendering, image drawing, shadows, clipping, and canvas state management. USE FOR: "custom drawing", "GraphicsView", "canvas drawing", "draw shapes", "draw path", "draw text", "ICanvas", "IDrawable", "shadows", "clipping", "Microsoft.Maui.Graphics". DO NOT USE FOR: view animations (use maui-animations), gesture handling on drawn elements (use maui-gestures), or app icons (use maui-app-icons-splash).

.NET MAUI Graphics Drawing

Common gotchas

IssueFix
Nothing draws on screenEnsure Drawable is set on GraphicsView and the control has non-zero HeightRequest/WidthRequest
State bleeds between shapesWrap isolated sections in SaveState() / RestoreState() pairs
Shadows stick to later drawsCall canvas.SetShadow(SizeF.Zero, 0, null) after drawing the shadowed element
Clipping never resetsClipping is cumulative per frame — use SaveState/RestoreState around clip regions
UI freezes during drawingNever do I/O, network, or heavy computation inside Draw() — it runs on the UI thread

Canvas state — always pair Save/Restore

⚠️ Unpaired SaveState/RestoreState causes state leaks across draw calls.

csharp
// ✅ Correct — isolated state
canvas.SaveState();
canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 6;
canvas.DrawRectangle(10, 10, 80, 80);
canvas.RestoreState();
// Stroke reverts to previous values

// ❌ Wrong — state leaks to everything drawn after
canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 6;
canvas.DrawRectangle(10, 10, 80, 80);
// Every subsequent shape is now red with size 6

Saves/restores: stroke, fill, font, shadow, clip, and transforms. Nest calls for layered isolation.

Triggering redraws

csharp
// ✅ Correct — queue a redraw
graphicsView.Invalidate();

// ❌ Wrong — never call Draw() directly
myDrawable.Draw(canvas, rect);
  • Invalidate() queues a redraw; the framework calls IDrawable.Draw on the next frame.
  • ⚠️ Avoid calling Invalidate() in a tight loop — batch state changes, then invalidate once.

Performance tips

  • Keep Draw() fast — pre-compute paths and data outside the draw method; Draw() is called on every frame.
  • Reuse PathF objects — create them once, store as fields, draw repeatedly.
  • Use MeasureFirstItem-style thinking — if drawing many identical items, calculate dimensions once.
  • Minimize allocations — avoid new PathF() inside Draw() when the path doesn't change.
csharp
// ✅ Pre-computed path (field)
private readonly PathF _starPath = BuildStarPath();

public void Draw(ICanvas canvas, RectF dirtyRect)
{
    canvas.FillPath(_starPath);
}

// ❌ Allocating every frame
public void Draw(ICanvas canvas, RectF dirtyRect)
{
    var path = new PathF();
    // ...build path every frame...
    canvas.FillPath(path);
}

Shadows and clipping — sticky state pitfalls

Shadows apply to all subsequent draws until explicitly removed. Clips accumulate and can only be undone with RestoreState():

csharp
// ✅ Shadow: remove after use
canvas.SetShadow(new SizeF(5, 5), 4, Colors.Gray);
canvas.FillRectangle(20, 20, 100, 60);
canvas.SetShadow(SizeF.Zero, 0, null); // ← must remove

// ✅ Clip: isolate with SaveState/RestoreState
canvas.SaveState();
canvas.ClipRectangle(20, 20, 100, 100);
canvas.FillRectangle(0, 0, 200, 200); // clipped
canvas.RestoreState();                  // clip removed

// ❌ Clip persists — everything after is also clipped
canvas.ClipRectangle(20, 20, 100, 100);
canvas.FillEllipse(150, 150, 50, 50); // unintentionally clipped!

Set properties BEFORE draw calls

csharp
// ✅ Properties then draw
canvas.StrokeColor = Colors.Blue;
canvas.DrawRectangle(10, 10, 100, 50);

// ❌ Setting after draw has no effect on previous shape
canvas.DrawRectangle(10, 10, 100, 50);
canvas.StrokeColor = Colors.Blue;

Decision framework

NeedApproach
Simple shapes / static graphicsSingle IDrawable, draw in Draw()
Animated graphicsUpdate state externally, call Invalidate() from timer/animation
Complex layered sceneMultiple SaveState/RestoreState blocks, or separate drawables
Hit testing on drawn elementsTrack shape bounds manually — GraphicsView has no built-in hit test on drawn content
Platform-specific renderingUse handlers/platform code; Microsoft.Maui.Graphics is cross-platform only

Quick checklist

  • GraphicsView has Drawable set and non-zero size
  • Draw() is fast — no I/O, no heavy allocations
  • Every SaveState() has a matching RestoreState()
  • Shadows removed with SetShadow(SizeF.Zero, 0, null) after use
  • Clips wrapped in SaveState/RestoreState blocks
  • Properties set before the draw call they apply to
  • Invalidate() used instead of calling Draw() directly

© davidortinau, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in plugins/maui-skills/skills/maui-graphics-drawing of davidortinau/maui-skills.

  • SKILL.md
  • references/graphics-drawing-api.md

Open the folder on GitHubat commit 79bb4bf

Compare with similar skills

Maui Graphics Drawing next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Maui Graphics Drawing compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Maui Graphics Drawing this skilldavidortinau/maui-skills175—~1.3kAutomated safety check: PassMIT
React Native Best Practicesvercel-labs/openreview1.7k17 repos~1.1kAutomated safety check: PassMIT
Compose Multiplatform Patternsmonta-app/ocpp-emulator1805 repos~2kAutomated safety check: PassApache-2.0
Creating Reanimated Animationsgluestack/gluestack-ui5.3k—~2.4kAutomated safety check: PassNone
Uni-app Components and APIsfeige996/unibest2.3k—~1.6kAutomated safety check: PassMIT
Add Flutter Docusaurus Localematthiasn/lotti1.2k—~1.2kAutomated safety check: PassGPL-3.0

Similar skills

  • React Native Best Practices

    vercel-labs/openreview

    Official

    A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.

    1.7k GitHub starsUsed in 17 repos~1.1k tokens
    MobileAuto-check passed
  • Compose Multiplatform Patterns

    monta-app/ocpp-emulator

    Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.

    180 GitHub starsUsed in 5 repos~2k tokens
    MobileAuto-check passed
  • Creating Reanimated Animations

    gluestack/gluestack-ui

    Generate React Native Reanimated animation code for React Native apps.

    5.3k GitHub stars~2.4k tokensUpdated 1 mo ago
    MobileAuto-check passed
  • Gives per-component and per-API examples, reference specs and compatibility notes for building cross-platform uni-app apps, mirroring the official documentation.

    2.3k GitHub stars~1.6k tokensUpdated 26 days ago
    MobileAuto-check passed
  • Add, complete, or audit a locale across a Flutter application's ARB catalogs and a localized Docusaurus manual, including generated localization code, locale selectors, native platform declarations…

    1.2k GitHub stars~1.2k tokensUpdated today
    MobileAuto-check passed
  • Jetpack Compose Expert

    aldefy/compose-skill

    Guides Jetpack Compose and Compose Multiplatform work across Android, Desktop, iOS and web, plus Android TV, Material 3 motion, paging, navigation and design-to-code.

    596 GitHub stars~4.8k tokensUpdated 2 mo ago
    MobileAuto-check passed

More from davidortinau/maui-skills

All 41 skills in this repo
  • Maui Hot Reload Diagnostics

    davidortinau/maui-skills

    Diagnose and troubleshoot .NET MAUI Hot Reload issues (C Hot Reload, XAML Hot Reload, Blazor Hybrid).

    175 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed
  • Maui Accessibility

    davidortinau/maui-skills

    Guide for making .NET MAUI apps accessible — screen reader support via SemanticProperties, heading levels, AutomationProperties visibility control, programmatic focus and announcements, and…

    175 GitHub stars~974 tokensUpdated 3 mo ago
    Auto-check passed
  • Maui Animations

    davidortinau/maui-skills

    .NET MAUI view animations, custom animations, easing functions, rotation, scale, translation, and fade effects.

    175 GitHub stars~911 tokensUpdated 3 mo ago
    Auto-check passed
  • Maui App Icons Splash

    davidortinau/maui-skills

    .NET MAUI app icon configuration, splash screen setup, SVG to PNG conversion at build time, composed/adaptive icons, and platform-specific icon and splash screen requirements for Android, iOS, Mac…

    175 GitHub stars~995 tokensUpdated 3 mo ago
    Auto-check passed
  • Maui App Lifecycle

    davidortinau/maui-skills

    .NET MAUI app lifecycle guidance covering the four app states (not running, running, deactivated, stopped), cross-platform Window lifecycle events, backgrounding and resume behaviour…

    175 GitHub stars~947 tokensUpdated 3 mo ago
    Auto-check passed
  • Maui Aspire

    davidortinau/maui-skills

    Guide for .NET MAUI apps consuming .NET Aspire-hosted backend services.

    175 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed

Categories

Questions about Maui Graphics Drawing

What does Maui Graphics Drawing do?

Guidance for custom drawing with Microsoft.Maui.Graphics, GraphicsView, canvas drawing operations, shapes, paths, text rendering, image drawing, shadows, clipping, and canvas state management. Maui Graphics Drawing is an agent skill from davidortinau/maui-skills.Graphics, GraphicsView, canvas drawing operations, shapes, paths, text rendering, image drawing, shadows, clipping, and canvas state management.

When should I use Maui Graphics Drawing?

Maui Graphics Drawing fits situations like: : custom drawing; microsoft.Maui.Graphics; : view animations (use maui-animations); gesture handling on drawn elements (use maui-gestures).

How do I install Maui Graphics Drawing in Claude Code?

Run `npx skills add davidortinau/maui-skills --skill maui-graphics-drawing -a claude-code`. Or copy the skill folder (plugins/maui-skills/skills/maui-graphics-drawing in davidortinau/maui-skills) into .claude/skills/maui-graphics-drawing in your project. Claude Code loads it when a task matches its description.

How do I install Maui Graphics Drawing in Codex?

Run `npx skills add davidortinau/maui-skills --skill maui-graphics-drawing -a codex`. Or copy the skill folder (plugins/maui-skills/skills/maui-graphics-drawing in davidortinau/maui-skills) into .agents/skills/maui-graphics-drawing in your project. Codex loads it when a task matches its description.

Can I use Maui Graphics Drawing in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add davidortinau/maui-skills --skill maui-graphics-drawing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/maui-graphics-drawing, .gemini/skills/maui-graphics-drawing, .github/skills/maui-graphics-drawing and .opencode/skills/maui-graphics-drawing in your project.

What does Maui Graphics Drawing need to run?

SKILL.md names no scripts, command-line tools or credentials: Maui Graphics Drawing is instructions for the agent only.

Does Maui Graphics Drawing access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Maui Graphics Drawing safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Maui Graphics Drawing use?

Maui Graphics Drawing is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Maui Graphics Drawing use?

About 1.3k tokens (SKILL.md is roughly 5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.1k tokens, read only when the agent opens those files.

What are the alternatives to Maui Graphics Drawing?

Skills that share tags, products or a category with Maui Graphics Drawing: React Native Best Practices (vercel-labs/openreview, 1.7k stars), Compose Multiplatform Patterns (monta-app/ocpp-emulator, 180 stars), Creating Reanimated Animations (gluestack/gluestack-ui, 5.3k stars) and Uni-app Components and APIs (feige996/unibest, 2.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Maui Graphics Drawing?

davidortinau (a GitHub user) maintains it in davidortinau/maui-skills, which has 175 GitHub stars. The repository holds 41 skills in this directory. The repository was last updated on July 6, 2026.

Source: davidortinau/maui-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.