design-analyzer
Design Analyzer Skill
Purpose
Fetch and extract technical requirements from design references (Figma URLs, screenshots, mockups) for CMS component implementation.
CRITICAL FIRST STEP: This skill MUST actively fetch design data using available tools (Figma MCP, Read tool) before performing any analysis. Never guess or infer design specifications - always fetch the actual design first.
Philosophy
Accurate design-to-code translation requires systematic extraction of technical specifications.
Core Beliefs
- Precision Over Interpretation: Extract exact values, don't guess or estimate
- Accessibility from the Start: Check contrast and touch targets during analysis
- Responsive by Default: Design for mobile first, enhance for desktop
- Document Technical Decisions: Record exact colors, spacing, typography for reproducibility
Why Design Analysis Matters
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.
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.
16test-scaffolding
Automatically generate test scaffolding when user writes new code without tests or mentions needing tests. Supports unit, integration, e2e, and data tests for PHP and JavaScript. Invoke when user mentions "tests", "testing", "coverage", "write tests", or shows new untested code.
15