# 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 Tagged `web-development`: 165 items. - [Frontend Design](https://hebbmind.com/de/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/de/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. - [Playwright MCP](https://hebbmind.com/de/mcp/playwright.md): [MCP] Lets agents drive a real browser through the accessibility tree: navigate, click, fill forms and take screenshots, without needing a vision model. Maintained by Microsoft. - [Figma MCP Server](https://hebbmind.com/de/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. - [Web Artifacts Builder](https://hebbmind.com/de/skill/web-artifacts-builder.md): [Skill] Builds multi-component web pages that need state or routing with React, Tailwind CSS and shadcn/ui, using bundled init and build scripts, then packs them into a single HTML file for a claude.ai Artifact. Official Anthropic skill. - [webapp-testing](https://hebbmind.com/de/skill/webapp-testing.md): [Skill] Drives local web apps with Python Playwright scripts to verify features, debug the UI, take screenshots and read browser logs. Includes helper scripts to start and stop dev servers. Official Anthropic skill. - [next-dev-loop](https://hebbmind.com/de/skill/next-dev-loop.md): [Skill] After code changes, has the agent check routes, errors and page behavior in the running Next.js app via /_next/mcp and agent-browser to confirm the change really works. Maintained by Next.js; needs Next.js 16.3+ (Turbopack) and agent-browser. - [Next.js Skills](https://hebbmind.com/de/plugin/vercel-skills.md): [Plugin] Official Next.js plugin shipped in the vercel/next.js repo: guides enabling and tuning Cache Components and Partial Prefetching, and verifies changes on a running dev server with the Next.js MCP and agent-browser. - [UI UX Pro Max](https://hebbmind.com/de/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. - [UI UX Pro Max](https://hebbmind.com/de/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. - [shadcn/ui](https://hebbmind.com/de/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. - [shadcn CLI](https://hebbmind.com/de/cli/shadcn.md): [CLI] Official shadcn/ui CLI: initializes projects and adds component source to your codebase on demand, with switchable presets. Since v4 it offers --dry-run and --diff so agents can preview changes, and it comes with an agent skill. - [shadcn MCP Server](https://hebbmind.com/de/mcp/shadcn-ui-mcp.md): [MCP] MCP server built into the official shadcn CLI: lets agents browse and search components, blocks and templates in any configured registry, including private ones, and install them into your project in plain language. The project needs a components.json. - [Deno](https://hebbmind.com/de/cli/deno.md): [CLI] JavaScript, TypeScript and WebAssembly runtime with built-in formatting, linting, testing and compilation. Scripts get no file, network or environment access unless granted with --allow-* flags, making agent-generated scripts safer to run. - [Taste Skill](https://hebbmind.com/de/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. - [Playwright](https://hebbmind.com/de/cli/playwright.md): [CLI] Microsoft's cross-browser end-to-end testing framework: one API drives Chromium, Firefox and WebKit, npx playwright test runs tests in parallel and isolation, with auto-waiting and trace replay for debugging failures. - [Bun](https://hebbmind.com/de/cli/bun.md): [CLI] All-in-one JavaScript and TypeScript toolchain: a single bun binary is a Node.js-compatible runtime, package manager, test runner and script runner, with noticeably faster installs and test runs. - [Storybook MCP Addon](https://hebbmind.com/de/mcp/storybookjs-mcp.md): [MCP] Official Storybook addon that exposes an MCP endpoint on the Storybook dev server so agents can look up component docs and props, write and preview stories, and run component and accessibility tests. Storybook must be running; AI features are in preview. - [Hugo](https://hebbmind.com/de/cli/hugo.md): [CLI] Static site generator written in Go that builds Markdown content into docs sites, blogs or landing pages in seconds, with a local preview server and an asset pipeline for images, CSS and JS. - [Impeccable](https://hebbmind.com/de/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/de/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. - [Pake](https://hebbmind.com/de/cli/pake.md): [CLI] Packs a web page, local HTML or dist folder into a lightweight desktop app with one command (built on Rust Tauri; macOS, Windows, Linux), with --json output and llms.txt for agents. Needs Node.js; installs Rust automatically if missing. - [mkcert](https://hebbmind.com/de/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. - [SEO Audit](https://hebbmind.com/de/skill/seo-audit.md): [Skill] Diagnoses website SEO issues: checks crawling and indexing, Core Web Vitals, metadata and on-page content, and gives prioritized, actionable fixes. From the marketingskills collection. - [Chrome DevTools MCP](https://hebbmind.com/de/plugin/chrome-devtools-mcp.md): [Plugin] Official Chrome plugin bundling the Chrome DevTools MCP with debugging skills for accessibility, LCP and memory leaks: lets agents drive and inspect a real Chrome and analyze network requests, console logs and performance traces. Collects usage stats by default; can be disabled. - [Skills For Designers and Engineers](https://hebbmind.com/de/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. - [daisyUI](https://hebbmind.com/de/skill/daisyui.md): [Skill] Official daisyUI skill: the agent uses daisyUI 5 component classes, semantic colors and themes whenever it writes HTML or JSX, picking components by intended function, reading their guides and following their exact structure. Includes install, usage, config and color guides. Built on Tailwind CSS 4. - [daisyUI Config](https://hebbmind.com/de/skill/daisyui-config.md): [Skill] Configuration reference for daisyUI 5: how to set enabled themes, the default and prefers-dark theme, root selector, included or excluded modules, class prefix and console logs in the CSS plugin block, with full examples. Part of the official daisyUI skill. - [daisyUI Install](https://hebbmind.com/de/skill/daisyui-install.md): [Skill] Installation guide for daisyUI 5: requires Tailwind CSS 4 without tailwind.config.js, installs via npm and adds the plugin in CSS, covers the CDN setup, and links framework guides for Next.js, Vue, SvelteKit, Laravel and more. Part of the official daisyUI skill. - [JavaScript TypeScript](https://hebbmind.com/de/plugin/javascript-typescript.md): [Plugin] JS/TS development plugin with javascript-pro and typescript-pro subagents, a TypeScript project scaffolding command, and 4 skills on modern JavaScript, advanced TypeScript types, Node.js backends and JS testing. Part of the wshobson/agents marketplace. - [UI Design](https://hebbmind.com/de/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. - [Playground](https://hebbmind.com/de/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. - [React Composition Patterns](https://hebbmind.com/de/skill/composition-patterns.md): [Skill] Vercel's guide to React composition patterns: replaces boolean prop sprawl with compound components, lifted state and clean Context interfaces, including React 19 API changes. Useful for refactoring component libraries and reviewing component architecture. - [Vercel React Best Practices](https://hebbmind.com/de/skill/react-best-practices.md): [Skill] React and Next.js performance rules from Vercel's engineering team: 70 rules ranked by impact covering request waterfalls, bundle size, server performance and re-renders, for writing, reviewing and refactoring. Maintained by Vercel. - [Web Design Guidelines](https://hebbmind.com/de/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. - [Lighthouse](https://hebbmind.com/de/cli/lighthouse.md): [CLI] Official web auditing tool from the Google Chrome team: score pages on performance, accessibility, best practices and SEO from the command line and get HTML, JSON or CSV reports, so agents can iterate on a page. Needs Node 22+ and Chrome. - [DESIGN.md](https://hebbmind.com/de/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. - [Angular CLI MCP Server](https://hebbmind.com/de/mcp/angular-mcp.md): [MCP] The MCP server built into the Angular CLI (ng mcp): lets agents search the official angular.dev docs, get best practices, list workspace projects, start the dev server and run build and test targets. Supports read-only and offline modes. Maintained by the Angular team. - [Biome](https://hebbmind.com/de/cli/biome.md): [CLI] All-in-one toolchain for web projects: fast formatting and linting with 500+ rules for JS, TS, JSX, JSON, CSS and GraphQL. Formatting is highly compatible with Prettier, and check --write applies all fixes in one pass. - [SVGO](https://hebbmind.com/de/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. - [Claude SEO](https://hebbmind.com/de/skill/claude-seo.md): [Skill] SEO analysis skill pack: 26 sub-skills and 19 subagents run full-site audits in parallel, covering technical SEO, E-E-A-T content quality, Schema, AI search optimization (GEO) and local SEO. Full features require installing it as a plugin and running /seo setup. - [GSAP AI Skills](https://hebbmind.com/de/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/de/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/de/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. - [MiniMax Skills](https://hebbmind.com/de/skill/minimax-ai-skills.md): [Skill] MiniMax's official skill collection covering frontend, full-stack, Android, iOS, Flutter, React Native and GLSL shader development, plus PDF, Word, Excel and PowerPoint document generation. Some media skills need a MiniMax API key. Still in beta. - [MiniMax Skills](https://hebbmind.com/de/plugin/minimax-ai-skills.md): [Plugin] MiniMax's official skill plugin with dev guides for frontend, full-stack, Android, iOS, Flutter, React Native and GLSL shaders, plus PDF, PowerPoint, Excel and Word document skills and image, video and music generation. Media skills need a MiniMax API key. Still in beta. - [Garden Skills](https://hebbmind.com/de/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/de/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/de/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/de/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. Next page: https://hebbmind.com/de/tools.md?page=2&tag=web-development