UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Structured screenshot analysis for UI implementation and critique.
Install Clearshot
$ npx skills add udayanwalvekar/clearshot --skill clearshot -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install udayanwalvekar/clearshot clearshot --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "clearshot" agent skill from https://github.com/udayanwalvekar/clearshot/tree/main into .claude/skills/clearshot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "clearshot", 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.
$ npx skills add udayanwalvekar/clearshot --skill clearshot -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install udayanwalvekar/clearshot clearshot --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "clearshot" agent skill from https://github.com/udayanwalvekar/clearshot/tree/main into .agents/skills/clearshot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "clearshot", 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 udayanwalvekar/clearshot --skill clearshot -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install udayanwalvekar/clearshot clearshot --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "clearshot" agent skill from https://github.com/udayanwalvekar/clearshot/tree/main into .cursor/skills/clearshot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "clearshot", 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.
$ npx skills add udayanwalvekar/clearshot --skill clearshot -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install udayanwalvekar/clearshot clearshot --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "clearshot" agent skill from https://github.com/udayanwalvekar/clearshot/tree/main into .gemini/skills/clearshot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "clearshot", 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 udayanwalvekar/clearshot clearshotInstalls 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 udayanwalvekar/clearshot --skill clearshot -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "clearshot" agent skill from https://github.com/udayanwalvekar/clearshot/tree/main into .github/skills/clearshot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "clearshot", 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 udayanwalvekar/clearshot --skill clearshot -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install udayanwalvekar/clearshot clearshot --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "clearshot" agent skill from https://github.com/udayanwalvekar/clearshot/tree/main into .opencode/skills/clearshot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "clearshot", 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
clearshot- GitHub stars
- 128
- Token cost
- ~1.7k tokens
- SKILL.md length
- 830 words
- Files
- 16
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Structured screenshot analysis for UI implementation and critique.
- Any digital interface image file (png
- SKILL.md covers Gate, Analysis levels, Output and Core principles
- Runs TypeScript, JavaScript and Shell scripts from its folder
- Webp — websites
What it does
Clearshot is an agent skill from udayanwalvekar/clearshot. Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos…
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 17 other files (for example `CHANGELOG.md`, `README.md` and `bin/cli.js`).
It sits in Frontend & Design, covering UI design and Design systems. The repository describes itself as: 📸 Structured screenshot intelligence for AI coding tools. Give your AI X-ray vision for UI screenshots. The licence is MIT.
When your agent uses it
- Any digital interface image file (png
- Webp — websites
- Commands like analyse this screenshot
- Match this design
Example prompts
- “analyse this screenshot,”
- “rebuild this,”
- “match this design,”
- “/clearshot”
Requirements
- Node.js
- A Bash shell
What it can do on your machine
Read from SKILL.md and the folder at commit ff4308a. 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
Ships script files (TypeScript, JavaScript and Shell), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Clearshot loads about 1.7k tokens when it runs. Until then it costs about 188 tokens; SKILL.md has 830 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 udayanwalvekar/clearshot at commit ff4308a, republished under its MIT licence (© udayanwalvekar). 830 words, ~1,655 tokens.
Download SKILL.mdSave it as
.claude/skills/clearshot/SKILL.md (or your agent's skills folder). This skill also uses 15 other files; get the full folder from GitHub.- name
- clearshot
- description
- Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them, and for UI screenshots shared only for what they say (a message, an error). Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
Screenshot analysis
When an LLM looks at a screenshot and tries to go directly from pixels to code (or feedback or a description), it loses spatial relationships, misreads component hierarchy, and hallucinates design details. The fix: build a structured intermediate representation between "seeing the image" and "responding about it." That intermediate layer is what this skill provides.
Gate
Run the analysis only when the image is a digital interface AND the conversation is about building, debugging, designing or evaluating that UI. Slides, documents and handwritten notes are not interfaces; DevTools, terminal UIs and CLI output with UI context are.
- An interface screenshot shared for what it says (a Slack thread, an error message, an admin record): answer the question, no analysis.
- Not an interface, but the conversation is about building UI ("make a page that feels like this photo"): treat it as inspiration; describe its mood, texture and weight, no structured analysis.
- Neither: skip this skill silently.
Analysis levels
Every analysis combines facts and taste. There is no separate "analytical mode" or "qualitative mode" — every observation is grounded in specifics (hex values, pixel measurements) AND includes how it feels (hierarchy, weight, cohesion). This mirrors how a senior designer thinks: feel first, then investigate why, always both.
Level 1: Map (always runs)
Divide the screenshot into a 5×5 grid. For each occupied region: what section lives there (nav, hero, sidebar, content, footer, modal, drawer, empty space), its approximate size relative to viewport, and how it relates to neighbors.
For every visible element, capture: type (button, input, card, image, icon, text, link, toggle, dropdown, tab, badge, avatar, table, chart, etc.), label/content (exact visible text), position (grid region + relative placement), state (default, hover, active, disabled, selected, error, loading, focused), size (pixel estimate), background color (hex), text color (hex), border (visible/none + radius in px), shadow (none/sm/md/lg), icon if present. Group by section.
Also note: where the eye goes first. Whether the layout breathes or feels cramped. Whether the hierarchy is clear or competing. What feels intentional vs accidental.
Level 2: System (always runs)
Extract the design system behind what's visible:
Colors: page bg, card/surface bg, primary action, secondary, text primary, text secondary/muted, border/divider, accent, destructive, success. All hex values. Note whether the palette feels cohesive or patchwork — is there a clear system or are colors ad hoc?
Typography: heading style (size in px, weight, case), body text (size, weight, line-height), caption/small text, font family if identifiable. Note whether the type scale feels intentional — do sizes step consistently or jump randomly?
Spacing and shape: spacing pattern (tight 4-8px / comfortable 12-16px / spacious 24-32px+), border radius pattern (sharp 0-2px / subtle 4-6px / rounded 8-12px / pill), overall density (compact / comfortable / spacious). Note whether spacing is consistent or inconsistent across sections.
Show full SKILL.md (379 more words)Show less
Level 3: Blueprint (escalates when building)
This level runs when the user needs to implement, rebuild, or clone the UI from the screenshot. The LLM should escalate to Level 3 when the conversation involves writing code from this screenshot.
Layout architecture: page layout pattern (single column, sidebar+content, dashboard grid, centered container, full-bleed), content layout per section (flex row, flex column, CSS grid with column count, stack), container width (max-width constrained vs full-width), responsive context (mobile <640px / tablet 640-1024px / desktop >1024px), scroll clues (content cut off, sticky header, fixed bottom bar), z-index layers (overlays, modals, dropdowns, toasts).
Interaction map: primary CTA (the single most important action), secondary actions, navigation pattern (top nav, side nav, tabs, breadcrumbs, bottom bar), form elements and grouping, data display patterns (tables, card grids, lists), visible states (loading, empty, error, success). Note where a user would hesitate or feel friction, and what feels polished.
Output
Match the output to the context. Don't force headers and sections when a paragraph will do.
Critique/feedback: lead with what's wrong or what needs attention. Ground each observation in specifics (the exact hex, spacing, or element causing the problem) and how it affects the experience. Don't catalog everything — focus on what matters.
Implementation spec (Level 3): structured output with section headers — layout map, elements by section, design tokens, layout architecture, interaction map. This is the build document.
Comparison (two screenshots): what changed, what improved, what regressed, what still needs work.
Core principles
Be specific. "A dashboard with some cards" is never acceptable. "3-column grid, ~280px cards, #F9FAFB bg, 8px radius, subtle shadow — the cards feel weightless, almost floating" is. Every observation needs both the measurement and the judgment.
Hex over color names, pixels over vague sizes. Say #3B82F6 not "blue." Say ~16px not "some." If uncertain, give your best estimate and note it.
Group by section, not by element type. The nav's elements belong together. Don't lump all buttons across the page into one list.
Call out the non-obvious. Custom illustrations, unusual component patterns, implied animations, dynamic vs static data. These are the things that break implementations.
Match the user's pace. Rapid iteration = concise output. Detailed clone request = exhaustive. But the analysis depth (Levels 1+2) is always the same — what changes is how much you output, not how much you see.
© udayanwalvekar, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 15 other files in the repository root of udayanwalvekar/clearshot.
- SKILL.md
- .gitignore
- .npmignore
- CHANGELOG.md
- LICENSE
- README.md
- VERSION
- bin/cli.js
- convex/feedback.ts
- convex/http.ts
- convex/schema.ts
- convex/telemetry.ts
- convex/tsconfig.json
- install.sh
- package.json
- setup
Open the folder on GitHubat commit ff4308a
Compare with similar skills
Clearshot 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 |
|---|---|---|---|---|---|---|
| Clearshot this skilludayanwalvekar/clearshot | 128 | — | ~1.7k | Automated safety check: Pass | MIT | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Stitch Prompt Enhancergoogle-labs-code/stitch-skills | 8.4k | 6 repos | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Improve UI Audit and Plansibelick/ui-skills | 9.5k | — | ~2k | Automated safety check: Pass | MIT |
Similar skills
- Official
Stitch Prompt Enhancer
google-labs-code/stitch-skills
Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
Improve UI Audit and Plans
ibelick/ui-skills
Audits one product surface against its own design evidence and writes self-contained implementation plans for another agent, without touching product source.
DaisyUI Component Library
saadeghi/daisyui
Official daisyUI skill for Tailwind CSS projects, routing to install, usage, configuration, color and per-component guides before writing any HTML or JSX with its classes.
Related
Categories
Questions about Clearshot
What does Clearshot do?
Structured screenshot analysis for UI implementation and critique. Clearshot is an agent skill from udayanwalvekar/clearshot. Structured screenshot analysis for UI implementation and critique.
When should I use Clearshot?
Clearshot fits situations like: any digital interface image file (png; webp — websites; commands like analyse this screenshot; match this design.
How do I install Clearshot in Claude Code?
Run `npx skills add udayanwalvekar/clearshot --skill clearshot -a claude-code`. Or copy the skill folder (the udayanwalvekar/clearshot repository) into .claude/skills/clearshot in your project. Claude Code loads it when a task matches its description.
How do I install Clearshot in Codex?
Run `npx skills add udayanwalvekar/clearshot --skill clearshot -a codex`. Or copy the skill folder (the udayanwalvekar/clearshot repository) into .agents/skills/clearshot in your project. Codex loads it when a task matches its description.
Can I use Clearshot 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 udayanwalvekar/clearshot --skill clearshot -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/clearshot, .gemini/skills/clearshot, .github/skills/clearshot and .opencode/skills/clearshot in your project.
What does Clearshot need to run?
Going by SKILL.md and its folder, Clearshot needs TypeScript, JavaScript and a shell for the scripts in its folder. Our summary lists: Node.js; A Bash shell.
Does Clearshot access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Clearshot 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 Clearshot use?
Clearshot is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Clearshot use?
About 1.7k tokens (SKILL.md is roughly 6.6k 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 Clearshot?
Skills that share tags, products or a category with Clearshot: UI Styling (Ohh-889/skyroc, 795 stars), Stitch Prompt Enhancer (google-labs-code/stitch-skills, 8.4k stars), Design Dna (zanwei/design-dna, 1.9k stars) and Creative Tim UI Blocks (creativetimofficial/ui, 12k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Clearshot?
udayanwalvekar (a GitHub user) maintains it in udayanwalvekar/clearshot, which has 128 GitHub stars. The repository was last updated on October 4, 2026.
Source: udayanwalvekar/clearshot on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.