Edit Figma Design
warpdotdev/warp
Creates or revises Figma designs from a written description using the Figma MCP authoring tools, in a new blank file or an existing one.
Apply the foundational reasoning of a senior UI/UX designer to interface decisions, BEFORE and WHILE generating UI, not just styling it afterward.
Install UX First Principles
$ npx skills add davidortinau/maui-skills --skill ux-first-principles -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install davidortinau/maui-skills ux-first-principles --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/ux-first-principles .claude/skills/ux-first-principles && 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 "ux-first-principles" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/ux-first-principles into .claude/skills/ux-first-principles/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ux-first-principles", 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/ux-first-principlesType 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 ux-first-principles -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install davidortinau/maui-skills ux-first-principles --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/ux-first-principles .agents/skills/ux-first-principles && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ux-first-principles" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/ux-first-principles into .agents/skills/ux-first-principles/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ux-first-principles", 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 ux-first-principles -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install davidortinau/maui-skills ux-first-principles --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/ux-first-principles .cursor/skills/ux-first-principles && 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 "ux-first-principles" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/ux-first-principles into .cursor/skills/ux-first-principles/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ux-first-principles", 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/ux-first-principles--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 ux-first-principles -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install davidortinau/maui-skills ux-first-principles --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/ux-first-principles .gemini/skills/ux-first-principles && 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 "ux-first-principles" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/ux-first-principles into .gemini/skills/ux-first-principles/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ux-first-principles", 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 ux-first-principlesInstalls 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 ux-first-principles -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/ux-first-principles .github/skills/ux-first-principles && 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 "ux-first-principles" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/ux-first-principles into .github/skills/ux-first-principles/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ux-first-principles", 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 ux-first-principles -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 ux-first-principles --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/ux-first-principles .opencode/skills/ux-first-principles && 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 "ux-first-principles" agent skill from https://github.com/davidortinau/maui-skills/tree/main/plugins/maui-skills/skills/ux-first-principles into .opencode/skills/ux-first-principles/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ux-first-principles", 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.
Facts
- Skill name
ux-first-principles- GitHub stars
- 175
- Token cost
- ~1.7k tokens
- SKILL.md length
- 880 words
- Files
- 5 (incl. references)
- Skills in repo
- 41
- Repo updated
- First seen
- Licence
- MIT
At a glance
Apply the foundational reasoning of a senior UI/UX designer to interface decisions, BEFORE and WHILE generating UI, not just styling it afterward.
- Works in 6 steps: Name the decision. What exactly is being… → Pull the 2–4 relevant principles. Use… → Surface the tension. Which principles… → …
- : design a screen for
- SKILL.md covers What this skill is for, The one rule that prevents the…, How to use the principles and The four buckets (taxonomy), plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
UX First Principles is an agent skill from davidortinau/maui-skills. Apply the foundational reasoning of a senior UI/UX designer to interface decisions, BEFORE and WHILE generating UI, not just styling it afterward. This is design first principles (visual hierarchy, cognitive load, Gestalt grouping, usability heuristics, accessibility), the why behind good design, not execution (color, fonts, spacing, brand, component libraries). USE FOR: 'design a screen for', 'lay out this dashboard', 'what navigation should this app use', 'is this UI any good', 'structure this form', 'reduce…
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `references/accessibility-and-ethics.md`, `references/compositional-and-perceptual.md` and `references/heuristics-and-principles.md`).
It sits in Frontend & Design, covering Design systems, UI design and UX design. The repository describes itself as: .NET MAUI skills for GitHub Copilot and Claude Code. The licence is MIT.
When your agent uses it
- : design a screen for
- Lay out this dashboard
- What navigation should this app use
- Is this UI any good
Example prompts
- “design a screen for”
- “lay out this dashboard”
- “what navigation should this app use”
- “/ux-first-principles”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Name the decision. What exactly is being chosen? (a layout, a flow, an affordance, a grouping…)
- Pull the 2–4 relevant principles. Use the taxonomy below to find them. Don't over-pull.
- Surface the tension. Which principles pull in opposite directions here?
- Decide and justify. Commit to one answer. Explain the reasoning in one or two sentences a designer would recognize.
- Check the medium. If sizing, reach, density, hover, multi-window, or pointer precision affect the choice, consult the relevant medium skill.
- Check accessibility. Treat it as a constraint on the decision, not a later patch.
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.
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
UX First Principles loads about 1.7k tokens when it runs, and up to ~7.2k if it reads all its reference files. Until then it costs about 201 tokens; SKILL.md has 880 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.
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). 880 words, ~1,735 tokens.
Download SKILL.mdSave it as
.claude/skills/ux-first-principles/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- ux-first-principles
- description
- Apply the foundational reasoning of a senior UI/UX designer to interface decisions, BEFORE and WHILE generating UI, not just styling it afterward. This is design first principles (visual hierarchy, cognitive load, Gestalt grouping, usability heuristics, accessibility), the why behind good design, not execution (color, fonts, spacing, brand, component libraries). USE FOR: 'design a screen for', 'lay out this dashboard', 'what navigation should this app use', 'is this UI any good', 'structure this form', 'reduce clutter', 'make this clearer', grouping and prioritizing elements, choosing a flow or affordance. DO NOT USE FOR: picking colors, fonts, spacing scales, or brand systems (use a styling/execution skill); medium-specific layout (use ux-desktop, ux-tablet, or ux-mobile).
UX First Principles
A reasoning skill, not a styling skill. Its job is to make interface decisions the way an experienced UI/UX professional would: by drawing on the established canons of design knowledge to choose what to build and why, leaving how it looks (tokens, color, type, brand) to execution skills that run alongside this one.
What this skill is for
Use this when a design decision is being made — not when colors are being picked. Good triggers:
- Laying out a screen, dashboard, form, or flow
- Choosing a navigation structure (tabs, drawer, sidebar, breadcrumb, wizard)
- Deciding how much to show at once vs. defer (disclosure, density)
- Grouping, ordering, and prioritizing elements on a surface
- Reviewing or critiquing an existing interface
- Resolving a "this feels cluttered / confusing / off" complaint into specific, fixable causes
If the task is purely "apply our color tokens" or "match the brand," that is execution — defer to the styling skill. This skill stops at the decision; it does not own the pixels.
The one rule that prevents the most damage
Principles are universal; their application changes by medium (desktop / tablet / mobile), not by platform (iOS / Android / Windows). Human cognition and perception do not change across operating systems. What changes is the body-to-device interface: what the user points with, how far they can reach, how much they can see, and how many things they can have open. Reason from principles, decide once, and let a thin render-time layer handle mechanical platform substitutions (exact control sizing, system fonts, corner radii, OS-global gestures). Do not fork a structural decision (tabs vs. drawer, modal vs. inspector, navigation depth) by platform — those are driven by information architecture and cognition, and the cross-platform overlap of acceptable patterns is wide. Forking them fragments one coherent design into three divergent ones.
When the medium matters to the decision, consult the matching medium skill (ux-desktop, ux-tablet, ux-mobile). This core skill holds the invariant principles; the medium skills hold only what changes by modality.
How to use the principles
Do not recite all of them. The skilled move is to identify which few principles bear on the decision in front of you, name the tension between them, and resolve it deliberately. Most real decisions are a trade-off between two or three principles (e.g., "show everything" for discoverability vs. "show less" for cognitive load). State the trade-off, then choose, and say why.
Workflow for any UI decision:
- Name the decision. What exactly is being chosen? (a layout, a flow, an affordance, a grouping…)
- Pull the 2–4 relevant principles. Use the taxonomy below to find them. Don't over-pull.
- Surface the tension. Which principles pull in opposite directions here?
- Decide and justify. Commit to one answer. Explain the reasoning in one or two sentences a designer would recognize.
- Check the medium. If sizing, reach, density, hover, multi-window, or pointer precision affect the choice, consult the relevant medium skill.
- Check accessibility. Treat it as a constraint on the decision, not a later patch.
Show full SKILL.md (382 more words)Show less
The four buckets (taxonomy)
The canons overlap, so they are organized by what kind of question they answer. Read the reference file for the bucket your decision touches.
Laws & effects —
references/laws-and-effects.mdDescriptive: why users behave as they do. Fitts, Hick, Miller, Jakob, Tesler, Aesthetic-Usability, Doherty, Goal-Gradient, Peak-End, Serial Position, Von Restorff, Zeigarnik. Reach for these when reasoning about speed, choice, memory, expectation, and perceived quality.Heuristics & principles —
references/heuristics-and-principles.mdNormative: what to aim for. Nielsen's 10 usability heuristics, Shneiderman's 8 golden rules, Norman's principles (affordances, signifiers, mapping, feedback, constraints). Reach for these when reasoning about usability, error prevention, control, and whether the interface communicates how it works.Compositional & perceptual —
references/compositional-and-perceptual.mdHow the eye organizes a surface: visual hierarchy, contrast, proximity, alignment, similarity, common region, figure/ground, progressive disclosure, consistency. Reach for these when reasoning about layout, grouping, emphasis, and "what does the user see first."Accessibility & ethics —
references/accessibility-and-ethics.mdConstraints that make the design usable by everyone and honest: WCAG's POUR (perceivable, operable, understandable, robust), inclusive-design defaults, and dark-pattern avoidance. Reach for these on every decision — accessibility is a design input, not an audit.
Output expectations
When you apply this skill, make the reasoning visible but brief. A good response names the principles in play, states the trade-off, and commits to a choice — it does not dump a glossary. The user should come away understanding why the interface is the way it is, in terms a designer would endorse.
What this skill deliberately does not do
It does not pick colors, fonts, spacing scales, or component libraries; it does not enforce a brand; it does not generate final styled markup on its own. Those are execution concerns owned by styling skills (e.g., a frontend-design skill) that should run alongside this one. Keeping the boundary clean is what lets this skill compose instead of conflict.
Attribution note
The principle concepts referenced here (Fitts's Law, Hick's Law, Nielsen's heuristics, Gestalt principles, etc.) are part of the public HCI and design literature and are described here in original wording. Where a specific published collection is the best further reading — notably Jon Yablonski's Laws of UX (lawsofux.com), which is licensed CC BY-NC-ND and must not be copied verbatim — it is cited as a reference, not reproduced. Credit Jakob Nielsen / Nielsen Norman Group for the usability heuristics when reusing them.
© 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 4 other files (references) in plugins/maui-skills/skills/ux-first-principles of davidortinau/maui-skills.
- SKILL.md
- references/accessibility-and-ethics.md
- references/compositional-and-perceptual.md
- references/heuristics-and-principles.md
- references/laws-and-effects.md
Open the folder on GitHubat commit 79bb4bf
Compare with similar skills
UX First Principles 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 |
|---|---|---|---|---|---|---|
| UX First Principles this skilldavidortinau/maui-skills | 175 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Edit Figma Designwarpdotdev/warp | 65k | 1 repos | ~2.4k | Automated safety check: Pass | AGPL-3.0 | |
| Super UI UX Designsyahiidkamil/Software-Engineer-AI-Agent-Atlas | 401 | — | ~9k | Automated safety check: Pass | None | |
| Penpot Uiux Designgithub/awesome-copilot | 40k | 1 repos | ~3k | Automated safety check: Pass | MIT | |
| Eval UI UXIbrahim-3d/orchestrator-supaconductor | 381 | — | ~2.4k | Automated safety check: Pass | AGPL-3.0 | |
| UI UX Designeraiskillstore/marketplace | 430 | 7 repos | ~2.4k | Automated safety check: Pass | None |
Similar skills
Super UI UX Design
syahiidkamil/Software-Engineer-AI-Agent-Atlas
Complete UI/UX design capability — a wiki-style knowledge map of design theory (UX laws, Nielsen heuristics, usability, visual hierarchy, typography, contrast/WCAG, design systems…
- Official
Penpot Uiux Design
github/awesome-copilot
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools.
Eval UI UX
Ibrahim-3d/orchestrator-supaconductor
Specialized UI/UX evaluator for the Evaluate-Loop. An agent skill from Ibrahim-3d/orchestrator-supaconductor.
UI UX Designer
aiskillstore/marketplace
Create interface designs, wireframes, and design systems. An agent skill from aiskillstore/marketplace.
Product Designer
borghei/Claude-Skills
Product design across UI/UX, design systems, prototyping, and user research.
More from davidortinau/maui-skills
All 41 skills in this repoMaui Hot Reload Diagnostics
davidortinau/maui-skills
Diagnose and troubleshoot .NET MAUI Hot Reload issues (C Hot Reload, XAML Hot Reload, Blazor Hybrid).
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…
Maui Animations
davidortinau/maui-skills
.NET MAUI view animations, custom animations, easing functions, rotation, scale, translation, and fade effects.
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…
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…
Maui Aspire
davidortinau/maui-skills
Guide for .NET MAUI apps consuming .NET Aspire-hosted backend services.
Related
Categories
Questions about UX First Principles
What does UX First Principles do?
Apply the foundational reasoning of a senior UI/UX designer to interface decisions, BEFORE and WHILE generating UI, not just styling it afterward. UX First Principles is an agent skill from davidortinau/maui-skills. Apply the foundational reasoning of a senior UI/UX designer to interface decisions, BEFORE and WHILE generating UI, not just styling it afterward.
When should I use UX First Principles?
UX First Principles fits situations like: : design a screen for; lay out this dashboard; what navigation should this app use; is this UI any good.
How do I install UX First Principles in Claude Code?
Run `npx skills add davidortinau/maui-skills --skill ux-first-principles -a claude-code`. Or copy the skill folder (plugins/maui-skills/skills/ux-first-principles in davidortinau/maui-skills) into .claude/skills/ux-first-principles in your project. Claude Code loads it when a task matches its description.
How do I install UX First Principles in Codex?
Run `npx skills add davidortinau/maui-skills --skill ux-first-principles -a codex`. Or copy the skill folder (plugins/maui-skills/skills/ux-first-principles in davidortinau/maui-skills) into .agents/skills/ux-first-principles in your project. Codex loads it when a task matches its description.
Can I use UX First Principles 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 ux-first-principles -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ux-first-principles, .gemini/skills/ux-first-principles, .github/skills/ux-first-principles and .opencode/skills/ux-first-principles in your project.
What does UX First Principles need to run?
SKILL.md names no scripts, command-line tools or credentials: UX First Principles is instructions for the agent only.
Does UX First Principles 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 UX First Principles 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 UX First Principles use?
UX First Principles 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 UX First Principles use?
About 1.7k tokens (SKILL.md is roughly 6.9k 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 5.5k tokens, read only when the agent opens those files.
What are the alternatives to UX First Principles?
Skills that share tags, products or a category with UX First Principles: Edit Figma Design (warpdotdev/warp, 65k stars), Super UI UX Design (syahiidkamil/Software-Engineer-AI-Agent-Atlas, 401 stars), Penpot Uiux Design (github/awesome-copilot, 40k stars) and Eval UI UX (Ibrahim-3d/orchestrator-supaconductor, 381 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains UX First Principles?
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.