ui

A workflow for designing and implementing polished user interfaces, the screens and controls people interact with, with attention to visual direction and rendered results.

In plain words
What is it for?
Choosing a visual direction, implementing interface states, fixing visual issues, and checking rendered pages in each shipped language.
Why use it?
It turns vague appearance complaints into specific visual problems and checks the actual page at desktop and mobile sizes.

Skill for Claude CodeCodex

Part of the verbs plugin — 10 skills shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/panda850819/verbs/ui
Any agent
npx skills add panda850819/verbs --skill ui
Clone the repo
git clone --depth 1 https://github.com/panda850819/verbs

Made for: Claude Code, Codex.

Or install verbs, the plugin that ships this one along with the rest of its 10 skills.

Per session 85 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 536 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00085 $0.00536
Opus 5 $0.00043 $0.00268
Sonnet 5 $0.00017 $0.00107
Haiku 4.5 $0.00009 $0.00054

Measured 3d ago against content hash fa9b4432a810, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

ui 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.

skills/productivity/ui/SKILL.md · 37 lines

What it actually says

UI

Native frontend tooling can render a surface; this skill adds a committed visual direction, craft review, and rendered evidence. Load references/craft.md before writing CSS, not after. A CJK gut-feel complaint (很傻 / 突兀 / 丑 / 乱) is taste, not a bug — keep the word, name the defect, fix; do not send it to debug.

  • Evidence over taste. A preference is not a finding. Name the observable defect and its user impact, then confirm it in the rendered surface. Keep a deliberate choice that meets the task, accessibility and acceptance contract.
  • Keep ownership clear. prototype answers an open visual question, ui chooses and implements the direction, qa proves browser acceptance, and review checks the code diff. Do not turn a visual preference into a code-review finding.
  • Fight your defaults. Your first draft is the AI-default — Inter, purple→blue gradient, centered hero with two CTAs, a grid of identical cards. Lock one named direction, then scan the first screen against the default-trap checklist in craft.md and replace what drifted.
  • Verify the render, not the source. Screenshot at 375px and 1280px in every shipped locale before "done". Wraps, overflow, and widows are invisible in code.
  • Build past the happy path. States (loading/empty/error) and the shippability layer a visual pass skips — 404, back-nav, form validation, skip-link, footer legal — are in craft.md.

Done when the named direction passes the default-trap scan, required states are covered, every visual claim has rendered evidence, and 375px/1280px screenshots are captured for every shipped locale.

Everything else — fonts, CJK type, OKLCH, CSS bans, motion, spacing, content rules — is craft you cannot derive: references/craft.md.

Files

What ships with it

1 file 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.

Changes

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.

  1. 3d ago First seen · 37 lines · 85 tokens per session scan A fa9b4432a810

Subscribe to this mod's changes

ui is a skill published in the GitHub repository panda850819/verbs (5 stars, last pushed 10d ago), licensed MIT. It adds 85 tokens to every session and 536 once invoked, about $0.0004 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-31.

Related

Other skills, from other repositories

markstream-react

Integrate the beta markstream-react package into a React 18+ or Next app. Use when Codex needs to add the React renderer, choose the root, next, or server entrypoint, import CSS correctly, choose between content and nodes, keep client boundaries safe, add renderer-local streamingComponents or htmlComponents, use…

Simon-He95/markstream-vue · 94 tokens

decided-import

Reformat ONE existing document (a decision, requirement, design, roadmap, or prompt) into ONE valid RAC (requirements-as-code) artifact, with a mandatory human-review step before any file is written and decided validate as the deterministic close. Use when a user wants to add or import a single existing decision or…

asdecided/core · 98 tokens

nba

Read the live cycle state and return the single highest-leverage next best action, not a menu. Use when a project is between phases, the author asks what to do next, too many valid threads are open, or the work needs re-entry into frame, build, drive, re0-memo, hate, re0-work, or ship.

LilMGenius/paperthin · 72 tokens

dependabot-review

Analyzes a Dependabot PR to determine what actually changed in each bumped package and whether those changes affect this repo. Reports changed APIs/methods, which doc pages use them, and the realistic probability of any visible impact on the docs site.

cloudflare/cloudflare-docs · 53 tokens

review-validation

Validate review findings from specialist agents by reading the actual repo file content and checking each finding for accuracy, applicability, and false positives.

cloudflare/cloudflare-docs · 29 tokens

markdown-exporter

Convert Markdown text to DOCX, PPTX, XLSX, PDF, PNG, SVG, HTML, IPYNB, MD, CSV, JSON, JSONL, XML files, and extract code blocks in Markdown to Python, Bash,JS and etc files.

bowenliang123/markdown-exporter · 57 tokens