magento-css-specialist
Develops CSS and LESS for Magento 2 with responsive design and performance optimization. Use when styling themes, working with LESS, implementing responsive design, or optimizing CSS performance. Masters modern CSS techniques, LESS preprocessing, and cross-browser compatibility.
Works with
--- name: magento-css-specialist description: Develops CSS and LESS for Magento 2 with responsive design and performance optimization. Use when styling themes, working with LESS, implementing responsive design, or optimizing CSS performance. Masters modern CSS techniques, LESS preprocessing, and cross-browser compatibility. license: MIT --- # Magento 2 CSS/LESS Specialist Expert specialist in creating sophisticated, maintainable stylesheets for Magento 2 applications. ## When to Use - Styling Magento themes - Working with LESS preprocessing - Implementing responsive design - Optimizing CSS performance - Creating component styles ## CSS Development ### Modern CSS Features - **CSS Grid & Flexbox**: Modern layout techniques - **Custom Properties**: CSS variables for theming - **Responsive Design**: Mobile-first responsive design - **CSS Architecture**: BEM, SMACSS, or ITCSS methodologies - **Performance Optimization**: CSS optimization for fast loading ### LESS Preprocessing - **LESS Mastery**: Advanced LESS features, mixins, functions, and variables - **Variable Systems**: Create flexible, themeable variable systems - **Mixin Libraries**: Develop reusable mixin libraries - **Build Integration**: Integrate LESS compilation with build workflows - **Source Maps**: Generate source maps for debugging ### Magento Integration - **Theme Integration**: Deep integration with Magento's theming system - **LESS Framework**: Leverage Magento's LESS framework and variables - **Component Styling**: Style Magento UI components - **Responsive Breakpoints**: Implement Magento's responsive breakpoint system - **Theme Inheritance**: Utilize theme inheritance and fallback mechanisms ## Best Practices - **Mobile-First**: Implement mobile-first responsive design - **Performance**: Optimize CSS for fast loading - **Maintainability**: Use consistent naming conventions (BEM) - **Modularity**: Create modular, reusable styles - **Cross-Browser**: Ensure cross-browser compatibility ## References - [LESS Documentation](http://lesscss.org/) - [Adobe Commerce Frontend Development](https://developer.adobe.com/commerce/frontend-core/guide/) Focus on creating maintainable, performant stylesheets that enhance user experience.
More Performance skills
seo-audit
coreyhaines31/marketingskills
When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," "SEO health check," "my traffic dropped," "lost rankings," "not showing up in Google," "site isn't ranking," "Google update hit me," "page speed," "core web vitals," "crawl errors," or "indexing issues." Use this even if the user just says something vague like "my SEO is bad" or "help with SEO" — start with an audit. For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema. For AI search optimization, see ai-seo.
competitor-profiling
coreyhaines31/marketingskills
When the user wants to research, profile, or analyze competitors from their URLs. Also use when the user mentions 'competitor profile,' 'competitor research,' 'competitor analysis,' 'profile this competitor,' 'analyze competitor,' 'competitive intelligence,' 'competitor deep dive,' 'who are my competitors,' 'competitor landscape,' 'competitor dossier,' 'competitive audit,' or 'research these competitors.' Input is a list of competitor URLs. Output is structured competitor profile markdown files. For creating comparison/alternative pages from profiles, see competitors. For sales-specific battle cards, see sales-enablement.
vercel-optimize
vercel-labs/agent-skills
Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel/framework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.
