Art & Design

Use when building or restyling a website, landing page, or UI with an AI coding tool — forces concrete art direction (named typefaces, token-based color, structural layout, specified motion, real assets) so the output looks designed instead of like every other AI-built site.

Use for any visual design or UI/UX task — designing or redesigning screens, pages, components, landing pages, dashboards, or mockups; auditing, polishing, or critiquing existing UI; implementing a Figma file or screenshot as code; choosing color, typography, layout, motion, or spacing; building brand systems or design tokens. Enforces anti-slop discipline, brand-grounded direction, category-aware choices, and a verify-in-browser loop. Load reference/ files on demand, not all at once.

├── archive/ # Individual site/tool entries (one file per site)

Gives AI coding agents (Claude Code, Cursor, Codex) access to real Unsplash stock photos without any API key setup. Agents search, save images directly into the repo, and batch-fill entire landing page image sets in one command.

GetDRIP is a library of “design skills” for vibe coding projects. It let you add a complete design for your react website in one command.

Apply 2026 web design trends as complete styling systems to any artifact — landing pages, dashboards, presentations, components, or creative builds. Use this skill whenever the user mentions a design trend by name (e.g. "neo-brutalism", "neumorphism", "retrofuturism", "maximalism", "collage", "gamified", "dark mode", "vibrant", "bold typography", "3D immersive", "experimental navigation", "sustainable design", "motion design") or asks for something "trendy", "2026 style", "anti-design", "dopamine design", "Y2K", "retro-futuristic", "scrapbook style", "raw aesthetic", or similar. Also trigger when the user says "apply a trend", "style this like...", "make it feel like...", or references any of the 13 web design trends or 4 AI design trends. Even if they just say "make this look cool" or "give this some personality" — consider offering trend options from this skill.

Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file; a separate path can mirror the Astro marketing site in `apps/landing-page/`. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically.

Audit a landing page receiving paid traffic against post-click conversion best practice and return a prioritised fix list - message match to the ad, above-the-fold clarity, form friction, trust, speed, mobile, policy risk - with every finding labelled by evidence class and no statistical claims on thin data. Use whenever the user says their ads get clicks but no conversions, asks why a landing page isn't converting, or mentions post-click experience, message match, conversion friction, form friction, or CPA rising after the click - even if they never say 'landing page audit'. Covers B2B and B2C on any platform. Audit only. Do NOT use for pre-click account problems - use mbfinotti/advertising-skills@ad-account-diagnostic instead.

Set up and evolve Astro content collections with typed schemas and reliable querying patterns.

当用户要为 AI 助手/虚拟角色做可展示的单页落地站（GitHub Pages、强动效、真人对话接入、脸/视频 Hero）时使用。

Add and configure Astro integrations, adapters, and UI framework tooling.

Plan and execute migrations to Astro or between Astro versions with minimal regressions.

Apply performant, accessible, and maintainable defaults when building or reviewing Astro projects.

Edit `app/page.tsx` in the generated site. Keep one `<main>`, a skip link, and a heading that matches `site.config.json` `name`.

End-to-end AI design system with 190+ battle-tested styles, AI image generation, and pixel-perfect export. Designs social media posters, carousels, YouTube thumbnails, PDFs, and full websites — entirely from natural language. Includes brand onboarding, self-review quality system, Puppeteer export scripts, and 6 teachable design skills. Built through 300+ real design experiments. Use this skill when the user asks to: design a poster, create social media content, build a carousel, make a YouTube thumbnail, generate a PDF/report, design a website or landing page, create any visual content, or improve the look of any HTML/CSS.

Create Astro components, pages, and layouts with accessible markup and minimal client-side JavaScript.

Audits and designs SaaS and website journeys (pricing pages, landing pages and CTAs, checkout and forms, onboarding) to cut decision load and turn visitors into buyers, using Hick's law, choice-overload research, defaults and progressive disclosure, without dark patterns. Use when the user asks to improve conversion, simplify a pricing page, reduce plans or options, fix competing CTAs, shorten a checkout or form, streamline onboarding, review a page for choice overload or analysis paralysis, or mentions Hick's law, paradox of choice or too many options.

Make HTML pages that look designed by a person, not generated. Covers five kinds of page - report, slide deck, dashboard, landing page and docs - in one visual system (neutral grey, one sans typeface, graph-paper line art, a single accent colour). Use whenever the user asks for an HTML page, report, one-pager, write-up, presentation, slides, pitch deck, dashboard, landing page, product page, docs or guide page, or asks to make an existing HTML page look better or less like AI.

Implement purposeful CSS, SVG or JavaScript web animation with reduced-motion and failure fallbacks. Use for scroll reveals, progress and interactive transitions, not AI video generation or standalone video editing.

Add purposeful transitions and feedback while respecting reduced-motion preferences and avoiding distraction. Use when adding motion, transitions, hover effects, or interactive feedback to an interface.

This skill should be used when the user asks to "animate an SVG", "make a line draw itself on", "do a stroke draw-on / signature animation", "morph one shape into another", "move an element along a path", "animate an icon/logo", or "animate an SVG gradient or filter". Covers stroke-dashoffset draw-on, path morphing, motion-along-path, and animated icons/gradients/filters via CSS, SMIL, and GSAP.

This skill should be used when the user asks to "respect prefers-reduced-motion", "honor reduced motion", "make my animations accessible", "fix vestibular / motion-sickness issues", "add a useReducedMotion hook", "gate GSAP / Framer Motion / Lenis for reduced motion", or "meet WCAG 2.3.3 / C39". Provides tiered (not all-or-nothing) reduced-motion patterns in CSS and JS.

This skill should be used when the user asks to "fix janky CSS animation", "make animation 60fps", "stop layout thrashing", "animate width/height/top/left smoothly", "convert animation to transform", "animate box-shadow performantly", "animate height auto", "FLIP animation", or "why is my scroll/hover animation choppy".

Deploy the SEO/UX-optimised GitHub Pages landing page (index.html + .nojekyll) to Cologne dictionary repos missing it; discovery/template scripted (cologne_pages_landing.py), per-dict facts stay LLM/human. Sonnet 5 (claude-sonnet-5) tier. Do not use for full repo bootstrap — that is /cologne-onboard-repo; this only deploys the GitHub Pages landing page.