responsive-styling
Responsive Styling Skill
Purpose
Generate mobile-first, responsive CSS/SCSS that works across all devices and follows accessibility best practices.
Philosophy
Responsive design is accessibility. Mobile-first is user-first.
Core Beliefs
- Mobile First is Performance First: Start with constraints, enhance progressively
- Accessibility is Non-Negotiable: WCAG AA compliance is the baseline, not a bonus
- Exact Specifications Build Confidence: Calculate exact contrast ratios, don't estimate
- Touch-Friendly by Default: 44px minimum targets prevent user frustration
Why Mobile-First Responsive Styling Matters
More from kanopi/cms-cultivator
drupalorg-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.
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