Borrowing it
Nothing to install: this file belongs to shift-editor/shift. 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/shift-editor/shift/main/.agents/skills/ui/SKILL.mdgit clone --depth 1 https://github.com/shift-editor/shiftWrote 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/shift-editor/shift/ui)<a href="https://agentmods.dev/skills/shift-editor/shift/ui"><img src="https://agentmods.dev/badge/skills/shift-editor/shift/ui/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/shift-editor/shift/ui"><img src="https://agentmods.dev/badge/skills/shift-editor/shift/ui.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.00065 | $0.02035 |
| Opus 5.5 | $0.00026 | $0.00814 |
| Sonnet 5.5 | $0.00013 | $0.00407 |
| Haiku 4.5 | $0.00006 | $0.00203 |
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 17d 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 — 131 lines — stays where its author put it; the contents beside it link to each section on GitHub.
/ui — Shift Interface Work
Build interfaces that match the supplied design, use Shift's shared primitives and semantic theme, and remain accessible in every interaction state.
Sources of truth
Read these before editing an unfamiliar UI surface:
docs/architecture/index.mdfor documentation routing.packages/ui/docs/DOCS.mdfor the shared component boundary.apps/desktop/src/renderer/index.cssfor Tailwind v4 theme tokens, fonts, and custom utilities.- The relevant existing component and its neighboring components for local composition and density.
- Any supplied Figma frame, screenshot, or product reference. Treat it as the visual target, not merely inspiration.
When library behavior or composition is unclear, inspect the installed Base UI types and current Base UI documentation. Do not guess from Radix, shadcn, or an older Base UI API.
Architecture boundary
- Check whether Base UI has a matching primitive before implementing an interactive control.
- Shared primitives live in
packages/ui/src/components/{component}/and wrap@base-ui/react/{component}. - Application code imports shared controls from
@shift/ui; never import Base UI directly in the desktop app. - Keep application state and domain behavior in the consuming app. Shared wrappers own primitive composition, reusable visual defaults, and widget-local behavior only.
- Use the Base UI component name for its Shift wrapper:
Button,Menu,Popover,Tooltip, and so on. - Re-export every shared component and public prop type through its component barrel and
packages/ui/src/index.ts. - Write wrappers as plain functions whose props extend
React.ComponentProps<typeof BaseX>. React 19 passesrefas a prop, so spreading the remaining props forwards it; do not useReact.forwardRefordisplayName. - Compose Base UI triggers with its
renderprop. Produce exactly one interactive DOM element: no nested buttons, no trigger-only wrapper spans, and no duplicated event targets. - Use Base UI state attributes such as
data-[disabled],data-[highlighted],data-[active], anddata-[starting-style]instead of duplicating primitive state in React.
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.
- 17d ago Changed 8d6bf01b4404
- 28d ago Changed · +7 lines e532cbbd30f1
- 1mo ago Changed 7fec64160aa4
- 1mo ago First seen · 124 lines · 65 tokens per session scan A 937fef884ace
ui is a skill published in the GitHub repository shift-editor/shift (379 stars, last pushed today), licensed Apache-2.0. It adds 65 tokens to every session and 2,035 once invoked, about $0.0003 per session on Opus 5.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
frontend-design
Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Focus outlines, touch targets, accessibility (WCAG AA), typography, and interactive affordances.
quill-code
Edit the @posthog/quill design system locally and consume the change in products/desktop before it is published to npm. Use when changing quill components/primitives/tokens, when a quill change must be tested inside the Code app, or when the user mentions quill, the design system, the .local-quill tarball, or the…
elements
Use this skill by default for any UI-related work or with NVIDIA Elements (nve-), including creating, editing, reviewing, or debugging HTML, CSS, layout, theming, components, applications, prototypes, Claude Artifacts, Codex Sites pages, and standalone UI artifacts.
design-implementation-reviewer
Visually compares live UI implementation against Figma designs and provides detailed feedback on discrepancies. Use after writing or modifying HTML/CSS/React components to verify design fidelity.