web-design-skills

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Full website rebuild agent. Takes an existing website URL and rebuilds it from scratch into a world-class, SEO-optimized, WCAG AA accessible, visually stunning website using Astro + Tailwind CSS, deployed to Vercel via GitHub. Executes a rigorous 14-phase process: brand extraction, content scraping, SEO audit, design audit, rebuild planning, full build with design system, copy optimization, 3 QA rounds, competitive tools research, tools build, tools QA, pre-deploy checklist, and Vercel deployment. Produces 11+ documentation deliverables. Triggers on: "rebuild website", "redesign website", "rebuild site from URL", "website rebuild", "redo this website", "make this website better", "rebuild from scratch", "full site redesign", or any request to take an existing URL and create a new, professional website from it. Also triggers when the user provides a URL and asks to build/create/design a new version of that site.

Build a stunning new website for a local business prospect. Adapted from the full website-rebuild skill but optimized for speculative local business pitches. 10-phase process: brand extraction, SEO audit, design audit, rebuild plan, full build with design system, copy optimization, combined QA, pre-deploy checklist, and output to monorepo. Uses scraped content from prospect-scrape as input. No tools/calculator research phase. Single combined QA round. Triggers on: "rebuild prospect", "local business rebuild", "build prospect site", "rebuild their site", "prospect rebuild", or any request to build a new website for a qualified prospect.

Build premium tri-lingual websites from scratch for Azerbaijani businesses. Handles data gathering (website scrape, social media, or interview), brand development, and full Astro + Tailwind build with AZ/RU/EN language support.

Generate a structured DESIGN.md file for any business or project. Produces a machine-readable design system specification that build pipelines consume during code generation. Based on VoltAgent/awesome-design-md format.

Responsive web design sub-skill. Provides mobile-first layout patterns, CSS Grid/Flexbox strategies, responsive images, fluid typography, container queries, and breakpoint systems. Pull this in whenever building or reviewing UI that must work across mobile, tablet, desktop, and large screens. Triggers on: "make it responsive", "responsive design", "mobile-first", "breakpoints", "fluid layout", or any request involving cross-device layout.