Skills
.Work. You
Rest

theme-shopify-html-data-comments

Official

Structure Shopify HTML & comments.

Software Engineering#html#comments#liquid#shopify#theme development#data attributes
AuthorNiccos-Shopify-Workspace
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides clear guidelines for structuring HTML, using data attributes effectively, and writing concise, meaningful comments within Shopify theme development, leading to more maintainable and understandable code.

Core Features & Use Cases

  • Semantic HTML Structure: Encourages the use of semantic tags for better accessibility and SEO.
  • Data Attribute Usage: Demonstrates how to pass data from Liquid to JavaScript using data-* attributes.
  • Comment Best Practices: Outlines when and how to use comments effectively in Liquid, HTML, and snippets, focusing on explaining the "why" rather than the "what".
  • Use Case: When developing a new product card component, use this Skill to ensure the HTML is semantic, data attributes are correctly implemented for interactivity, and comments clearly explain any complex logic or usage instructions.

Quick Start

Apply the theme-shopify-html-data-comments skill to structure the HTML and add appropriate comments for a new product card section.

Dependency Matrix

Required Modules

None required

Components

references

💻 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-shopify-html-data-comments
Download link: https://github.com/Niccos-Shopify-Workspace/shopify-cursor-skills/archive/main.zip#theme-shopify-html-data-comments

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.