Web Polish skills for AI agents

Fix color chaos in a vibecoded website — too many near-duplicate colors, inconsistent semantic usage, broken dark mode, contrast failures, and colors without purpose. Establish a minimal palette with clear roles. Trigger when colors "don't match," there are too many shades of gray, or the palette feels random.

Take scattered, inconsistent UI components from a vibecoded website and unify them into a shared component library where every button, input, card, badge, and modal uses the same design language. Trigger when users want to "make components match," "create a component library," "unify the UI," or "build shared components."

Add consistent dark mode to an existing website or fix partial/broken dark mode implementation. Covers CSS variable theming, component-by-component migration, image handling, and testing. Trigger when dark mode "doesn't work on some pages," "looks broken," or needs to be added from scratch.

Extract a unified set of design tokens (colors, typography, spacing, shadows, radii) from a messy vibecoded codebase and establish a single source of truth. Trigger when users want to "unify the styles," "create CSS variables," "make a theme," "extract tokens," or "set up a design system foundation."

Unify all form elements — inputs, selects, textareas, checkboxes, toggles, radio buttons, file uploads, date pickers, and form layouts — into a consistent, accessible system. Trigger when forms look different across pages, upload buttons don't match, or form validation styling is inconsistent.

Unify all modals, dialogs, drawers, sheets, and overlay patterns across a website into a single consistent system. Trigger when modals look different across pages, close buttons don't match, overlays have different opacity, or dialog behavior is inconsistent.

Fix inconsistent navigation patterns — mismatched headers, footers, sidebars, breadcrumbs, tab bars, and mobile menus. Establish unified navigation components that work across all pages. Trigger when nav "looks different on different pages," active states don't match, or mobile menu is broken/missing.

Fix broken responsive layouts in a vibecoded website — content overflowing on mobile, misaligned grids, missing breakpoint handling, touch targets that are too small, and navigation that doesn't adapt. Trigger when things "break on mobile," "look bad on tablet," or "don't resize properly."

Fix font chaos in a vibecoded website — too many font sizes, inconsistent weights, broken heading hierarchy, mismatched line heights, and mixed font families. Establish a clean type scale and apply it everywhere. Trigger when fonts "look off," headings are inconsistent, or there are too many text sizes.

Audit a vibecoded or inconsistent website for visual and structural problems — mismatched components, font chaos, color drift, spacing irregularities, broken states, and missing interactions. Produces a prioritized fix list. Trigger when users say "this looks off," "make it consistent," "audit the UI," "fix the design," or "polish this site."

The comprehensive playbook for upgrading a vibecoded website from "it works" to "it feels premium." Combines all other web-polish skills into a prioritized workflow — audit, extract tokens, unify components, fix responsiveness, add polish. Trigger when users want to "upgrade the whole site," "make it look professional," "polish everything," or "it was vibecoded and needs to be cleaned up."

Apply the final layer of visual polish to a website — hover states, transitions, micro- interactions, loading states, empty states, scroll behavior, and the small details that make a site feel premium. Trigger when a site "works but feels cheap," needs "polish," or the user says "make it feel premium/professional/finished."

Use this skill when designing a web page or interface from scratch rather than repairing one. Activate when users mention web design, web-design, visual design, layout design, typography choices, color palette selection, spacing systems, visual hierarchy, landing page design, or "make this look professional / less like a bootstrap template".