# Claude Code skills for websites, landing pages and design

Claude Code skills to build landing pages, animate with GSAP, define design systems and check accessibility, for designers and product teams.

These Claude Code skills help you build and improve websites without starting from scratch. To begin, [build a conversion-focused landing page](https://skills.sgomez.dev/en/s/web--landing-page.md) writes the copy first and the page second, and [audit a page for conversion](https://skills.sgomez.dev/en/s/web--conversion-optimizer.md) proposes specific changes to copy, layout and trust. If you already have a site, [redesign an existing website](https://skills.sgomez.dev/en/s/redesign-skill.md) spots generic patterns and replaces them.

Animation has several GSAP skills: [create a scroll experience](https://skills.sgomez.dev/en/s/web--gsap-scroll-experience.md), [build an animated hero section](https://skills.sgomez.dev/en/s/web--gsap-hero-cinematic.md), [animate text by character or word](https://skills.sgomez.dev/en/s/web--gsap-text-fx.md) or [add page transitions](https://skills.sgomez.dev/en/s/web--gsap-page-transitions.md). For the visual base, [define a design system](https://skills.sgomez.dev/en/s/web--design-system.md) sets tokens, typography and color, and [design and polish interfaces](https://skills.sgomez.dev/en/s/impeccable.md) works on hierarchy and detail.

There is also review and publishing: [audit interface accessibility](https://skills.sgomez.dev/en/s/accessibility--a11y-audit.md) checks WCAG 2.1 compliance, [fix accessibility issues](https://skills.sgomez.dev/en/s/accessibility--a11y-fix.md) repairs them, and [deploy to Vercel](https://skills.sgomez.dev/en/s/vercel-deploy.md) returns a preview link. Each one starts from a plain-language request typed into Claude Code, so you describe the page or the problem and review what comes back.

Web version: https://skills.sgomez.dev/en/web
Updated 27 Sept 2026

## Skills (62)

- [Accessibility audit (WCAG 2.1) (/accessibility--a11y-audit)](https://skills.sgomez.dev/en/s/accessibility--a11y-audit.md): Reads a component or page and lists WCAG 2.1 accessibility issues, each with severity, the criterion it breaks, its code location and a code fix.
- [Fixing UI accessibility issues (/accessibility--a11y-fix)](https://skills.sgomez.dev/en/s/accessibility--a11y-fix.md): Fixes accessibility problems in a component or page: semantic HTML, keyboard support, ARIA attributes and form labels, keeping the visual design.
- [Building an animation from scratch (/animate)](https://skills.sgomez.dev/en/s/animate.md): Decides whether something should animate at all and, if so, writes the animation with the right curve, duration and properties, reduced-motion support included.
- [Expo and React Native animations (/animate-expo)](https://skills.sgomez.dev/en/s/animate-expo.md): Writes animations for Expo and React Native apps with Reanimated and Gesture Handler: gestures, sheets, screen transitions, press feedback and haptics.
- [Naming a motion effect (/animation-vocabulary)](https://skills.sgomez.dev/en/s/animation-vocabulary.md): Turns a vague description of a web animation effect into its exact term, so you know what to ask an AI or a designer for.
- [Apple-style fluid web interfaces (/apple-design)](https://skills.sgomez.dev/en/s/apple-design.md): Applies Apple's interface design principles to the web: gestures, spring animations, interruptible transitions, translucent materials and typography.
- [Sonner toast library guide (/ask-sonner)](https://skills.sgomez.dev/en/s/ask-sonner.md): Helps you set up, style and troubleshoot Sonner, the React toast library: the Toaster, promise toasts, theming, positioning and common bugs.
- [Brutalist web interface design (/brutalist-skill)](https://skills.sgomez.dev/en/s/brutalist-skill.md): Design direction for industrial brutalist websites: rigid grids, extreme type contrast and analog effects, for data-heavy dashboards or portfolios.
- [Building accessible UI components (/building-components)](https://skills.sgomez.dev/en/s/building-components.md): A guide to building accessible, composable UI components: APIs, state, design tokens, styling, publishing to npm or a registry, and documentation.
- [Brand identity and graphic design (/design)](https://skills.sgomez.dev/en/s/design.md): Covers brand identity, design tokens, logos, slide decks, banners, icons and social media images, routing each task to bundled sub-skills and references.
- [Building or auditing UI motion (/design-motion-principles)](https://skills.sgomez.dev/en/s/design-motion-principles.md): Builds components with purposeful motion, or audits existing animations, using the approaches of Emil Kowalski, Jakub Krehel and Jhey Tompkins.
- [Design tokens and component specs (/design-system)](https://skills.sgomez.dev/en/s/design-system.md): Defines three-layer design tokens (primitive, semantic, component), CSS variables, spacing and type scales, and component specs; also generates slides.
- [UI polish and design engineering (/emil-design-eng)](https://skills.sgomez.dev/en/s/emil-design-eng.md): Applies Emil Kowalski's philosophy on UI polish, animation decisions and invisible details, and reviews UI code in Before/After tables.
- [Where a UI should animate (/find-animation-opportunities)](https://skills.sgomez.dev/en/s/find-animation-opportunities.md): Scans a codebase or UI, proposes at most 5-7 places where motion helps with exact values, and rejects the rest. Read-only: it changes no code.
- [Premium landing pages with GSAP (/gpt-tasteskill)](https://skills.sgomez.dev/en/s/gpt-tasteskill.md): Design rules for pages with AIDA structure, wide editorial typography, bento grids and scroll-driven GSAP animations.
- [GSAP core animations (/gsap-core)](https://skills.sgomez.dev/en/s/gsap-core.md): A guide to the core GSAP API: to, from, fromTo, easing, duration, stagger and matchMedia for responsive and reduced-motion animation.
- [GSAP in Vue and Svelte (/gsap-frameworks)](https://skills.sgomez.dev/en/s/gsap-frameworks.md): Explains how to use GSAP in Vue, Nuxt, Svelte and SvelteKit: lifecycle hooks, scoped selectors and cleanup when components unmount.
- [GSAP animation performance (/gsap-performance)](https://skills.sgomez.dev/en/s/gsap-performance.md): A guide to keeping GSAP animations smooth: prefer transforms, avoid layout thrashing, use will-change and batch updates.
- [GSAP plugins guide (/gsap-plugins)](https://skills.sgomez.dev/en/s/gsap-plugins.md): A guide to GSAP plugins: registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, SplitText, SVG plugins, CustomEase and GSDevTools.
- [GSAP with React and Next.js (/gsap-react)](https://skills.sgomez.dev/en/s/gsap-react.md): Explains how to use GSAP in React and Next.js with the useGSAP hook, refs, gsap.context() and cleanup when components unmount.
- [Scroll animations with GSAP (/gsap-scrolltrigger)](https://skills.sgomez.dev/en/s/gsap-scrolltrigger.md): A guide to GSAP ScrollTrigger: scroll-linked animations, pinned sections, scrub, parallax and triggers.
- [Sequencing animations with GSAP (/gsap-timeline)](https://skills.sgomez.dev/en/s/gsap-timeline.md): A guide to GSAP timelines: gsap.timeline(), the position parameter, nesting and playback control for sequencing animations.
- [gsap.utils helper functions (/gsap-utils)](https://skills.sgomez.dev/en/s/gsap-utils.md): A guide to the gsap.utils helpers: clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap and pipe.
- [Websites and apps with Higgsfield (/higgsfield-websites)](https://skills.sgomez.dev/en/s/higgsfield-websites.md): Builds, edits and deploys websites, apps and games through the Higgsfield CLI, as a React and TanStack Start app on a Cloudflare Worker.
- [Design image to website code (/image-to-code-skill)](https://skills.sgomez.dev/en/s/image-to-code-skill.md): For visually important sites, first generates section-by-section design images, analyzes them, then codes the website to match them closely.
- [Mobile app screen concept images (/imagegen-frontend-mobile)](https://skills.sgomez.dev/en/s/imagegen-frontend-mobile.md): Generates images only of iOS or Android app screens and flows inside phone mockups, with clear hierarchy and consistency. It writes no code.
- [Landing page design images (/imagegen-frontend-web)](https://skills.sgomez.dev/en/s/imagegen-frontend-web.md): Generates one horizontal image per website section with a consistent palette and varied layouts, as a design reference for building the page.
- [Designing and polishing web interfaces (/impeccable)](https://skills.sgomez.dev/en/s/impeccable.md): Designs, redesigns, critiques or polishes website and app interfaces: visual hierarchy, typography, color, motion, accessibility and UX copy.
- [Animation audit and improvement plan (/improve-animations)](https://skills.sgomez.dev/en/s/improve-animations.md): Surveys a project's motion code and delivers a prioritized audit with self-contained plans for other agents to run. It plans only, never edits source.
- [Minimalist editorial-style interfaces (/minimalist-skill)](https://skills.sgomez.dev/en/s/minimalist-skill.md): Design direction for clean, document-style interfaces: warm monochrome palette, typographic contrast, flat bento grids and muted pastels.
- [Complete code, no truncation (/output-skill)](https://skills.sgomez.dev/en/s/output-skill.md): Makes Claude deliver whole files and answers with no "rest stays the same" or TODO stubs, and pause cleanly when the output will not fit.
- [Pick a frontend library (/pick-ui-library)](https://skills.sgomez.dev/en/s/pick-ui-library.md): Recommends one frontend library for your task (toasts, charts, drag and drop, OTP inputs and more) from a curated list by Emil Kowalski.
- [UI variants side by side (/prototype)](https://skills.sgomez.dev/en/s/prototype.md): Builds several genuinely different versions of a UI piece you describe and shows them behind a visual picker, so you can flip through and promote a winner.
- [Redesign an existing site (/redesign-skill)](https://skills.sgomez.dev/en/s/redesign-skill.md): Audits an existing website or app, flags generic AI-looking patterns and applies premium design upgrades without breaking functionality or starting over.
- [Animation code review (/review-animations)](https://skills.sgomez.dev/en/s/review-animations.md): Reviews animation and motion code against a high craft bar based on Emil Kowalski's philosophy. It flags by default and only approves work that earns it.
- [Fly-through scroll landing page (/scroll-world)](https://skills.sgomez.dev/en/s/scroll-world.md): Builds a landing page where scrolling drives a camera that flies from scene to scene without cuts, using Higgsfield clips and a portable scroll engine.
- [Premium agency-style web design (/soft-skill)](https://skills.sgomez.dev/en/s/soft-skill.md): Has Claude design websites that feel expensive: it sets fonts, spacing, shadows, card structures and motion, and blocks defaults that look cheap.
- [DESIGN.md for Google Stitch (/stitch-skill)](https://skills.sgomez.dev/en/s/stitch-skill.md): Generates a DESIGN.md file of typography, color, layout and motion rules so Google Stitch produces premium, non-generic screens.
- [Frontend with real design taste (/taste-skill)](https://skills.sgomez.dev/en/s/taste-skill.md): Reads your brief, infers a design direction and builds landing pages, portfolios or redesigns that do not look templated, auditing first on redesigns.
- [shadcn/ui and Tailwind styling (/ui-styling)](https://skills.sgomez.dev/en/s/ui-styling.md): Helps build accessible interfaces with shadcn/ui components, Tailwind CSS styling and canvas visual designs: layouts, themes, dark mode and forms.
- [UI/UX design guidance (/ui-ux-pro-max)](https://skills.sgomez.dev/en/s/ui-ux-pro-max.md): Searches a local library of styles, palettes, font pairings, UX guidelines and icons to design, review or fix web, mobile and desktop interfaces.
- [Deploy to Vercel (/vercel-deploy)](https://skills.sgomez.dev/en/s/vercel-deploy.md): Deploys your app or website to Vercel as a preview and returns the link; it only deploys to production when you explicitly ask.
- [React and Next.js performance (/vercel-react-best-practices)](https://skills.sgomez.dev/en/s/vercel-react-best-practices.md): Applies 62 Vercel Engineering performance rules when writing, reviewing or refactoring React and Next.js: data waterfalls, bundle size and re-renders.
- [Pre-built animated React components (/web--animated-components)](https://skills.sgomez.dev/en/s/web--animated-components.md): Integrates ready-made animated React components into your project: Magic UI (150+ on shadcn and Tailwind) and React Bits (90+ effects).
- [Cinematic web animations (/web--animations)](https://skills.sgomez.dev/en/s/web--animations.md): Builds the web animation you ask for, such as 3D models, horizontal scroll, WebGL, particles or shaders, with a focus on GPU performance and accessibility.
- [Awwwards-level React animations (/web--awwwards-animations)](https://skills.sgomez.dev/en/s/web--awwwards-animations.md): Picks the right tool (GSAP, Motion, Anime.js or Lenis) and builds smooth, accessible React animations: scroll effects, magnetic hovers and reveals.
- [Web conversion audit (/web--conversion-optimizer)](https://skills.sgomez.dev/en/s/web--conversion-optimizer.md): Audits a landing page or web app and proposes specific changes to copy, layout, UX and trust so more visitors sign up, buy or get in touch.
- [UI polish and animation details (/web--design-engineering)](https://skills.sgomez.dev/en/s/web--design-engineering.md): Applies Emil Kowalski's design engineering philosophy to polish interfaces: animation decisions, invisible details and Before, After, Why review tables.
- [Complete design system (/web--design-system)](https://skills.sgomez.dev/en/s/web--design-system.md): Creates an opinionated design system with tokens, typography, color and components, starting from your product type, personality and brand colors.
- [AI graphic design studio (/web--graphic-design)](https://skills.sgomez.dev/en/s/web--graphic-design.md): Turns a brief into self-contained HTML, CSS and SVG designs: mockups, social graphics, brand kits, pitch decks and infographics, with three variations.
- [Animated galleries with GSAP (/web--gsap-creative-gallery)](https://skills.sgomez.dev/en/s/web--gsap-creative-gallery.md): Builds interactive image galleries with GSAP: FLIP filter transitions, infinite scroll, animated masonry layouts and lightbox effects.
- [Cinematic hero section with GSAP (/web--gsap-hero-cinematic)](https://skills.sgomez.dev/en/s/web--gsap-hero-cinematic.md): Builds a website hero section with GSAP: layered reveals, 3D parallax, animated typography and video backgrounds, with a reduced-motion fallback.
- [Micro-interactions with GSAP (/web--gsap-micro-interactions)](https://skills.sgomez.dev/en/s/web--gsap-micro-interactions.md): Implements micro-interactions in React with GSAP: custom cursors, magnetic buttons, tilt cards, spotlight effects and scroll indicators.
- [Page transitions with GSAP (/web--gsap-page-transitions)](https://skills.sgomez.dev/en/s/web--gsap-page-transitions.md): Builds page transitions for React and Next.js with GSAP: overlay wipes, shared-element transitions and coordinated route animations.
- [Animated preloaders with GSAP (/web--gsap-preloader)](https://skills.sgomez.dev/en/s/web--gsap-preloader.md): Builds animated loading screens with GSAP: progress bars, percentage counters, animated logos, skeleton screens and cinematic intro sequences.
- [Scroll animations with GSAP (/web--gsap-scroll-experience)](https://skills.sgomez.dev/en/s/web--gsap-scroll-experience.md): Builds scroll-driven experiences with GSAP ScrollTrigger: parallax layers, pinned sections, horizontal scroll and timelines scrubbed by scroll position.
- [SVG animation with GSAP (/web--gsap-svg-morphing)](https://skills.sgomez.dev/en/s/web--gsap-svg-morphing.md): Animates SVG shapes with GSAP: path drawing, shape morphing, animated icons, blob shapes, wave dividers and motion along a path.
- [Kinetic text effects with GSAP (/web--gsap-text-fx)](https://skills.sgomez.dev/en/s/web--gsap-text-fx.md): Builds kinetic typography with GSAP in React: split text by character or word, scramble, glitch, 3D rotation, gradient sweep and text on a curved path.
- [High-end landing page (/web--landing-page)](https://skills.sgomez.dev/en/s/web--landing-page.md): Generates a unique, conversion-focused landing page, writing the copy first and delivering a full Next.js project; it bans the usual AI-page patterns.
- [Production-ready SPA scaffold (/web--spa-scaffold)](https://skills.sgomez.dev/en/s/web--spa-scaffold.md): Scaffolds a production-grade single-page app: it picks the stack from your requirements and adds code splitting, error states and accessibility.
- [Polished UI components (/web--ui-components-pro)](https://skills.sgomez.dev/en/s/web--ui-components-pro.md): Builds typed UI components with animation, loading, error and empty states, theming and built-in accessibility for your project.
- [Web UI guidelines review (/web-design-guidelines)](https://skills.sgomez.dev/en/s/web-design-guidelines.md): Checks your UI code against the Web Interface Guidelines, fetched fresh each run, and reports each finding by file and line.