Theme Development: Styling & JavaScript
OfficialOptimize your Magento theme's styling and JavaScript for a seamless user experience.
AuthorInchoo
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill addresses the challenges of theme development in Magento, specifically focusing on styling and JavaScript customization to enhance the user interface and interactivity.
Core Features & Use Cases
- LESS/CSS Styling: Customize theme variables, extend styles, and module-specific styles.
- Image Configuration: Configure image sizes and settings for product listings and pages.
- JavaScript Customization: Customize RequireJS configuration, write custom JavaScript modules, and mixins.
- Responsive Design: Implement responsive design principles and media queries.
- Static Content Deployment: Deploy static content in development and production modes.
- Theme Configuration in Admin: Configure theme-specific options in the Magento admin panel.
- Best Practices: Provide guidelines for effective theme development.
- Common Customization Patterns: Offer patterns for adding custom fonts, logos, and schema.org markup.
Quick Start
To begin customizing your theme, navigate to the 'config/skills/theme-development-styling' directory and review the provided LESS/CSS files, JavaScript configurations, and responsive design guidelines.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Theme Development: Styling & JavaScript Download link: https://github.com/Inchoo/magento-bricklayer/archive/main.zip#theme-development-styling-javascript Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.