Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/saifyxpro/ui-ux-design-pro-skillnpx agentmods add skills/saifyxpro/ui-ux-design-pro-skill/ui-ux-design-proWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/saifyxpro/ui-ux-design-pro-skill/ui-ux-design-pro)<a href="https://agentmods.dev/skills/saifyxpro/ui-ux-design-pro-skill/ui-ux-design-pro"><img src="https://agentmods.dev/badge/skills/saifyxpro/ui-ux-design-pro-skill/ui-ux-design-pro/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/saifyxpro/ui-ux-design-pro-skill/ui-ux-design-pro"><img src="https://agentmods.dev/badge/skills/saifyxpro/ui-ux-design-pro-skill/ui-ux-design-pro.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00117 | $0.04653 |
| Opus 5 | $0.00059 | $0.02327 |
| Sonnet 5 | $0.00023 | $0.00931 |
| Haiku 4.5 | $0.00012 | $0.00465 |
Grade A, and why
ui-ux-design-pro scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 475 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI/UX Design Pro
Recommended Models
For best results, use GPT-5.3 Codex or Gemini 3.0 Pro.
Default Settings
- Theme: Always prefer Light Mode by default. Only use Dark Mode if explicitly requested by the user.
Build every interface with senior-level craft, intent, and consistency. Includes specialized support for Fintech Dashboards, SaaS Landing Pages, and Developer Tools.
Scope
Use for: Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, AI interfaces, mobile apps, landing pages, marketing sites, product showcases.
MANDATORY: Read References Before Designing
You MUST read all reference files in references/ before proposing or building any UI. These are not optional — they contain production-tested patterns, validated token systems, and craft principles that prevent generic output.
Required reading order:
references/design-directions.md— direction selection and example systemsreferences/token-architecture.md— token naming and layeringreferences/color-system.md— oklch palettes, contrast, dark modereferences/typography.md— font pairings, scales, hierarchyreferences/spacing-and-layout.md— grid systems, spacing scalesreferences/depth-and-elevation.md— shadow and border strategiesreferences/component-patterns.md— states, interaction patternsreferences/animation-and-motion.md— timing, easing, GPU performancereferences/real-world-patterns.md— 10 shipped production patternsreferences/accessibility.md— WCAG 2.2, contrast, keyboard navreferences/cognitive-principles.md— Hick's, Fitts's, Gestaltreferences/critique-protocol.md— self-evaluation before showing work
Do not skip this step. Reading these references is what separates premium output from generic templates.
The Problem
You will generate generic output. Your training has seen thousands of dashboards. The patterns are strong.
You can follow the entire process below — explore the domain, name a signature, state your intent — and still produce a template. Warm colors on cold structures. Friendly fonts on generic layouts.
What ships with it
60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- cli/.gitignore 54 B
- cli/bun.lock 3.7 KB
- cli/commands/audit.ts 11 KB runs code
- cli/commands/generate.ts 10 KB runs code
- cli/commands/icons.ts 1.8 KB runs code
- cli/commands/search.ts 1.5 KB runs code
- cli/data/ai-hallucinations.csv 2.9 KB
- cli/data/charts.csv 20 KB
- cli/data/colors.csv 16 KB
- cli/data/components.csv 12 KB
- cli/data/icon-libraries.csv 1.1 KB
- cli/data/icons.csv 13 KB
- cli/data/landing.csv 16 KB
- cli/data/products.csv 30 KB
- cli/data/react-performance.csv 14 KB
- cli/data/stacks/angular.csv 13 KB
- cli/data/stacks/astro.csv 12 KB
- cli/data/stacks/flutter.csv 10 KB
- cli/data/stacks/html-tailwind.csv 11 KB
- cli/data/stacks/jetpack-compose.csv 8.0 KB
- cli/data/stacks/nextjs.csv 12 KB
- cli/data/stacks/nuxt-ui.csv 14 KB
- cli/data/stacks/nuxtjs.csv 16 KB
- cli/data/stacks/react-native.csv 9.8 KB
- cli/data/stacks/react.csv 13 KB
- cli/data/stacks/remix.csv 7.5 KB
- cli/data/stacks/shadcn.csv 16 KB
- cli/data/stacks/solidjs.csv 7.6 KB
- cli/data/stacks/svelte.csv 11 KB
- cli/data/stacks/swiftui.csv 11 KB
- cli/data/stacks/vue.csv 11 KB
- cli/data/styles.csv 142 KB
- cli/data/typography.csv 51 KB
- cli/data/ui-reasoning.csv 45 KB
- cli/data/ux-guidelines.csv 31 KB
- cli/data/web-interface.csv 11 KB
- cli/fintech-final-test.md 7.4 KB
- cli/fintech-fixed-test.md 7.4 KB
- cli/fintech-pro-test.md 7.4 KB
- cli/fintech-senior-test.md 21 KB
- cli/fintech-test.md 7.4 KB
- cli/index.ts 1.5 KB runs code
- cli/lib/generators.ts 6.3 KB runs code
- cli/lib/search.ts 4.2 KB runs code
- cli/package.json 528 B
- cli/README.md 1.0 KB
- cli/saas-final-test.md 7.4 KB
- cli/saas-fixed-test.md 7.4 KB
- cli/saas-senior-test.md 21 KB
- cli/saas-test.md 7.4 KB
- cli/tsconfig.json 713 B
- references/accessibility.md 5.8 KB
- references/animation-and-motion.md 6.2 KB
- references/cognitive-principles.md 5.9 KB
- references/color-system.md 5.3 KB
- references/component-patterns.md 13 KB
- references/critique-protocol.md 4.6 KB
- references/depth-and-elevation.md 6.4 KB
- references/design-directions.md 10 KB
- references/icon-patterns.md 3.4 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 475 lines · 117 tokens per session scan A 216f16563f64
ui-ux-design-pro is a skill published in the GitHub repository saifyxpro/ui-ux-design-pro-skill (76 stars, last pushed 6mo ago), licensed MIT. It adds 117 tokens to every session and 4,653 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
looks-expensive
Full-stack design methodology that makes any website look like a $150k agency build. Nine gated phases: positioning, research, design contract, screen spec, build, subtraction, audit, hardening, handoff. Includes illustration system, animation tiers, 12 hero patterns, 16 section layouts, UX writing guide, icon system…
tailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
build-screen
A step-by-step procedure for building one interface screen from a project's existing design contracts. It asks a small number of clarifying questions, creates the screen, and reports what it checked.
figma-connect
Figma-to-code bridge combining Figma MCP server tools with the Code Connect CLI for end-to-end design implementation workflows. Use this skill when implementing UI components from Figma design URLs, publishing Code Connect mappings to Figma Dev Mode, extracting design tokens from Figma variables, setting up Figma Code…
frontend-design
Create distinctive, production-grade frontend interfaces with visual verification. Use this skill when the user asks to build web components, pages, landing pages, dashboards, React/Vue/Svelte components, HTML/CSS layouts, or any web UI that needs to look polished. Also activates when styling, beautifying…