Menu
Convert UI screenshots and designs to working code. Use when translating visual designs, mockups, or screenshots into HTML/CSS/React components.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
WCAG compliance checking and accessibility improvements. Use for auditing websites, fixing a11y issues, and implementing inclusive design.
Android development patterns for Kotlin/Java including MediaProjection, Accessibility Service, Socket.IO, and foreground services. Use when working on TitanMirror or other Android projects.
Design RESTful APIs with proper routes, validation, error handling, and documentation. Use when building backend services for PSI Engine or other server applications.
Automate browser interactions including form filling, clicking, typing, navigation, and screenshot capture. Use this skill when testing web apps, automating uploads, or validating UI on TikTok, YouTube, or other web platforms.
Build Chrome Extensions with Manifest V3, background service workers, content scripts, and message passing. Use when developing TikTok Uploader extension or any browser extensions.
Automated CI/CD pipeline setup with GitHub Actions, deployment strategies, and automation workflows. Use for build automation, testing, and deployment.
| name | vision-to-code |
| description | Convert UI screenshots and designs to working code. Use when translating visual designs, mockups, or screenshots into HTML/CSS/React components. |
Page
├── Header (nav, logo, menu)
├── Hero (title, subtitle, CTA)
├── Features (grid of cards)
├── Testimonials (carousel)
└── Footer (links, social)
<div className="card">
<img src={image} alt={title} className="card-image" />
<div className="card-content">
<h3 className="card-title">{title}</h3>
<p className="card-description">{description}</p>
<button className="card-button">Learn More</button>
</div>
</div>
.card {
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-4px);
}
<nav className="navbar">
<div className="logo">Brand</div>
<ul className="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
<button className="cta-button">Get Started</button>
</nav>
| Visual Element | CSS Property | Example |
|---|---|---|
| Primary Color | --primary | #6366f1 |
| Background | --bg | #f8fafc |
| Text | --text | #1e293b |
| Border Radius | --radius | 12px |
| Shadow | --shadow | 0 4px 6px rgba(0,0,0,0.1) |
| Font | --font | 'Inter', sans-serif |
/* Mobile First */
.container {
padding: 1rem;
}
/* Tablet */
@media (min-width: 768px) {
.container {
padding: 2rem;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}