# 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 Frontend or ML / AI, Tagged `react`: 38 items. > - Frontend: Web and mobile-web interfaces: building, debugging and performance tuning. > - ML / AI: Model training, evaluation and LLM application development. - [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. - [Next.js Cache Components Optimizer](https://hebbmind.com/de/skill/next-cache-components-optimizer.md): [Skill] Drives a Next.js route to instant navigation under Cache Components: writes a failing @next/playwright instant() e2e test, pushes Suspense boundaries down to grow the static shell until it passes, and keeps the test as a regression guard. Requires Next.js 16.3+ with cacheComponents. - [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. - [Migrate Radix to Base UI](https://hebbmind.com/de/skill/migrate-radix-to-base.md): [Skill] Migrates React projects and shadcn components from Radix UI to Base UI, one component at a time or the whole project on request. Prefers the shadcn CLI's base variants merged with user customizations, typechecks every step, and writes a per-component report in .migration/. From the shadcn/ui repo. - [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. - [Remotion CLI](https://hebbmind.com/de/cli/remotion-dev-cli.md): [CLI] Write videos in React and render them from the command line with npx remotion render, letting agents batch-produce data-driven videos. Free for individuals, nonprofits and companies of up to 3 people; larger for-profit companies need a license. - [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. - [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. - [React Doctor](https://hebbmind.com/de/skill/react-doctor.md): [Skill] Runs React Doctor via npx to scan React code for security, performance, correctness, accessibility and architecture issues with a 0-100 health score; checks changed code for regressions, and on /doctor fetches the official triage playbook to fix issues. - [Improve React](https://hebbmind.com/de/skill/improve-react.md): [Skill] Audits a whole React codebase read-only: runs a React Doctor scan as evidence, vets findings across bugs, performance, accessibility, security and maintainability, ranks them by leverage, then writes self-contained plans other agents can execute. Never edits source. - [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). - [Remotion](https://hebbmind.com/de/plugin/remotion.md): [Plugin] Remotion's official Codex plugin (OpenAI marketplace) for making videos in React code: 12 skills covering project setup, animation and effects, captions, maps, preview and rendering. Free for individuals, nonprofits and companies up to 3 people; bigger companies need a license. - [Cobe.js](https://hebbmind.com/de/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/de/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. - [Narrow React Prop Types](https://hebbmind.com/de/skill/narrow-react-prop-types.md): [Skill] Narrows React component prop types to match live call sites rather than widened story, mock or test contracts: classifies each prop as required, optional or removed from non-test usage, derives types from real APIs, and updates stories and tests to fit. - [Remotion Create](https://hebbmind.com/de/skill/remotion-create.md): [Skill] Has the agent scaffold a new Remotion video project with create-video after inspecting the current folder, open Remotion Studio for live preview before writing the composition, and follow the layout, multi-scene and timeline guides as needed. Official Remotion skill; needs Node.js and Git. - [Remotion Best Practices](https://hebbmind.com/de/skill/remotion-best-practices.md): [Skill] Remotion's official skill that teaches agents to make programmatic videos in React code, covering project setup, animation and typography, captions, map animations, media handling and rendering, and routes to each subtopic on demand. - [Remotion Captions](https://hebbmind.com/de/skill/remotion-captions.md): [Skill] Guides the agent through captions in Remotion videos: stores them as JSON using the Caption type from @remotion/captions, transcribes audio or video to generate them, imports .srt files, and displays and animates them in compositions. Official Remotion skill. - [General Translation CLI](https://hebbmind.com/de/cli/generaltranslation-cli.md): [CLI] General Translation's gt CLI: a wizard sets up i18n for React, Next.js and similar apps, then sends UI strings and JSON, YAML or Markdown files for AI translation and writes them back, with CI support. Needs a Node.js project and a General Translation API key (free sign-up, usage-based pricing). - [Design Lab](https://hebbmind.com/de/skill/design-lab.md): [Skill] Interviews you on scope, pain points and brand tone, infers the visual language from existing styles, and builds five React UI variants on a temporary route with a feedback overlay. Iterates on feedback, then writes an implementation plan and deletes the temp files. - [Product Film](https://hebbmind.com/de/skill/product-film.md): [Skill] Makes a product film (landing-page loop, launch video, promo, demo reel) in code with Remotion, reusing the product's own design system, components and voice. It interviews the user first, then writes the story, syncs scenes to music beats, reviews stills in loops and verifies the final render. - [WebGL Components](https://hebbmind.com/de/skill/webgl-components.md): [Skill] Guides building small always-on WebGL visuals (avatars, ambient orbs, glass and iridescent surfaces) inside product UI: one shared context, a single capped frame loop, cheap fragment shaders, context-loss handling, a mandatory non-WebGL fallback, and React SSR and Server Components pitfalls. - [Page Transition Animation](https://hebbmind.com/de/skill/page-transition-animation.md): [Skill] Implements page and route transitions in the Next.js App Router and fixes Framer Motion exit animations that never fire on navigation, using template.tsx with a pathname-keyed AnimatePresence and FrozenRouter, or the View Transitions API via next-view-transitions. - [Lottie Animation](https://hebbmind.com/de/skill/lottie-animation.md): [Skill] Integrates Lottie and dotLottie animations from After Effects into web, iOS, Android and React Native: playback and segment control, scroll- or hover-driven interactivity, runtime theming and recoloring, plus an After Effects export checklist. - [Micro Interaction](https://hebbmind.com/de/skill/micro-interaction.md): [Skill] Adds functional UI micro-interactions with Framer Motion (motion/react) and modern CSS: hover and press feedback, toggles, toasts, drawers, modals, list reorder and shared-element transitions, with 100-250ms timings, asymmetric enter and exit easing, and reduced-motion support. - [Mastering AnimatePresence](https://hebbmind.com/de/skill/mastering-animate-presence.md): [Skill] Audits Motion (Framer Motion) code against AnimatePresence rules: wrapping conditional exits, exit props and keys, the useIsPresent and usePresence hooks, choosing a mode, and coordinating nested exits. Reports findings as file:line. For React projects. - [Morphing Icons](https://hebbmind.com/de/skill/morphing-icons.md): [Skill] Guides the agent in building SVG icon components that morph between any two icons by moving lines instead of crossfading. Every icon uses exactly three lines, unused ones collapse to the center, and grouped variants rotate with springs. Examples use React and Motion and respect reduced motion. - [To Spring or Not to Spring](https://hebbmind.com/de/skill/to-spring-or-not-to-spring.md): [Skill] Audits animation code for the right timing function: springs for gestures and interruptible motion, easing for system-driven state changes, linear for progress, and no animation for high-frequency interactions. Also checks spring parameters and durations. Reports file:line findings. - [Interactive Hit Areas](https://hebbmind.com/de/skill/interactive-hit-areas.md): [Skill] Fixes hover and click dead zones between spaced interactive elements such as chart bars, list rows, tabs and nav items by making hit targets flush and moving visual spacing inside each item, with React and Tailwind examples. - [Paper to Code Components](https://hebbmind.com/de/skill/paper-to-code-components.md): [Skill] Turns Paper designs (via Paper MCP, Viewfinder or exported JSX) into componentized React/Next.js code: maps hierarchy and reusable components first, one component per icon, tokens in globals.css, shadcn reuse, real fonts and data-driven charts. - [Product Launch Video](https://hebbmind.com/de/skill/product-launch-video.md): [Skill] Builds product launch, promo and feature announcement videos with Remotion (React): asks nine questions about product, audience, duration, voiceover and channel, proposes 2-3 visual directions, writes a storyboard.json, then codes scenes and optional voiceover. - [Animate UI](https://hebbmind.com/de/skill/animate-ui.md): [Skill] Prototyper UI's animation conventions for writing, reviewing or debugging component motion: copy-paste class strings for overlays, dialogs and sheets, press-feedback scales, state transitions, easing tokens and prefers-reduced-motion handling. - [Build Primitive](https://hebbmind.com/de/skill/build-primitive.md): [Skill] Guides building Prototyper UI components from scratch when no Base UI primitive exists: ARIA contract first, then keyboard navigation, focus management, controlled and uncontrolled state, form integration and animation, wrapping headless libraries where they fit. - [Create Component](https://hebbmind.com/de/skill/create-component.md): [Skill] End-to-end guide for adding components to the Prototyper UI library: templates for wrapping Base UI primitives with CVA variants and compound sub-components, plus registry entries, examples and MDX documentation pages. - [Prototyper UI](https://hebbmind.com/de/skill/prototyper-ui.md): [Skill] Usage guide for the Prototyper UI component library, built on @base-ui/react and Tailwind CSS v4 with copy-paste distribution, OKLCH colors and CVA variants: setup, theme tokens, component selection and patterns, noting render= replaces Radix asChild.