Screenshot To Code
Takes a screenshot of any UI and spits out working code in React, Vue, or plain HTML/CSS. It analyzes layout structure, extracts exact colors, matches spacing, and builds component hierarchies that actually make sense. Defaults to React with Tailwind for modern stuff, plain HTML/CSS for simpler pages. The skill is thorough about responsive design and accessibility attributes, which saves you from backtracking later. Honestly most useful when you see a design you want to replicate quickly or need to turn mockups into a starting point without writing boilerplate from scratch. Won't be pixel perfect on complex designs, but it gets you 80% there with clean, deployable code.
- skills.sh installs
- 1.5K
- GitHub stars
- 422
- last updated
- Aug 21, 2026
Install
$ npx -y skills add onewave-ai/claude-skills --skill screenshot-to-code --agent claude-codeInstalls into .claude/skills of the current project.
Files
Screenshot to Code
Recreate the UI in the image as clean, responsive, accessible code, then check the render against the image.
Workflow
- Pick the target stack. If the user is inside a project, match it: read
package.jsonfor React/Next/Vue and the Tailwind version, and reuse existing components, tokens, and icon libraries. Do not ask when the repo already answers it. With no project:- Single screen or quick prototype: one self-contained
index.html(Tailwind via the browser build, see references/stack-setup.md). - App or multi-screen: React + TypeScript + Tailwind v4 on Vite.
- User mentions Next.js, SSR, or routing: Next.js App Router.
- Single screen or quick prototype: one self-contained
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/onewave-ai/claude-skills
- Categories
- Frontend Development, Design & UI/UX
- First seen
- May 16, 2026
More from onewave-ai/claude-skills
All 108- Csv Excel Merger1.2K
- Technical Writer1.1K
- Sports Betting Analyzer850
- Css Animation Creator830
- Social Media Content Repurposer775
- Job Application Optimizer721
- Workout Program Designer707
- Knowledge Base Builder684
- Color Palette Extractor649
- Stock Photo Finder613
- Font Pairing Suggester601
- Itinerary Optimizer598
- Presentation Design Enhancer596
- Quiz Maker539
- Cold Email Sequence Generator519
- Linkedin Sales Navigator Alt510
- Seo Content Optimizer488
- Portfolio Analyzer485
- Competitor Price Tracker475
- Reddit Thread Analyzer471
- Email Template Generator459
- Contact Hunter455
- Budget Optimizer448
- Contract Analyzer430
Recommended
More Frontend Development
senior-fullstackalirezarezvani/claude-skillsFullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and complexity scoring1.4Kskills.sh installs
web-motion-designdylantarre/animation-principlesUse when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.1.4Kskills.sh installs
alpine-jsmindrally/skillsAlpine.js development guidelines for lightweight reactive interactions with Tailwind CSS and various backend frameworks.1.4Kskills.sh installs
safe-area-handlingcap-go/capgo-skillsComplete guide to handling safe areas in Capacitor apps for iPhone notch, Dynamic Island, home indicator, and Android cutouts. Covers CSS, JavaScript, and nativ1.4Kskills.sh installs
documentation-lookupupstash/context7This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation1.4Kskills.sh installs
tanstack-rangertanstack-skills/tanstack-skillsHeadless utilities for building range and multi-range sliders in TS/JS, React, Vue, Solid, Svelte & Angular.1.3Kskills.sh installs