# Tools > Every listed resource, editors’ picks first. The filters below can be combined. - Search: append `?q=` to the URL. Separate several keywords with spaces; all of them must match. Matches name, repository, tags, professions, description and README. - Filter by type: append `?type=` to the URL. - Filter by profession: append `?profession=` to the URL. Separate several ids with commas; a resource matches when it suits any of them. Ids are listed at https://hebbmind.com/api/v1/professions - Filter by tag: append `?tag=` to the URL. Separate several tags with commas; a resource must carry all of them. Tags are listed at https://hebbmind.com/api/v1/tags Resources for DevOps / SRE or ML / AI or Design, Tagged `web-development`: 79 items. > - DevOps / SRE: Deployment, monitoring, cloud resources and reliability. > - ML / AI: Model training, evaluation and LLM application development. > - Design: Interface, interaction, visual and brand design. - [Frontend Design](https://hebbmind.com/skill/frontend-design.md): [Skill] Has the agent commit to a visual direction before building or redesigning an interface, making deliberate choices on color, type and layout instead of generic, templated AI UI. Official Anthropic skill. - [Frontend Design](https://hebbmind.com/plugin/frontend-design.md): [Plugin] Has the agent settle on a clear aesthetic direction first, then write distinctive, production-ready frontend interfaces that avoid the generic AI look. Official Anthropic plugin. - [Figma MCP Server](https://hebbmind.com/mcp/mcp-server-guide.md): [MCP] Figma's official remote MCP: hands components, variables and layout from your designs to the agent to generate code, and can create and edit designs on the canvas. Needs Figma sign-in; Starter plans and View or Collab seats get only 6 read calls a month. - [UI UX Pro Max](https://hebbmind.com/skill/ui-ux-pro-max-skill.md): [Skill] UI design knowledge base skill: looks up UI styles, palettes, font pairings, charts and UX guidelines by product type and generates a full design system, covering 22 stacks including React, SwiftUI and Flutter. Needs Python 3 locally. - [UI UX Pro Max](https://hebbmind.com/plugin/ui-ux-pro-max-skill.md): [Plugin] UI/UX design knowledge base plugin with searchable UI styles, color palettes, font pairings, charts and guidelines for 20+ tech stacks; generates complete design system recommendations by product type. Needs Python 3 installed locally. - [shadcn/ui](https://hebbmind.com/skill/shadcn.md): [Skill] Official shadcn/ui skill: uses the shadcn CLI to read project config and component docs, then adds, searches, composes and fixes components following styling, form and accessibility rules. Can also start new projects from presets. - [Taste Skill](https://hebbmind.com/skill/taste-skill.md): [Skill] Helps agents build frontends that don't look templated: picks a design direction first, then tunes layout variance, motion intensity and information density. Also includes redesign audits, minimalist and brutalist styles, and design reference generation. - [Impeccable](https://hebbmind.com/plugin/impeccable.md): [Plugin] Frontend design quality plugin: one skill plus 24 commands (audit, critique, polish and more) and 61 built-in deterministic rules that find common design flaws in AI-generated interfaces and fix them one by one. - [Impeccable](https://hebbmind.com/skill/impeccable.md): [Skill] Frontend design polish skill: one skill with 24 commands such as polish, audit, critique and typeset, plus 61 deterministic rules that catch typical AI-generated UI problems, with live iteration in the browser. Works with Claude Code, Codex, Cursor and others. - [mkcert](https://hebbmind.com/cli/mkcert.md): [CLI] Creates a local CA with one command and issues development HTTPS certificates trusted by your system and browsers, for localhost, IPs and wildcard domains, with no extra configuration. Run mkcert -install once first to add the root certificate to the trust store. - [Skills For Designers and Engineers](https://hebbmind.com/skill/emilkowalski-skills.md): [Skill] Design engineering skills by Emil Kowalski, author of Sonner and Vaul: choose animation easing and durations, review and improve motion, apply Apple design principles, make web apps feel native on phones, and help pick UI libraries and prototype multiple versions. - [Playground](https://hebbmind.com/plugin/playground.md): [Plugin] Has the agent build single-file HTML interactive playgrounds: visual controls on one side, live preview on the other, and a prompt to copy back into Claude. Templates for design tuning, data exploration, concept maps, doc annotation, code review and architecture diagrams. By Anthropic. - [UI Design](https://hebbmind.com/plugin/ui-design.md): [Plugin] UI/UX design plugin from the wshobson/agents marketplace with 3 subagents, 9 skills and commands for design review, component creation and accessibility audits, covering design tokens, WCAG 2.2, responsive layout, iOS HIG and Material Design 3 for in-code UI design and review. - [Web Design Guidelines](https://hebbmind.com/skill/web-design-guidelines.md): [Skill] Reviews UI code against Vercel's Web Interface Guidelines, covering accessibility, focus, forms, animation, typography, dark mode and more, listing issues as file:line. Fetches the latest rules before each review. Maintained by Vercel. - [DESIGN.md](https://hebbmind.com/cli/design-md.md): [CLI] Google Labs' DESIGN.md format and CLI: designers capture colors, typography and spacing in a file for agents; lint checks broken references and WCAG contrast, diff compares versions and export outputs design tokens for Tailwind and more. Needs Node.js; the format is in alpha. - [SVGO](https://hebbmind.com/cli/svgo.md): [CLI] SVG optimizer CLI and Node.js library: shrinks SVGs by removing editor metadata, comments, hidden elements and redundant attributes, processes whole directories recursively, and gives fine control through plugin config. - [GSAP AI Skills](https://hebbmind.com/skill/gsap-skills.md): [Skill] GSAP's official animation skills: teach agents to use the core API, timelines, ScrollTrigger and plugins correctly, including React, Vue and Svelte integration and animation performance. Maintained by GreenSock; all plugins are free. - [Vercel CLI](https://hebbmind.com/cli/vercel-cli.md): [CLI] Vercel's official CLI: deploy frontend and full-stack projects with one command and manage preview environments, environment variables, domains and logs. Requires a Vercel account (free tier available). - [Framelink MCP for Figma](https://hebbmind.com/mcp/figma-context.md): [MCP] Simplifies Figma designs into layout and style data for coding agents, so UIs built from the design are more accurate than working from screenshots. Requires a Figma personal access token. - [Garden Skills](https://hebbmind.com/skill/garden-skills.md): [Skill] ConardLi's skill collection: turn articles or scripts into web presentations you can screen-record as videos (23 themes, optional voiceover), lay out material as shareable long-form web pages, search local knowledge base folders, web design, and GPT-Image-2 image generation with 79 templates. - [Claude Skills (Fullstack Dev Skills)](https://hebbmind.com/plugin/jeffallan-claude-skills.md): [Plugin] Bundles 60+ full-stack specialist skills into one plugin: experts for 12 languages including Python, TypeScript, Go, Rust and Java, and frameworks like React, Django and Spring Boot, activated automatically by request. Also includes Jira and Confluence workflow commands (needs Atlassian MCP). - [Scroll World](https://hebbmind.com/skill/scroll-world.md): [Skill] Builds a scroll-scrubbed fly-through 3D world landing page for any brand: generates scene stills with Higgsfield and seamless camera clips via Monid (Seedance 2.0, paid per clip) or Higgsfield credits, then wires a vanilla JS scrub engine. Needs Higgsfield CLI and ffmpeg. - [UI Skills](https://hebbmind.com/skill/ui-skills.md): [Skill] UI skills for design engineers: clean up spacing and hierarchy in AI-generated interfaces, fix accessibility and page metadata, debug janky animations, build DESIGN.md from an existing product or site, and run read-only UI reviews with fix plans. Use with a local frontend project in a coding agent. - [Stitch Design Skills](https://hebbmind.com/skill/stitch-skills.md): [Skill] Companion skills for Google Stitch: generate UIs from text or images, extract DESIGN.md from code, and turn designs into React or React Native components. From Google Labs but not an officially supported Google product; set up the Stitch MCP first. - [Jakub Krehel Skills](https://hebbmind.com/skill/jakubkrehel-skills.md): [Skill] Design engineer Jakub Krehel's 11 UI skills: targeted fixes for typography, color, layout, accessibility and UI copy, plus full interface reviews, animation teardowns, component state stress tests and multi-variant generation. Works on web project code; installing needs Node.js. - [Figma (Codex)](https://hebbmind.com/plugin/figma.md): [Plugin] Figma's Codex plugin in OpenAI's official marketplace: implements UI from designs, generates Code Connect mappings, and creates or updates pages, component libraries, FigJam diagrams and slides in Figma. Needs a connected Figma account. - [Animation On Scroll](https://hebbmind.com/skill/animation-on-scroll.md): [Skill] Adds scroll-reveal animations that fire when elements enter the viewport, using an IntersectionObserver snippet plus keyframes and a Tailwind arbitrary animation class; tune threshold, rootMargin, duration, delay and play-once behavior. - [WebGL Landing Steering](https://hebbmind.com/skill/webgl-landing-steering.md): [Skill] Steers WebGL-heavy landing pages toward a chosen look by picking one of four visual lanes per page type, passing message, performance, accessibility and reliability gates, and outputting a lane, visual spec, stack, fallback and build order. - [Pricing Page](https://hebbmind.com/skill/pricing-page.md): [Skill] Designs or rewrites a high-converting SaaS pricing page: gathers plans, limits, upgrade triggers and objections, then structures a value headline, monthly/annual toggle, tiered plans, comparison, FAQ and trust sections with copy templates. - [Marquee Loop](https://hebbmind.com/skill/marquee-loop.md): [Skill] Builds seamless infinite marquees for logos, testimonials, screenshots or tags by duplicating the item sequence and translating the track from 0 to -50%, with stable widths, faded edges, optional hover pause and reduced-motion handling. - [Landing Page](https://hebbmind.com/skill/landing-page.md): [Skill] Designs or rewrites a single-offer, high-converting landing page for SaaS, apps or services: gathers the primary action, audience, objections and proof, then lays out hero, argument and objection-handling sections with copy templates and SEO/AEO notes. - [Container Lines](https://hebbmind.com/skill/container-lines.md): [Skill] Adds thin vertical guide lines at the content container edges plus small corner squares for a measured, structured layout, with CSS tokens and pseudo-element code that keeps guides behind content and out of pointer events. - [Tailwind CSS](https://hebbmind.com/skill/tailwindcss.md): [Skill] General guidance for building UI with Tailwind CSS: responsive and state variants, dark mode, sparing arbitrary values, components before @apply, and pitfalls such as dynamically built class names missing in production, with button and hero examples. - [Company Logos](https://hebbmind.com/skill/company-logos.md): [Skill] Has the agent use Iconify Simple Icons brand marks instead of typed company names in logo rows, integration grids and partner lists, sized in a 64x64 box, monochrome by default, grid-aligned and labeled for accessibility when needed. - [GSAP ScrollTrigger Storytelling](https://hebbmind.com/skill/gsap-scrolltrigger-storytelling.md): [Skill] Builds cinematic, scroll-driven product storytelling with GSAP ScrollTrigger: pinned scenes, scrubbed timelines, progressive UI reveals and section handoffs, with cleanup in React, simpler choreography on small screens and readable copy and CTAs. - [Masked Reveal](https://hebbmind.com/skill/masked-reveal.md): [Skill] Reveals headings and short copy word by word through an overflow mask as they scroll into view, using GSAP ScrollTrigger and a split helper that avoids the paid SplitText plugin, with aria-label, reduced-motion support and React cleanup. - [Three.js](https://hebbmind.com/skill/threejs.md): [Skill] Builds or debugs interactive 3D web scenes with Three.js: scene, camera, renderer, lights, materials, GLTF loading and controls, plus performance basics like capping pixel ratio, handling resize, disposing WebGL resources and reduced motion. - [Matter.js](https://hebbmind.com/skill/matterjs.md): [Skill] Implements 2D physics interactions with Matter.js: a minimal Engine, Render and Runner setup with bodies, optional mouse drag constraints and SPA cleanup steps, asking about canvas size and renderer when specs are missing. - [Cobe.js](https://hebbmind.com/skill/cobejs.md): [Skill] Adds a lightweight interactive WebGL globe with the cobe library: canvas sizing for device pixel ratio, location markers, rotation in onRender, resize handling and teardown, for plain pages or React/Next.js hero sections. - [GSAP](https://hebbmind.com/skill/gsap.md): [Skill] Helps the agent add or debug web animations with GSAP: tweens, timelines and position parameters, easing, stagger and ScrollTrigger pin and scrub, plus fixes for jank, cleanup with gsap.context() in React and refreshing after images load. - [21st MCP (formerly Magic MCP)](https://hebbmind.com/mcp/magic-mcp.md): [MCP] 21st.dev's official MCP: lets agents search and fetch UI components, themes and template code from the 21st.dev community, and generate components from a description once AI access is enabled. Absorbs the former Magic MCP; requires a free API key from 21st.dev. - [pnpm](https://hebbmind.com/skill/pnpm.md): [Skill] Reference for pnpm 12: CLI, pnpm-workspace.yaml settings, monorepo workspaces, catalogs, overrides, patches, supply-chain settings such as build approval, task orchestration, CI setup and migration from npm, Yarn or older pnpm. Generated by Anthony Fu from the official docs. - [Interface Design](https://hebbmind.com/plugin/interface-design.md): [Plugin] Design engineering plugin for product interfaces such as admin panels and dashboards: builds UI on design principles and saves spacing, color and hierarchy decisions to .interface-design/system.md to stay consistent across sessions. Not meant for marketing pages. - [pngquant](https://hebbmind.com/cli/pngquant.md): [CLI] Lossy PNG compression CLI: converts images to 8-bit PNGs that keep transparency, usually 60-80% smaller, with batch processing and a quality range setting. Handy for slimming down web assets, slides and article images. Install via Homebrew on macOS; no account. - [Text-to-Lottie (Diffusion Studio)](https://hebbmind.com/skill/lottie.md): [Skill] Lets agents generate production-ready Lottie animations (icon motion, loaders, data animations and more) from a text description or SVG, with a local player for live preview and tweaks. Export JSON for web, apps or After Effects. Needs Node.js locally. - [fontTools](https://hebbmind.com/cli/fonttools.md): [CLI] Font toolkit: pyftsubset subsets fonts to the characters you use and outputs WOFF2 to shrink web fonts, and ttx converts fonts to editable XML for inspection and edits. Needs Python 3.11+ and the woff extra for WOFF2; check the license before subsetting commercial fonts. - [WP-CLI](https://hebbmind.com/cli/wp-cli.md): [CLI] WordPress's official CLI: install and update plugins and themes, manage posts and users, import and export content, run database search-replace and configure multisite from the terminal, without opening wp-admin. Requires PHP 7.2.24 or later. - [Style Dictionary](https://hebbmind.com/cli/style-dictionary.md): [CLI] Design token build tool: define colors, font sizes, spacing and other design specs in one JSON source, then style-dictionary build generates CSS, SCSS, iOS, Android and other platform code, keeping the design system and implementations in sync. Needs Node.js and a config.json. - [designlang](https://hebbmind.com/cli/design-extract.md): [CLI] Reads any website's design system in a headless browser and exports DTCG design tokens, Tailwind config, Figma variables and a brand guide in one command, scoring contrast and cross-page consistency. Also an MCP server or Claude Code plugin. Needs Node.js and Chromium or Chrome. - [lychee](https://hebbmind.com/cli/lychee.md): [CLI] Fast async link checker written in Rust that scans websites and Markdown, HTML and other files for broken links and email addresses, with JSON output, config files and an official GitHub Action, often wired into docs CI. Next page: https://hebbmind.com/tools.md?page=2&profession=devops%2Calgorithm%2Cdesign&tag=web-development