React Native Best Practices
vercel-labs/openreview
A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.
Guidance for custom drawing with Microsoft.Maui.Graphics, GraphicsView, canvas drawing operations, shapes, paths, text rendering, image drawing, shadows, clipping, and canvas state management.
$ npx skills add davidortinau/maui-skills --skill maui-graphics-drawing -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install davidortinau/maui-skills maui-graphics-drawing --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "maui-graphics-drawing" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-graphics-drawing into .claude/skills/maui-graphics-drawing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "maui-graphics-drawing", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-graphics-drawingType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add davidortinau/maui-skills --skill maui-graphics-drawing -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install davidortinau/maui-skills maui-graphics-drawing --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davidortinau/maui-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/maui-skills/skills/maui-graphics-drawing .agents/skills/maui-graphics-drawing && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "maui-graphics-drawing" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-graphics-drawing into .agents/skills/maui-graphics-drawing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "maui-graphics-drawing", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add davidortinau/maui-skills --skill maui-graphics-drawing -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install davidortinau/maui-skills maui-graphics-drawing --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davidortinau/maui-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/maui-skills/skills/maui-graphics-drawing .cursor/skills/maui-graphics-drawing && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "maui-graphics-drawing" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-graphics-drawing into .cursor/skills/maui-graphics-drawing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "maui-graphics-drawing", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/davidortinau/maui-skills.git --path plugins/maui-skills/skills/maui-graphics-drawing--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add davidortinau/maui-skills --skill maui-graphics-drawing -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install davidortinau/maui-skills maui-graphics-drawing --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davidortinau/maui-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/maui-skills/skills/maui-graphics-drawing .gemini/skills/maui-graphics-drawing && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "maui-graphics-drawing" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-graphics-drawing into .gemini/skills/maui-graphics-drawing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "maui-graphics-drawing", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install davidortinau/maui-skills maui-graphics-drawingInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add davidortinau/maui-skills --skill maui-graphics-drawing -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/davidortinau/maui-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/maui-skills/skills/maui-graphics-drawing .github/skills/maui-graphics-drawing && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "maui-graphics-drawing" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-graphics-drawing into .github/skills/maui-graphics-drawing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "maui-graphics-drawing", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add davidortinau/maui-skills --skill maui-graphics-drawing -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install davidortinau/maui-skills maui-graphics-drawing --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davidortinau/maui-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/maui-skills/skills/maui-graphics-drawing .opencode/skills/maui-graphics-drawing && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "maui-graphics-drawing" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/maui-graphics-drawing into .opencode/skills/maui-graphics-drawing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "maui-graphics-drawing", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
maui-graphics-drawingGuidance 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. 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.
Read from SKILL.md and the folder at commit 79bb4bf. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from davidortinau/maui-skills at commit 79bb4bf, republished under its MIT licence (© davidortinau). 326 words, ~1,256 tokens.
.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.| Issue | Fix |
|---|---|
| Nothing draws on screen | Ensure Drawable is set on GraphicsView and the control has non-zero HeightRequest/WidthRequest |
| State bleeds between shapes | Wrap isolated sections in SaveState() / RestoreState() pairs |
| Shadows stick to later draws | Call canvas.SetShadow(SizeF.Zero, 0, null) after drawing the shadowed element |
| Clipping never resets | Clipping is cumulative per frame — use SaveState/RestoreState around clip regions |
| UI freezes during drawing | Never do I/O, network, or heavy computation inside Draw() — it runs on the UI thread |
⚠️ Unpaired SaveState/RestoreState causes state leaks across draw calls.
// ✅ 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 6Saves/restores: stroke, fill, font, shadow, clip, and transforms. Nest calls for layered isolation.
// ✅ 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.Invalidate() in a tight loop — batch state changes, then invalidate once.Draw() fast — pre-compute paths and data outside the draw method; Draw() is called on every frame.PathF objects — create them once, store as fields, draw repeatedly.MeasureFirstItem-style thinking — if drawing many identical items, calculate dimensions once.new PathF() inside Draw() when the path doesn't change.// ✅ 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 apply to all subsequent draws until explicitly removed. Clips accumulate and can only be undone with RestoreState():
// ✅ 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!// ✅ 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;| Need | Approach |
|---|---|
| Simple shapes / static graphics | Single IDrawable, draw in Draw() |
| Animated graphics | Update state externally, call Invalidate() from timer/animation |
| Complex layered scene | Multiple SaveState/RestoreState blocks, or separate drawables |
| Hit testing on drawn elements | Track shape bounds manually — GraphicsView has no built-in hit test on drawn content |
| Platform-specific rendering | Use handlers/platform code; Microsoft.Maui.Graphics is cross-platform only |
GraphicsView has Drawable set and non-zero sizeDraw() is fast — no I/O, no heavy allocationsSaveState() has a matching RestoreState()SetShadow(SizeF.Zero, 0, null) after useSaveState/RestoreState blocksInvalidate() 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
SKILL.md and 1 other file (references) in plugins/maui-skills/skills/maui-graphics-drawing of davidortinau/maui-skills.
Open the folder on GitHubat commit 79bb4bf
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Maui Graphics Drawing this skilldavidortinau/maui-skills | 175 | — | ~1.3k | Automated safety check: Pass | MIT | |
| React Native Best Practicesvercel-labs/openreview | 1.7k | 17 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Compose Multiplatform Patternsmonta-app/ocpp-emulator | 180 | 5 repos | ~2k | Automated safety check: Pass | Apache-2.0 | |
| Creating Reanimated Animationsgluestack/gluestack-ui | 5.3k | — | ~2.4k | Automated safety check: Pass | None | |
| Uni-app Components and APIsfeige996/unibest | 2.3k | — | ~1.6k | Automated safety check: Pass | MIT | |
| Add Flutter Docusaurus Localematthiasn/lotti | 1.2k | — | ~1.2k | Automated safety check: Pass | GPL-3.0 |
vercel-labs/openreview
A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.
monta-app/ocpp-emulator
Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.
gluestack/gluestack-ui
Generate React Native Reanimated animation code for React Native apps.
feige996/unibest
Gives per-component and per-API examples, reference specs and compatibility notes for building cross-platform uni-app apps, mirroring the official documentation.
matthiasn/lotti
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…
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.
davidortinau/maui-skills
Diagnose and troubleshoot .NET MAUI Hot Reload issues (C Hot Reload, XAML Hot Reload, Blazor Hybrid).
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…
davidortinau/maui-skills
.NET MAUI view animations, custom animations, easing functions, rotation, scale, translation, and fade effects.
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…
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…
davidortinau/maui-skills
Guide for .NET MAUI apps consuming .NET Aspire-hosted backend services.
Categories
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.
Maui Graphics Drawing fits situations like: : custom drawing; microsoft.Maui.Graphics; : view animations (use maui-animations); gesture handling on drawn elements (use maui-gestures).
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.
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.
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.
SKILL.md names no scripts, command-line tools or credentials: Maui Graphics Drawing is instructions for the agent only.
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.
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.
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.
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.
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.
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.