Agent skill · Design · mblode

ui-design agent skill by mblode

Designs and builds React, Next, and Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data.

View on GitHub Read SKILL.md

At a glance

Publisher	mblode
Repository	mblode/agent-skills (28 listed skills)
Category	Frontend and Design
License	MIT
Last commit	October 17, 2026 (repository)
SKILL.md	245 lines, 3,706 words
Bundled files	120 files, including references
Quality score	84/100 · B Passes all seven graded checks
Security scan	Not scanned
README badge	Get the badges for this listing

Before you install

Read from the skill's files at the directory's October 19, 2026 snapshot: what ships with it, what its code reads, and the terms it is published under.

Bundled scripts: none.
License: MIT, an open-source or open-content license.

Install ui-design

The skills CLI works with Claude Code, Codex, Cursor and other agents; the other routes copy the folder by hand.

Skills CLI

npx skills add https://github.com/mblode/agent-skills/tree/main/skills/ui-design

Claude Code, project-level copy

tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/mblode/agent-skills.git "$tmp/repo"
mkdir -p .claude/skills
cp -R "$tmp/repo/"skills/ui-design .claude/skills/
rm -rf "$tmp"

Codex installer

python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \
    --repo mblode/agent-skills \
    --path skills/ui-design

mblode/agent-skills is third-party code. Read SKILL.md and any bundled scripts before you install it.

How the author describes it

Designs and builds React/Next/Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive", "remove UI slop", "audit this component", "stress-test this component", "break this UI", or "show me the worst case".

From the description field of SKILL.md. Agents read this line to decide when to load the skill.

Sections in SKILL.md

Contents
Existing brand and specs
Modes
Direction mode
Pick a track
Shared foundations (load with either track)
Marketing references (conversion pages only)
Extract mode
Build mode
Audit mode
Deslop scope
Audit references
Break mode
Other modes
Quality Bar
Verify

Files in the skill folder

SKILL.md
add-dark-mode.md
canonicalize-tailwind.md
componentize.md
dark-mode-image.md
design-guidelines.md
direction/aesthetic-direction.md
direction/brand-kit-prompt.md
direction/cro.md
direction/design-in-code.md
direction/marketing-ui.md
direction/modern.md
direction/product-ui.md
direction/testing.md
evals/evals.json
evals/fixtures/clean-settings.tsx
evals/fixtures/delete-version-modal.tsx
evals/fixtures/invite-member-form.tsx
evals/fixtures/northwind-generated-landing.tsx
evals/fixtures/pricing-page.tsx
evals/fixtures/real-proof-landing.tsx
evals/merge-routing.json
evals/refine-ai-ui.json
guidelines/assets-api.md

Showing 24 of 120 files. Browse the folder on GitHub.

Suede Skill Check: 84/100 · B

Report snapshot · October 19, 2026 · graded-v2

The rubric totals 100 points; published scores are capped at 99. Security scan: not scanned.

Source revision: 81d0af2f6d4b. Report version 43911b608b66. Badge URLs follow the latest listing; save the report to keep this version.

Download report · Request a fresh review

What to review next

Boundary clause: 0 of 4 points. 4 when the description says when not to use the skill (“Not for …”, “Do not use …”, “Use … instead”).
Instruction depth: 4 of 7 points. 7 for a SKILL.md body of 500–3,000 words; 4 for 250–4,500; 1 for 100 or more.
Bundled scripts: 0 of 2 points. 2 when the skill folder ships a scripts/ folder.

Add declarations and bundled files when they describe the skill’s actual needs. Update the source, then request a fresh review with the changed commit or PR.

ui-design passes the required frontmatter check and all seven graded checks, which cover the SKILL.md format, a declared license and a commit in the last year. Those checks earn 56 of the score’s points; the rest come from description quality, instruction depth, bundled files, maintenance and curated-list citations. How the score works.

See the checks and points

Check	Result
Frontmatter parses and declares a name and a description	Pass
Name uses lowercase letters, digits and hyphens, 64 characters or fewer	Pass
Name matches the skill's folder name	Pass
Description is between 50 and 1,024 characters	Pass
Description says when an agent should use the skill	Pass
SKILL.md body is 500 lines or fewer	Pass
A license is declared in the frontmatter or the repository	Pass
Repository has a commit in the last 12 months	Pass

Score component	Points
Structural checks	56 of 56
Description length	5 of 5
Boundary clause	0 of 4
Example request	3 of 3
Instruction depth	4 of 7
Reference files	3 of 3
Bundled scripts	0 of 2
Recent maintenance	9 of 9
Curated-list citations	4 of 7
Tool permissions declared	0 of 2
Compatibility declared	0 of 2

Two badges for ui-design

Choose the numeric badge, the letter badge, or both. Each links to this skill’s Suede listing; either valid linked badge can qualify for the feature offer.

Markdown

[![Suede Skill Check: 84/100](https://skills.suedeai.ai/directory/mblode/agent-skills/ui-design/score.svg)](https://skills.suedeai.ai/directory/mblode/agent-skills/ui-design/)
[![Suede Skill Check: Grade B](https://skills.suedeai.ai/directory/mblode/agent-skills/ui-design/badge.svg)](https://skills.suedeai.ai/directory/mblode/agent-skills/ui-design/)

HTML

<a href="https://skills.suedeai.ai/directory/mblode/agent-skills/ui-design/"><img src="https://skills.suedeai.ai/directory/mblode/agent-skills/ui-design/score.svg" alt="Suede Skill Check: 84/100" width="160" height="175"></a>
<a href="https://skills.suedeai.ai/directory/mblode/agent-skills/ui-design/"><img src="https://skills.suedeai.ai/directory/mblode/agent-skills/ui-design/badge.svg" alt="Suede Skill Check: Grade B" width="160" height="175"></a>

Suede Certified on the shield refers to this published structural quality check. Security scan: not scanned. Read the methodology.

Limited-time feature offer: display either the numeric or letter badge in your repository or skill README (both also qualify), then request badge verification. Eligible skills scoring 80–99 can receive a featured placement after Suede verifies at least one valid badge linked to the skill’s listing. Suede has not announced an end date.