accessibility-audit
Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings,…
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.
$ npx -y skills add webflow/webflow-skills --skill asset-audit --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/asset-auditContext preview
The summary Claude sees to decide when to auto-load this skill.
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.
name: webflow-mcp:asset-audit description: 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. mcp-version: 2.0.1
Analyze assets on a Webflow site for SEO optimization.
**ALWAYS use Webflow MCP tools for all operations:**
1. **Get site**: Identify the target site. If user does not provide site ID, ask for it. 2. **Fetch all assets**: Use Webflow MCP's `data_assets_tool` to get all assets from the site (each asset record includes its `asset_id`, needed for previews)
3. **Detect patterns**: Analyze asset naming for common patterns:
4. **Identify issues**: List all assets which:
5. **Pattern detection report**: Show detected patterns:
🔍 Detected patterns: - 15 assets start with "IMG_" (camera uploads) - 8 assets contain "screenshot" - Suggest: Bulk rename these patterns
6. **Ask user preference**: Ask if they want to generate:
7. **Analyze assets**: Use Webflow MCP's `get_asset_preview` tool, passing each asset's `asset_id` (from Phase 1), to analyze the assets that need updates
8. **Generate suggestions with validation**:
9. **Folder organization suggestions**: If patterns detected, suggest folder structure:
💡 Organization suggestions: - Create "team-photos" folder for 8 team images - Create "product-images" folder for 15 product shots
10. **Present suggestions with granular approval**:
11. **Offer naming template** (if many similar assets):
🎨 Apply naming pattern?
1. [category]-[description] (e.g., team-john-headshot)
2. [description]-[location] (e.g., office-workspace-desk)
3. Custom pattern...
4. Skip patterns, use individual names12. **Store rollback data**: Before applying changes, store:
13. **Apply updates**: Use Webflow MCP's `data_assets_tool` to update approved assets only
14. **Offer rollback option**: After changes applied:
📋 Rollback Available:
Last update: 4 assets modified 2 minutes ago
Type "undo" to revert these changes**User prompt:**
Run an asset audit on my site.
**Step 1: Initial Audit Report**
📊 SEO Asset Audit: MCP Demo #2 Total: 4 assets 🔍 Detected patterns: - 4 assets have generic numeric names (1.webp, 2.webp, 3.webp, 4.webp) - All assets are in WebP format ✓ ⚠️ Missing Alt Text (4 assets): ├── 1.webp (empty alt text) ├── 2.webp (empty alt text) ├── 3.webp (empty alt text) └── 4.webp (empty alt text) ⚠️ Non-SEO-Friendly Names (4 assets): ├── 1.webp (generic numeric name) ├── 2.webp (generic numeric name) ├── 3.webp (generic numeric name) └── 4.webp (generic numeric name) --- What would you like to generate? 1. Alt text only 2. SEO-friendly names only 3. Both alt text and SEO-friendly names Please select an option (1, 2, or 3).
**Example with Validation Warnings:**
📋 Suggested Improvements:
[1] ✓ IMG_1234.jpg
Alt text: "Professional team member headshot with blue background."
New name: professional-team-member-headshot.jpg
✅ Validation passed
[2] ✓ screenshot-2024.png
Alt text: "Dashboard analytics overview showing user engagement metrics."
New name: dashboard-analytics-overview.png
✅ Validation passed
[3] ⚠️ untitled-image.webp
Alt text: "Photo"
⚠️ Warning: Alt text too short (< 10 chars) - needs more detail
New name: untitled-image.webp
⚠️ Warning: Unable to generate better name (image pA collection of Agent Skills for working with Webflow sites through the Webflow MCP server. Manage CMS content, audit site health, optimize assets, build in Webflow Designer, create Code Components, run Webflow CLI workflows, and safely publish changes.
Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings,…
Create or update multiple CMS items in a Webflow collection with validation and diff preview. Use when adding multiple blog…
Create GitHub-source Webflow Cloud apps and monitor, troubleshoot, or manage existing apps through Webflow MCP. Use when creating…
Expert guidance on Webflow CMS architecture and best practices. Use when planning collections, setting up relationships,…
Create a new CMS collection in Webflow with specified fields and relationships. Use when setting up blog posts, products, team…
Create and deploy reusable React components for Webflow Designer. Configure existing React projects with webflow.json, build and…