---
title: "webflow&#x2F;webflow-skills skills · skilld"
canonical_url: "https://skilld.dev/gh/webflow/webflow-skills"
meta:
  description: "Official Webflow Agent Skills"
  "og:description": "Official Webflow Agent Skills"
  "og:title": "webflow/webflow-skills skills"
  "twitter:description": "Official Webflow Agent Skills"
  "twitter:title": "webflow/webflow-skills skills"
---

`

[All skills](https://skilld.dev/skills)

[![webflow avatar](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fwebflow.png)](https://skilld.dev/gh/webflow)

# **webflow/webflow-skills**

Official Webflow Agent Skills

main Updated 4 days ago [GitHub](https://github.com/webflow/webflow-skills)

![README badge for webflow/webflow-skills](https://skilld.dev/b/webflow/webflow-skills?theme=light&label=0)

## Repository statistics

- Indexed skills

  **32**
- Skill groups

  **1**
- GitHub stars

  **126**
- Forks

  **21**

## Skills

32 total

Sort skills

[<h3>**/interactions**</h3>Create, update, list, and delete Webflow IX3 interactions (GSAP animations) through Webflow MCP. Use when the user wants click/hover/load/scroll/mouse-move animations, interaction timelines, or data\_interactions\_tool / create\_interaction payloads. /interactions](https://skilld.dev/gh/webflow/webflow-skills/interactions)

Updated last week

[<h3>**/webflow-cloud-command**</h3>Create, build, and deploy Webflow Cloud apps from the CLI (site-attached or project apps), and manage existing ones — apps, domains, environments, deployments, build/runtime logs, and environment variables including secrets. Use when initializing or deploying a Cloud app, importing an existing GitHub repository, setting up CI/CD (GitHub Actions or GitHub-linked deploys), setting or importing secrets, retrying or rolling back a deployment, diagnosing a failed build, or resolving app/environment/workspace IDs from webflow.json or env vars. /webflow-cloud-command](https://skilld.dev/gh/webflow/webflow-skills/webflow-cloud-command)

Updated 2 weeks ago

[<h3>**/cloud-apps**</h3>Create GitHub-source Webflow Cloud apps and monitor, troubleshoot, or manage existing apps through Webflow MCP. Use when creating a standalone or site-attached app from GitHub; identifying apps or environments; checking public URLs, domains, configuration keys, or deployed versions; diagnosing failures; changing a GitHub source, branch, or mount; provisioning environments; or previewing a deployment, retry, or rollback. Do not use for Designer/CSS variables, CLI/local-source app creation or deployment, or passing environment-variable values through MCP. /cloud-apps](https://skilld.dev/gh/webflow/webflow-skills/cloud-apps)

Updated last month

[<h3>**/wfu-migrate-cms**</h3>A Webflow University guided activity that walks you through migrating existing content into a Webflow CMS, including support for target sites with partial or existing Collections, and generates a custom, portable skill you can use to build and populate it well with any compatible agent. /wfu-migrate-cms](https://skilld.dev/gh/webflow/webflow-skills/wfu-migrate-cms)

Updated last month

[<h3>**/wfu-new-cms-plan**</h3>A Webflow University guided activity that walks you through planning a new Webflow CMS collection architecture from scratch, including support for sites with existing Collections, and generates a custom, portable skill you can use to build it well with any compatible agent. /wfu-new-cms-plan](https://skilld.dev/gh/webflow/webflow-skills/wfu-new-cms-plan)

Updated last month

[<h3>**/accessibility-audit**</h3>Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings, keyboard navigation, and generates detailed reports with fixes. Runs entirely headlessly against a page ID — no Designer connection required. Excludes image alt text (covered by asset-audit skill). /accessibility-audit](https://skilld.dev/gh/webflow/webflow-skills/accessibility-audit)

Updated 2 months ago

[<h3>**/designer-tools**</h3>Build and manage pages, elements, components, and styles in Webflow Designer. Use when adding sections, creating layouts, building elements, inspecting or updating components, viewing what's inside a component, restructuring pages, creating new pages, previewing page structure, styling elements, or managing component properties. Building, styling, and inspecting run headlessly against an explicit page ID — no Designer connection needed. Designer is required for \`designer\_tool\` actions (reading/switching the page open on canvas, interactively selecting an element, creating page folders, opening a component's canvas view) and for \`element\_snapshot\_tool\` visual previews. /designer-tools](https://skilld.dev/gh/webflow/webflow-skills/designer-tools)

Updated 2 months ago

[<h3>**/flowkit-naming**</h3>Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach. Runs headlessly against a page ID — no Designer connection required, except for the optional live-canvas conveniences (current page, interactive element selection). /flowkit-naming](https://skilld.dev/gh/webflow/webflow-skills/flowkit-naming)

Updated 2 months ago

[<h3>**/asset-audit**</h3>Analyze assets on a Webflow site for SEO optimization. Identifies assets missing alt text and assets with non-SEO-friendly names, then generates and applies improvements. /asset-audit](https://skilld.dev/gh/webflow/webflow-skills/asset-audit)

Updated 2 months ago

[<h3>**/link-checker**</h3>Find and fix broken or insecure links across an entire site, including CMS content, to improve SEO and user experience. Audits HTTP/HTTPS issues and validates all internal and external links. /link-checker](https://skilld.dev/gh/webflow/webflow-skills/link-checker)

Updated 2 months ago

[<h3>**/wfu-mcp-getting-started**</h3>A Webflow University guided onboarding skill for anyone getting started with the Webflow MCP. Checks your Webflow connection, helps you choose a real workflow to try, coaches prompt writing, and supports you through your first MCP run. /wfu-mcp-getting-started](https://skilld.dev/gh/webflow/webflow-skills/wfu-mcp-getting-started)

Updated 3 months ago

[<h3>**/figma-to-webflow**</h3>>- Build a Webflow page, section, component, or full site from a Figma design using the Figma MCP and the Webflow MCP (Designer Bridge + Data API). Use whenever translating a Figma file/frame into Webflow, building directly in a Webflow project, or implementing a design as live Webflow elements/styles (not a copy-paste fragment). Triggers: "build this Figma in Webflow", "Figma to Webflow", "implement this design in Webflow", a figma.com URL + a Webflow site, "recreate this in my Webflow project". /figma-to-webflow](https://skilld.dev/gh/webflow/webflow-skills/figma-to-webflow)

Updated 3 months ago

[<h3>**/webflow-compress-cms-image**</h3>Compress and convert CMS item image fields to webp or avif in a Webflow collection. Prompts for collection ID, item ID, image fields, quality, and target format, then downloads, converts, re-uploads via presigned S3, and publishes the updated item. /webflow-compress-cms-image](https://skilld.dev/gh/webflow/webflow-skills/webflow-compress-cms-image)

Updated 4 months ago

[<h3>**/review-comments**</h3>Review open comment threads on a Webflow site and triage each one. /review-comments](https://skilld.dev/gh/webflow/webflow-skills/review-comments)

Updated 5 months ago

[<h3>**/bulk-cms-update**</h3>Create or update multiple CMS items in a Webflow collection with validation and diff preview. Use when adding multiple blog posts, products, or updating fields across many items. /bulk-cms-update](https://skilld.dev/gh/webflow/webflow-skills/bulk-cms-update)

Updated 5 months ago

[<h3>**/cms-best-practices**</h3>Expert guidance on Webflow CMS architecture and best practices. Use when planning collections, setting up relationships, optimizing content structure, or troubleshooting CMS issues. /cms-best-practices](https://skilld.dev/gh/webflow/webflow-skills/cms-best-practices)

Updated 5 months ago

[<h3>**/cms-collection-setup**</h3>Create a new CMS collection in Webflow with specified fields and relationships. Use when setting up blog posts, products, team members, portfolios, or other content types with custom fields. /cms-collection-setup](https://skilld.dev/gh/webflow/webflow-skills/cms-collection-setup)

Updated 5 months ago

[<h3>**/custom-code-management**</h3>Add, review, or remove inline custom scripts on a Webflow site (up to 10,000 chars). Use for analytics, tracking pixels, chat widgets, or any custom JavaScript. Also manages page-level scripts. /custom-code-management](https://skilld.dev/gh/webflow/webflow-skills/custom-code-management)

Updated 5 months ago

[<h3>**/safe-publish**</h3>Publish a Webflow site with a plan-confirm-publish workflow. Shows what changed since last publish, runs pre-publish checks, and requires explicit confirmation before going live. /safe-publish](https://skilld.dev/gh/webflow/webflow-skills/safe-publish)

Updated 5 months ago

[<h3>**/site-activity**</h3>Query and summarize site activity logs for a Webflow enterprise site. Surfaces recent changes, identifies who made them, and generates human-readable activity reports. Use for site monitoring, change tracking, publish preparation, or weekly activity summaries. Enterprise plans only. /site-activity](https://skilld.dev/gh/webflow/webflow-skills/site-activity)

Updated 5 months ago

[<h3>**/site-audit**</h3>Comprehensive audit of a Webflow site including pages, CMS collections, health scoring, and actionable insights. Use for site analysis, migration planning, or understanding site structure. /site-audit](https://skilld.dev/gh/webflow/webflow-skills/site-audit)

Updated 5 months ago

[<h3>**/code-component-command**</h3>Create and deploy reusable React components for Webflow Designer. Configure existing React projects with webflow.json, build and bundle code, validate output, and deploy to workspace using library share. Use when building custom components for designers. /code-component-command](https://skilld.dev/gh/webflow/webflow-skills/code-component-command)

Updated 7 months ago

[<h3>**/component-audit**</h3>Audit Webflow Code Components for architecture decisions - prop exposure, state management, slot opportunities, and Shadow DOM compatibility. Focused on Webflow-specific patterns, not generic React best practices. /component-audit](https://skilld.dev/gh/webflow/webflow-skills/component-audit)

Updated 7 months ago

[<h3>**/component-scaffold**</h3>Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config/dependencies. /component-scaffold](https://skilld.dev/gh/webflow/webflow-skills/component-scaffold)

Updated 7 months ago

[<h3>**/convert-component**</h3>Convert an existing React component into a Webflow Code Component. Analyzes TypeScript props, maps to Webflow prop types, generates the .webflow.tsx definition file, and identifies required modifications. /convert-component](https://skilld.dev/gh/webflow/webflow-skills/convert-component)

Updated 7 months ago

[<h3>**/deploy-guide**</h3>Step-by-step guide for deploying Webflow Code Components to a workspace. Covers authentication, pre-flight checks, deployment execution, and verification. /deploy-guide](https://skilld.dev/gh/webflow/webflow-skills/deploy-guide)

Updated 7 months ago

[<h3>**/designer-extension-command**</h3>Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default/react/typescript-alt), bundles extensions for upload, and serves locally for development. /designer-extension-command](https://skilld.dev/gh/webflow/webflow-skills/designer-extension-command)

Updated 7 months ago

[<h3>**/devlink-command**</h3>Export Webflow Designer components to React/Next.js code for external projects. Configure devlink settings in webflow.json, sync design updates with devlink sync, validate generated code, show diffs, and provide integration examples. Use when building with Webflow designs in React/Next.js. /devlink-command](https://skilld.dev/gh/webflow/webflow-skills/devlink-command)

Updated 7 months ago

[<h3>**/local-dev-setup**</h3>Initialize a new Webflow Code Components project from scratch. Creates project structure, installs dependencies, configures webflow.json, and sets up development environment. /local-dev-setup](https://skilld.dev/gh/webflow/webflow-skills/local-dev-setup)

Updated 7 months ago

[<h3>**/pre-deploy-check**</h3>Pre-deployment validation for Webflow Code Components. Checks bundle size, dependencies, prop configurations, SSR compatibility, styling setup, and common issues before running webflow library share. /pre-deploy-check](https://skilld.dev/gh/webflow/webflow-skills/pre-deploy-check)

Updated 7 months ago

[<h3>**/troubleshoot-deploy**</h3>Debug deployment failures for Webflow Code Components. Analyzes error messages, identifies root causes, and provides specific fixes for common issues. /troubleshoot-deploy](https://skilld.dev/gh/webflow/webflow-skills/troubleshoot-deploy)

Updated 7 months ago

[<h3>**/webflow-cli-troubleshooter**</h3>Diagnose and fix Webflow CLI issues including installation problems, authentication failures, build errors, and bundle problems. Uses CLI diagnostic flags (--version, --help, --verbose, --debug-bundler) for troubleshooting. /webflow-cli-troubleshooter](https://skilld.dev/gh/webflow/webflow-skills/webflow-cli-troubleshooter)

Updated 7 months ago

## Add to your README

The badge links readers to this page. It shows the skilld mark and no counts, and it follows the reader's light or dark GitHub theme.

`<a href="https://skilld.dev/gh/webflow/webflow-skills"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://skilld.dev/b/webflow/webflow-skills?theme=dark"> <source media="(prefers-color-scheme: light)" srcset="https://skilld.dev/b/webflow/webflow-skills?theme=light"> <img alt="Skill repository on skilld.dev" src="https://skilld.dev/b/webflow/webflow-skills?theme=light"> </picture> </a>`