Agent Skill
Design Screen skill
design-screenplugin87/ux-ui-agent-skills.claude/skills/design-screen/SKILL.md
Design or build a page, screen, landing page, website, app or UI from a request - the whole job, end to end. Use this for "design a landing page", "build a settings screen", "make me a website", "design the onboarding", "ออกแบบหน้าเว็บ", "ทำหน้า landing", "ออกแบบ UI", "ทำแอป". It runs the pipeline no single skill covers: the house doctrine, a written Brief Inference so the result is not the statistical mean, a committed visual direction, tokens, build, the objective gates, then an adversarial critic. Hands off to data-dashboard for dense data screens, redesign for existing UI, and image-to-code when a reference image is given.
always on
151 tokname + description
once used
1,648 tokSKILL.md body
bundled files
0
repo stars
2.8kGitHub
Install the Design Screen skill
Skills CLI (Claude Code, Codex, Cursor and others)
npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill design-screen
Claude Code, by hand (all projects)
git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills.git /tmp/ux-ui-agent-skills mkdir -p ~/.claude/skills cp -R /tmp/ux-ui-agent-skills/.claude/skills/design-screen ~/.claude/skills/design-screen
For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.
What it costs your context
Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.
| When | What loads | Cost |
|---|---|---|
| Every session | Name and description | 151 tok |
| When the agent uses it | The SKILL.md instructions | 1,648 tok |
| Only if opened | No bundled files | — |
Until it is used, design-screen costs about 9.0× less than the median MCP server we measured (1,363 tokens on every turn). Installing all 27 skills from plugin87/ux-ui-agent-skills would load 1,881 tokens of descriptions. Skills vs MCP study
Checks
Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.
Checked 2026-10-22 · method
What's inside
The headings of its SKILL.md. Read the full file on GitHub.
- Skill: Design a screen
- Do this first, before anything else
- Hand off instead, when the work is actually
- 1. Taste preflight
- Banned defaults — break each one deliberately
- 2. Doctrine
- 3. Direction into tokens
- 4. Build
- 5. Gate — run it, never claim it
- 6. Render and look
- 7. Critic
- What you deliver
More skills from plugin87/ux-ui-agent-skills
- a11y-auditplugin87/ux-ui-agent-skills
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.
2.8k64 tok idle · 516 in use - apply-aestheticplugin87/ux-ui-agent-skills
Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.
2.8k101 tok idle · 502 in use - brandkitplugin87/ux-ui-agent-skills
Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.
2.8k82 tok idle · 683 in use - critiqueplugin87/ux-ui-agent-skills
Adversarial design critique of the current work — render it, look at it, and argue for rejection. Run after the gates are green, never instead of them.
2.8k37 tok idle · 910 in use - data-dashboardplugin87/ux-ui-agent-skills
Build a dense, data-heavy screen - an analytics console or a trading terminal - with real charts drawn from tokens: candlestick, volume, depth, stacked area, waterfall, scatter, correlation matrix, donut, gauge, sparklines, heatmaps and order books. Use when the request is a dashboard, terminal, monitoring view, data console, or any screen whose job is to show many numbers at once. Covers the layout sequence, the SVG geometry, the accessibility contract per chart type, and the contrast traps that only appear in dark mode.
2.8k113 tok idle · 2,504 in use - design-codeplugin87/ux-ui-agent-skills
Generate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS. Use when the user wants working UI code for a component or screen in a specific stack.
2.8k78 tok idle · 1,657 in use - design-componentplugin87/ux-ui-agent-skills
Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework code, use design-code.
2.8k79 tok idle · 2,720 in use - design-doctrineplugin87/ux-ui-agent-skills
The house rules for ANY design or UI work - the verification protocol (run the gate, never claim a number), the absolute no-emoji rule, token by intent, one shared theme, the eight states, one thing leads, and output completeness. Load this FIRST whenever building, reviewing, or theming a screen, component, or token set. Installed as a plugin, this skill carries what CLAUDE.md carries in the repo.
2.8k92 tok idle · 2,175 in use