Menu
As long as you are doing UI / style-related work, you should load this skill
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
Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project. Use when the user asks to "kill AI slop", "de-slop", "remove the AI look", "make this not look AI-generated", or clean up a landing page / UI / docs that feels templated. Detects and fixes the catalogue of tells: indigo→violet gradients, gradient-clip headlines, the default semantic palette, one-hue status boxes, atmospheric gradients, serif-italic emphasis, highlighted keywords, AI copywriting voice ("not just X — it's Y"), emoji everywhere, glowing status dots, colored-left-border callouts, pastel icon tiles, glassmorphism, over-rounding, oversized shadows, borders that die at corners, badge & pill spam, AI-drawn SVG icons, kickers over every heading, flat type hierarchies, invented stat rows (10k+ / 99.9% / 24/7), 01/02/03 section markers, cards nested in cards, the default Inter/Space Grotesk look, and more. Works on HTML/CSS, React/Vue/Svelte/Astro, Tailwind, PHP, and Markdown copy.
High-fidelity HTML design and prototype creation. Use this skill whenever the user asks to design, prototype, mock up, or build visual artifacts in HTML — including slide decks, interactive prototypes, landing pages, UI mockups, animations, or any visual design work. Also use when the user mentions Figma, design systems, UI kits, wireframes, presentations, or wants to explore visual design directions. Even if they just say "make it look good" or "design a screen for X", this skill applies.
You are required to load this before writing code. Load this skill for code-related task. Do not use this skill for simple reading code or analyze tasks unless it's related to personal codestyle.
Finds root cause before applying fixes for errors, crashes, regressions, failing tests, broken behavior, and screenshot-reported defects. Use when users report in any language errors, crashes, broken behavior, regressions, failing tests, screenshot evidence, or something that used to work and now fails. Not for code review or new features.
Turns rough ideas into approved, decision-complete plans with validated structure before coding. Use when users ask in any language for planning, architecture, design direction, feasibility, value judgment, or whether a feature is worth doing before implementation. Not for bug fixes or small edits.
Void skill for app development and CLI operations. Use this skill to route user requests to the appropriate bundled Void docs.
| name | designing-ui |
| description | As long as you are doing UI / style-related work, you should load this skill |
Use icons boldly — they are the most expressive way to communicate button and UI purpose at a glance.
Reuse the theme color already established in the project. Do not introduce new colors arbitrarily.
slate, gray, zinc, neutral, stone, taupePrefer opacity-based color expressions over hardcoded hex/rgb values.
bg-black/10 reads more clearly than bg-[#1a1a1a]Default to a flat, border-defined layout. Avoid decorative depth unless explicitly requested.
border, divide-*, ring) are the primary structural tool