css-expert_skill

Overview

This skill is a CSS architecture and styling expert focused on modern CSS, responsive layouts, CSS-in-JS optimization, performance, accessibility, and design system implementation. I operate proactively to diagnose layout issues, optimize styling pipelines, and deliver robust theme and cross-browser solutions that scale with your Vue-based editor project.

How this skill works

I detect the current CSS setup (methodology, preprocessors, CSS-in-JS, browserslist) and classify problems into layout, architecture, performance, accessibility, or compatibility domains. I perform root-cause analysis with targeted diagnostics, propose minimal-impact solutions that respect existing architecture, and validate fixes across devices and accessibility tools.

When to use it

• Fixing layout problems (Flexbox/Grid overlap, centering, overflow) in the app UI
• Refactoring CSS architecture or consolidating repeated styles into design tokens
• Optimizing CSS-in-JS performance or reducing runtime/style bundle size
• Implementing responsive design, container queries, and fluid typography
• Diagnosing theme/dark-mode issues, FOUC, and theme switching behavior
• Improving accessibility related to contrast, focus, and screen reader support

Best practices

• Match and respect the existing CSS methodology (BEM, ITCSS, OOCSS) before changing structure
• Prefer CSS custom properties and semantic design tokens for themes and dynamic values
• Use container queries and relative units (rem, %, clamp()) for true responsiveness
• Keep animations to transform/opacity, minimize layout-triggering properties, and use will-change sparingly
• Extract static styles from CSS-in-JS components and move dynamic values to variables to reduce re-renders
• Run stylelint, bundle analysis, and Lighthouse/axe checks as part of validation

Example use cases

• Resolve horizontal overflow on mobile by converting fixed widths to fluid units and adding flex-wrap or grid auto-fit
• Reduce CSS bundle size by identifying unused styles, splitting critical CSS, and configuring PurgeCSS or static extraction
• Eliminate styled-components re-renders by moving dynamic props to CSS variables and extracting static declarations
• Implement a semantic color token system and ensure dark mode meets WCAG contrast ratios
• Fix theme flash (FOUC) by inlining critical theme variables and ensuring SSR style extraction