Cursor rule

1---
2description: Section coding standards and best practices guide
3globs: sections/*.liquid
4alwaysApply: false
5---
6# Section Development Standards
7 
8## Section Requirements
9 
10Every section must include:
11 
12- `{% schema %}` tag with valid JSON
13- Proper HTML semantic structure
14- CSS scoping with section classes
15- Translation keys for all text
16 
17## Section Patterns
18 
19**Basic Section Structure:**
20 
21```liquid
22{% liquid
23  assign section_id = section.settings.custom_id | default: section.id
24  assign section_class = 'section-' | append: section.type
25%}
26 
27<section
28  id="{{ section_id }}"
29  class="{{ section_class }}"
30  style="
31    --section-padding-top: {{ section.settings.padding_top }}px;
32    --section-padding-bottom: {{ section.settings.padding_bottom }}px;
33  "
34>
35  <div class="page-width">
36    {% content_for 'blocks %}
37  </div>
38</section>
39 
40{% stylesheet %}
41.{{ section_class }} {
42  padding-top: var(--section-padding-top, 40px);
43  padding-bottom: var(--section-padding-bottom, 40px);
44}
45{% endstylesheet %}
46 
47{% schema %}
48{
49  "name": "t:names.section_name",
50  "tag": "section",
51  "class": "section-name",
52  "blocks": [
53    {"type": "@theme"},
54    {"type": "@app"}
55  ],
56  "settings": [
57    {
58      "type": "range",
59      "id": "padding_top",
60      "label": "t:settings.padding",
61      "min": 0,
62      "max": 100,
63      "default": 40,
64      "unit": "px"
65    }
66  ],
67  "presets": [
68    {
69      "name": "t:names.section_name"
70    }
71  ]
72}
73{% endschema %}
74```
75 
76## Performance Patterns
77 
78- Use `{% liquid %}` for multiline logic
79- Lazy load images with `loading="lazy"`
80- Scope CSS variables to section
81- Use `container-queries` for responsive behavior
82 
83[section-example.liquid](mdc:.cursor/rules/examples/section-example.liquid)
84