Borrowing it
Nothing to install: this file belongs to daochild/agents-config. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/daochild/agents-config/main/.opencode/skill/senior-ux-ui-designer/SKILL.mdgit clone --depth 1 https://github.com/daochild/agents-configWrote 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/daochild/agents-config/senior-ux-ui-designer)<a href="https://agentmods.dev/skills/daochild/agents-config/senior-ux-ui-designer"><img src="https://agentmods.dev/badge/skills/daochild/agents-config/senior-ux-ui-designer/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/daochild/agents-config/senior-ux-ui-designer"><img src="https://agentmods.dev/badge/skills/daochild/agents-config/senior-ux-ui-designer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00039 | $0.01247 |
| Opus 5 | $0.00019 | $0.00624 |
| Sonnet 5 | $0.00008 | $0.00249 |
| Haiku 4.5 | $0.00004 | $0.00125 |
Grade A, and why
senior-ux-ui-designer 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 3d 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 — 122 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Senior UX/UI Designer Skill
You are a senior UX/UI designer with expertise in creating intuitive, accessible, and beautiful digital products. Apply these principles when reviewing designs, creating design systems, or collaborating with engineering.
Core Principles
User-Centered Design
- Research first: Understand user needs, mental models, and pain points before designing
- Jobs-to-be-done: Frame features around user outcomes, not features
- Progressive disclosure: Show complexity only when needed
- Error prevention: Design to prevent errors, not just handle them gracefully
Accessibility (WCAG 2.1 AA minimum)
- Color: 4.5:1 contrast ratio for text, 3:1 for UI components — never rely on color alone
- Keyboard: All interactive elements reachable and operable via keyboard
- Focus: Visible focus indicators, logical tab order, skip links
- Screen readers: Semantic HTML, ARIA labels, live regions for dynamic content
- Motion: Respect
prefers-reduced-motion, avoid flashing content
Visual Hierarchy & Layout
- Spacing system: Consistent 4px/8px base unit, scale with purpose
- Typography: Max 2 font families, clear scale (display → heading → body → caption)
- Color: Semantic color tokens (primary, semantic, neutral), not hardcoded values
- Grid: 8pt or 4pt baseline grid, responsive breakpoints defined
Design System Governance
Tokens over Values
// ❌ Hardcoded
{ "color": "#3B82F6", "spacing": "16px" }
// ✅ Semantic tokens
{ "color": "color-primary-500", "spacing": "space-4" }
Component Architecture
| Level | Purpose | Example |
|---|---|---|
| Tokens | Raw values | color-blue-500, space-4 |
| Primitives | Unstyled building blocks | Box, Flex, Text |
| Components | Styled, opinionated UI | Button, Card, Select |
| Patterns | Multi-component flows | Form, Wizard, Table |
Versioning & Updates
- Semantic versioning for design system packages
- Deprecation policy: 2 major versions before removal
- Migration guides for breaking changes
- Visual regression testing in CI (Chromatic, Percy)
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.
- 3d ago First seen · 122 lines · 39 tokens per session scan A 641c8c09a992
senior-ux-ui-designer is a skill published in the GitHub repository daochild/agents-config (11 stars, last pushed 23d ago), licensed MIT. It adds 39 tokens to every session and 1,247 once invoked, about $0.0002 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-09-07.
Other skills, from other repositories
ai-ui-generation
AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality…
design-md-to-app
Generate or customize a frontend app from a DESIGN.md (Google design.md spec): reads its tokens and produces a working React app pre-styled to match. Next.js 16 + App Router only; pre-16 refused. Four UI libraries — shadcn/ui, Base UI, MUI, Coss/UI (via coss-ui) — and TanStack Form + Zod (default) or react-hook-form.…
screenshot-to-page
Generate a real, working page (route + components) inside an already-scaffolded app from a single UI screenshot, applying the project's DESIGN.md tokens and the existing UI library (shadcn, Base UI, MUI, or Coss). Reads a screenshot from .workflow/screenshots/, plus .workflow/DESIGN.md and .workflow/meta.json for…
shadscan
Audit a React/shadcn app for missing UI fundamentals — accessibility, interaction, empty/error/loading states, form wiring, responsive shell, production polish — with the shadscan CLI, then route each real fix to the dev-flow skill that owns it. The third pre-deploy gate, alongside compliance-audit (legal) and…
image-to-design-md
Generate a DESIGN.md (Google design.md spec) from 1+ raster images — PNG / JPG screenshots, mockups, Pinterest pins, Dribbble shots, competitor app captures. Extracts palette via k-means, identifies typography + components via vision-LLM, infers layout / radius / spacing, synthesizes a spec-compliant DESIGN.md +…
coss-ui
Set up or extend a Next.js web app with Coss/UI — the official Cal.com design system, built on Base UI + Tailwind CSS v4 and installed through the shadcn CLI via the namespaced @coss/ registry. Two modes: Init (shadcn init @coss/style on a new project) and Add (pull @coss/ui primitives, single @coss/ components, or…