Herramientas

Audits CSS and JavaScript for pseudo-element and View Transitions API practices: content, positioning and z-index of ::before and ::after, replacing extra DOM nodes, expanding hit targets, naming and cleaning up view-transition-name, and ::backdrop styling. Reports findings as file:line.

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.

Audits UI code for audio feedback: every sound needs a visual equivalent, an off switch and volume control, and should respect reduced motion. Sound is for confirmations and errors, not typing or decorative hovers. Also checks preloading, default volume and sound weight. Reports file:line findings.

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.

TomTom's official MCP: geocoding and reverse geocoding, fuzzy and nearby search, single and multi-stop routing, reachable range, live traffic incidents, and static or dynamic maps. Needs a TomTom developer account and API key; use the hosted server (public preview) or run locally via npx.

Alibaba Cloud's official MCP server: through the DataWorks Open API, agents manage data development nodes and workflows, operate scheduled instances, query Data Map metadata and lineage, and configure data quality rules. Needs an Alibaba Cloud AccessKey.

Helps agents add Auth0 authentication to apps: detects 35+ frameworks and covers login, MFA, SSO, RBAC, JWT validation, migration from other auth providers, and tenant security audits. Maintained by Auth0; needs an Auth0 account (free sign-up).

DeepL's official CLI: translate text and PDF, Word, PowerPoint and Excel documents while keeping formatting, with glossaries and translation memory. Needs a DeepL API key (free plan available); install from source with Node.js 24.15+. Have legal translations reviewed.

Netlify's official plugin with skills for Functions, Edge Functions, Blobs, databases, forms, caching, netlify.toml configuration and deploys, plus the hosted Netlify MCP (OAuth sign-in on first use).

Supabase's official plugin: Supabase and Postgres best-practice skills plus the Supabase remote MCP to manage projects, run SQL, design schemas and RLS policies, and handle auth and storage. Needs a Supabase account.

Phrase Strings' official CLI: phrase init walks you through config, then phrase push uploads language files and phrase pull fetches the latest translations; it also wraps the full API for projects, locales and keys. Needs a Phrase Strings account (paid, 14-day free trial) and an API token.

Official CLI for Weblate, the open-source translation platform: check translation progress for projects and components, upload and download translation files, lock components, and commit or push repository changes. Hosted or self-hosted; needs the server URL, an API key and Python.

Provides twelve drop-in CSS transitions, including card resize, number pop-in, badges, dropdowns, modals, panel reveals, page slides, icon swaps, success checks and error shakes, configured through shared CSS custom properties with no framework dependency and reduced-motion guards.

NASA's official MCP for its Common Metadata Repository: find Earth science and remote sensing datasets in plain language, check that data files exist for a given place and time, and get access services, related tools and citation info. No account to connect; downloads need an Earthdata login.

Snowflake's official plugin: detects Snowflake-related requests and hands them to the Cortex Code CLI, whose 55+ built-in skills handle SQL, dynamic tables, data governance and more. Needs the cortex CLI installed and a Snowflake connection configured.

Builds compact, polished landing pages for dev tools, package demos and micro-SaaS. Picks a design fingerprint (composition, palette, type, radius, surfaces, motion) so each run looks different, features a product-native demo, and keeps zero layout shift, focus states and reduced motion.

When the agent changes a single CSS value or Tailwind class in a Next.js App Router project, a floating bar appears on the page so you can fine-tune it with arrow keys before persisting. Loads a runtime script from budge.design in app/layout.tsx.

Reads a component-contracts contract JSON, derives component-scoped tokens and builds a fully variable-bound Figma component set with all variants. Requires cc-figma-tokens to have run first, plus the figma-use and figma-generate-library skills.

Syncs component-contracts token files in W3C DTCG format into native Figma variables, building Primitives and Semantic collections with role-based scopes and web code syntax after you approve a plan. Prerequisite for cc-figma-component.

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.

Converts absolutely positioned Paper canvas nodes to flex layout through Paper MCP: computes spacing from computed styles, preserves SVGs and images via x-paper-clone, fixes z-order and shadows, and verifies with screenshot comparison.

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.

Verifies and repairs a Paper-derived app against its local paper-sync render: ports the real fonts, reads exact type, color and decoration values from the canonical export, screenshot-diffs the running app against the frame and separates conversion drift from newer design.

Reduces CSS custom properties and Tailwind v4 design tokens in globals.css without changing visuals: maps usage to find live tokens, deletes dead ones, collapses values similar in light and dark modes via a scripted rename map, and verifies with typecheck, lint and build.