design-to-wp-block
Design to WordPress Block
Create production-ready WordPress block patterns from Figma designs or screenshots using the design-specialist agent.
Usage
- "Create a WordPress block pattern from this Figma design: [URL]"
- "Convert this mockup to a WordPress block pattern: [screenshot path]"
- "Build a hero-cta block pattern from this design for the kanopi-base theme"
Arguments: [design-source] [pattern-name] [theme-namespace]
Environment Detection
Tier 1 — Portable (Claude Desktop, Codex, any environment)
When Task() is unavailable but design data can be accessed:
More from kanopi/cms-cultivator
responsive-styling
Automatically generate mobile-first responsive CSS/SCSS when creating component styles or mentioning responsive design. Implements standard breakpoints (768px, 1024px), ensures WCAG AA color contrast, creates touch-friendly interfaces (44px minimum targets), adds proper focus indicators, supports reduced motion, scales typography responsively, and provides detailed technical specifications with exact values.
29drupalorg-issue-helper
Quick help with drupal.org issue templates, formatting, contributing patches, and best practices. Invoke when user asks "how do I write a bug report?", "drupal.org issue template", "issue formatting", "I have a patch", "contribute back", "submit my fix", "I fixed a bug in a module", or needs help structuring issue descriptions or contributing code to drupal.org projects.
25drupalorg-contribution-helper
Quick help with drupal.org contribution workflows including git commands, branch naming, issue fork setup, and merge request creation. Invoke when user asks "how do I contribute to drupal.org?", "drupal.org git workflow", "issue fork", "drupal merge request", or needs help with git.drupalcode.org commands.
18design-analyzer
Automatically extract technical requirements from design references when user mentions Figma, uploads images, or says "implement this design". Analyzes colors, typography, spacing, layout, and maps to WordPress blocks or Drupal paragraph fields. Provides detailed specifications for developers including exact values, responsive behavior, and accessibility requirements.
18performance-analyzer
Automatically analyze performance issues when user mentions slow pages, performance problems, or optimization needs. Performs focused performance checks on specific code, queries, or components. Invoke when user says "this is slow", "performance issue", "optimize", or asks about speed.
17code-standards-checker
Automatically check code against PHPCS, ESLint, WordPress Coding Standards, or Drupal Coding Standards when user asks about code style, standards compliance, or best practices. Invoke when user mentions "coding standards", "code style", "linting", "PHPCS", "ESLint", or asks if code follows conventions.
16