Prototype First UI
DejavuMoe/Smoji
Run a safe prototype-first UI/UX workflow across web, desktop, mobile, extensions, and multimodal design inputs.
While iterating on UI, do not waste time on tsc, lint, typecheck, format, full test suites, commit, or push until the user likes how it looks and works.
Install UI Only
$ npx skills add OutThisLife/brooklyn-skills --skill ui-only -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install OutThisLife/brooklyn-skills ui-only --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/OutThisLife/brooklyn-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/ui-only .claude/skills/ui-only && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ui-only" agent skill from https://github.com/OutThisLife/brooklyn-skills/tree/main/skills/ui-only into .claude/skills/ui-only/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-only", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/OutThisLife/brooklyn-skills/tree/main/skills/ui-onlyType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add OutThisLife/brooklyn-skills --skill ui-only -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install OutThisLife/brooklyn-skills ui-only --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OutThisLife/brooklyn-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/ui-only .agents/skills/ui-only && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-only" agent skill from https://github.com/OutThisLife/brooklyn-skills/tree/main/skills/ui-only into .agents/skills/ui-only/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-only", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add OutThisLife/brooklyn-skills --skill ui-only -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install OutThisLife/brooklyn-skills ui-only --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OutThisLife/brooklyn-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/ui-only .cursor/skills/ui-only && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ui-only" agent skill from https://github.com/OutThisLife/brooklyn-skills/tree/main/skills/ui-only into .cursor/skills/ui-only/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-only", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/OutThisLife/brooklyn-skills.git --path skills/ui-only--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add OutThisLife/brooklyn-skills --skill ui-only -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install OutThisLife/brooklyn-skills ui-only --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OutThisLife/brooklyn-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/ui-only .gemini/skills/ui-only && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ui-only" agent skill from https://github.com/OutThisLife/brooklyn-skills/tree/main/skills/ui-only into .gemini/skills/ui-only/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-only", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install OutThisLife/brooklyn-skills ui-onlyInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add OutThisLife/brooklyn-skills --skill ui-only -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/OutThisLife/brooklyn-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/ui-only .github/skills/ui-only && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ui-only" agent skill from https://github.com/OutThisLife/brooklyn-skills/tree/main/skills/ui-only into .github/skills/ui-only/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-only", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add OutThisLife/brooklyn-skills --skill ui-only -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install OutThisLife/brooklyn-skills ui-only --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OutThisLife/brooklyn-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/ui-only .opencode/skills/ui-only && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ui-only" agent skill from https://github.com/OutThisLife/brooklyn-skills/tree/main/skills/ui-only into .opencode/skills/ui-only/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-only", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ui-only- GitHub stars
- 199
- Token cost
- ~364 tokens
- SKILL.md length
- 188 words
- Files
- 1
- Skills in repo
- 22
- Repo updated
- First seen
- Licence
- MIT
At a glance
While iterating on UI, do not waste time on tsc, lint, typecheck, format, full test suites, commit, or push until the user likes how it looks and works.
- Works in 4 steps: Change the UI. → Show it (or tell them how to look). → Take feedback and iterate. → …
- Figma implementation
- SKILL.md covers Don't run yet, Do this instead and Scope
- Calls git and npm
What it does
UI Only is an agent skill from OutThisLife/brooklyn-skills. While iterating on UI, do not waste time on tsc, lint, typecheck, format, full test suites, commit, or push until the user likes how it looks and works. Use for any UI/UX work, layout, redesign, Figma implementation, visual polish, "make it look right", or when they want to see the UI before cleanup.
Its SKILL.md is about 360 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development, covering Test generation, Linting and formatting and UI design. It works with Figma. The repository describes itself as: Skills that drive best-in-class engineering. The licence is MIT.
When your agent uses it
- Figma implementation
- Make it look right
- They want to see the UI before cleanup
Example prompts
- “make it look right”
- “/ui-only”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Change the UI.
- Show it (or tell them how to look).
- Take feedback and iterate.
- When they say it's good / lgtm / clean it / commit it, then run checks,
What it can do on your machine
Read from SKILL.md and the folder at commit 8a97904. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
gitnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use git and npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
UI Only loads about 364 tokens when it runs. Until then it costs about 77 tokens; SKILL.md has 188 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from OutThisLife/brooklyn-skills at commit 8a97904, republished under its MIT licence (© OutThisLife). 188 words, ~364 tokens.
Download SKILL.mdSave it as
.claude/skills/ui-only/SKILL.md (or your agent's skills folder).- name
- ui-only
- description
- While iterating on UI, do not waste time on tsc, lint, typecheck, format, full test suites, commit, or push until the user likes how it looks and works. Use for any UI/UX work, layout, redesign, Figma implementation, visual polish, "make it look right", or when they want to see the UI before cleanup.
UI Only
When you're changing how something looks or interacts: get the UI right first. Don't burn turns on tsc, lint, or commit until they say it's good.
Don't run yet
Until they like the UI (or explicitly say to clean/commit):
tsc/ typecheck /npm run buildas a finish step- eslint / prettier / biome
- full test suites just to greenlight a commit
git commit/git push/ opening the PR as done
Dev server, screenshots, and targeted runs needed to see or use the UI are fine. Don't start a dev server the user already has running — assume it's up unless told otherwise. Keep debug logging in place while something's still broken; remove it only once it works.
Do this instead
- Change the UI.
- Show it (or tell them how to look).
- Take feedback and iterate.
- When they say it's good / lgtm / clean it / commit it, then run checks,
use
clean, commit, and do whatever else the repo needs.
If you're not sure whether to keep iterating, ask.
Scope
Any UI surface (web, desktop, TUI). Skip for backend-only work.
For primitives and tokens, also use ui-system.
© OutThisLife, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/ui-only of OutThisLife/brooklyn-skills.
Open the folder on GitHubat commit 8a97904
Compare with similar skills
UI Only next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| UI Only this skillOutThisLife/brooklyn-skills | 199 | — | ~364 | Automated safety check: Pass | MIT | |
| Prototype First UIDejavuMoe/Smoji | 114 | — | ~4.2k | Automated safety check: Pass | Apache-2.0 | |
| Spec App Consistency Auditleo-kuang-ai/spec-first | 107 | — | ~4.6k | Automated safety check: Pass | MIT | |
| Igniteui Angular TestingIgniteUI/igniteui-angular | 599 | — | ~950 | Automated safety check: Pass | Custom licence | |
| Bench Batonnooga/let-go | 568 | — | ~821 | Automated safety check: Pass | MIT | |
| Conducty Shiprobertbarclayy/conducty | 176 | — | ~1.9k | Automated safety check: Pass | MIT |
Similar skills
Spec App Consistency Audit
leo-kuang-ai/spec-first
Audit mobile App PRD/Figma/local-source consistency across page routes, KMP/Clean Architecture, components, analytics, i18n, engineering quality, and industry lenses before runtime validation; use…
Igniteui Angular Testing
IgniteUI/igniteui-angular
Quick-reference for running Ignite UI for Angular test suites.
Bench Baton
nooga/let-go
Coordinate heavy local workloads across worktrees, processes, and subagents — benchmarks and timing-sensitive gates run exclusively on a quiesced machine, while builds, test suites, regeneration…
Conducty Ship
robertbarclayy/conducty
Pre-merge / pre-deploy gate. An agent skill from robertbarclayy/conducty.
CLI Hub Matrix Image Design
HKUDS/CLI-Anything
Capability-based multi-tool matrix for image and graphic design: AI generation, raster/vector editing, UI mockups, diagrams, upscaling, photo library, and publishing.
More from OutThisLife/brooklyn-skills
All 22 skills in this repoDraft Tweet
OutThisLife/brooklyn-skills
Draft X/Twitter posts about shipped work. An agent skill from OutThisLife/brooklyn-skills.
Free Disk Space
OutThisLife/brooklyn-skills
Safely reclaim disk space on macOS without touching personal or agent data.
List Open Work
OutThisLife/brooklyn-skills
List my open MRs/PRs in the current repo/worktree, each with its tracker ticket.
PR Ready
OutThisLife/brooklyn-skills
Clear everything blocking an existing PR/MR from merging — rebase onto the default branch, get CI green, and resolve review threads (Copilot and human).
PR Triage
OutThisLife/brooklyn-skills
Maintainer triage on OTHER people's PRs/MRs — verdict of approve, supersede, or close, salvage with credit, close the cluster.
PR Update
OutThisLife/brooklyn-skills
Open a PR/MR if missing, or refresh an existing one's title and description so they match the current diff.
Related
Works with
Categories
Questions about UI Only
What does UI Only do?
While iterating on UI, do not waste time on tsc, lint, typecheck, format, full test suites, commit, or push until the user likes how it looks and works. UI Only is an agent skill from OutThisLife/brooklyn-skills. While iterating on UI, do not waste time on tsc, lint, typecheck, format, full test suites, commit, or push until the user likes how it looks and works.
When should I use UI Only?
UI Only fits situations like: figma implementation; make it look right; they want to see the UI before cleanup.
How do I install UI Only in Claude Code?
Run `npx skills add OutThisLife/brooklyn-skills --skill ui-only -a claude-code`. Or copy the skill folder (skills/ui-only in OutThisLife/brooklyn-skills) into .claude/skills/ui-only in your project. Claude Code loads it when a task matches its description.
How do I install UI Only in Codex?
Run `npx skills add OutThisLife/brooklyn-skills --skill ui-only -a codex`. Or copy the skill folder (skills/ui-only in OutThisLife/brooklyn-skills) into .agents/skills/ui-only in your project. Codex loads it when a task matches its description.
Can I use UI Only in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add OutThisLife/brooklyn-skills --skill ui-only -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-only, .gemini/skills/ui-only, .github/skills/ui-only and .opencode/skills/ui-only in your project.
What does UI Only need to run?
Going by SKILL.md and its folder, UI Only needs the command-line tools its instructions call (git and npm).
Does UI Only access the network?
SKILL.md contains no URLs. Its commands use git and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is UI Only safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does UI Only use?
UI Only is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does UI Only use?
About 364 tokens (SKILL.md is roughly 1.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to UI Only?
Skills that share tags, products or a category with UI Only: Prototype First UI (DejavuMoe/Smoji, 114 stars), Spec App Consistency Audit (leo-kuang-ai/spec-first, 107 stars), Igniteui Angular Testing (IgniteUI/igniteui-angular, 599 stars) and Bench Baton (nooga/let-go, 568 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains UI Only?
OutThisLife (a GitHub user) maintains it in OutThisLife/brooklyn-skills, which has 199 GitHub stars. The repository holds 22 skills in this directory. The repository was last updated on October 5, 2026.
Source: OutThisLife/brooklyn-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.