@zohofinance/commerce 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -0
- package/package.json +2 -2
- package/ts-dist/mocks/init-theme/.claude/CLAUDE.md +6 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-section-from-design.20260528/SKILL.md +242 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-section-from-design.20260528/inputs/figma.md +81 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-section-from-design.20260528/inputs/screenshot.md +54 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-section-from-design.20260528/inputs/url.md +88 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-section-from-design.20260528/spec-table.md +102 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-section-from-design.20260528/verification/accessibility.md +110 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-section-from-design.20260528/verification/performance.md +127 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-section-from-design.20260528/verification/tokens.md +87 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-section-from-design.20260528/verification/visual-diff.md +123 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-theme-builder.20260528/SKILL.md +605 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-theme-builder.20260528/design-tokens.md +105 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-theme-builder.20260528/page-json-contract.md +58 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-theme-builder.20260528/qa-accessibility.md +35 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-theme-builder.20260528/reference-lookup.md +94 -0
- package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-theme-builder.20260528/section-anatomy.md +109 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/SKILL.md +313 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/agent-hierarchy.md +142 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/ask-developer.md +113 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/bootstrap.md +260 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/build-metrics.md +89 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/code-quality.md +186 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/common-pages-agent.md +97 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/dev-server-and-urls.md +127 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/exemplars.md +79 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/figma-discovery.md +138 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/figma-extraction.md +132 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/image-sources.md +84 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/inputs/guidelines-frame.md +178 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/page-builder.md +322 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/page-orchestrator.md +199 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/parallel-fanout.md +152 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/scripts/a11y.mjs +129 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/scripts/lint-section.mjs +502 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/scripts/perf.mjs +134 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/scripts/pixel-diff.mjs +206 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/scripts/record-build-metrics.mjs +118 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/section-builder.md +131 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/subagent-escalation.md +75 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/transcription-rules.md +98 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/verification.md +227 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/visual-verify-loop.md +117 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/_index.md +4 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/assets.md +105 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/best-practices.md +212 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/custom-scripts.md +294 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/i18n.md +155 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/introduction.md +91 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/layouts.md +158 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/pages.md +156 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/reference/_index.md +4 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/reference/filters.md +419 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/reference/global-objects.md +415 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/reference/schema-types.md +926 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/reference/tags.md +259 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/sections.md +203 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/setup-guide.md +424 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/snippets.md +70 -0
- package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/theme-structure.md +252 -0
- package/ts-dist/mocks/init-theme/.cursor/PLAYBOOK.md +144 -0
- package/ts-dist/mocks/init-theme/.cursor/README.md +6 -0
- package/ts-dist/mocks/init-theme/.cursor/agents/figma-desktop-mobile-parallel.md +48 -0
- package/ts-dist/mocks/init-theme/.cursor/agents/visual-compare.md +221 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/add-field.md +83 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/add-theme-setting.md +200 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/assemble-page.md +72 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/audit-page.md +57 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/build-page-sections.md +110 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/build-section.md +418 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/build-theme.md +307 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/compare-section.md +358 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/create-theme.md +77 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/extract-tokens.md +43 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/fix-section.md +92 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/impact.md +50 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/qa-a11y.md +66 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/qa-i18n.md +110 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/qa-layout.md +127 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/qa-performance.md +72 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/qa-section.md +84 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/qa-sections.md +48 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/qa-theme.md +85 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/redesign-section.md +177 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/refactor-section.md +185 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/sync-theme-settings.md +132 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/validate-page.md +60 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/validate-section-group.md +88 -0
- package/ts-dist/mocks/init-theme/.cursor/commands/validate-theme-settings.md +119 -0
- package/ts-dist/mocks/init-theme/.cursor/examples/design-instructions-template.md +151 -0
- package/ts-dist/mocks/init-theme/.cursor/mcp.json +18 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/README.md +160 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/accessibility.mdc +24 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/add-field.mdc +222 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/add-theme-setting.mdc +39 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/assemble-page.mdc +130 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/audit-page.mdc +92 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/build-section.mdc +178 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/build-theme.mdc +47 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/compare-section.mdc +94 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/create-theme.mdc +78 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/css.mdc +137 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/design-spec-extraction.mdc +255 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/extract-tokens.mdc +43 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/figma-mcp-resolution.mdc +40 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/fix-section.mdc +154 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/general.mdc +30 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/i18n.mdc +85 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/javascript.mdc +85 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/liquid-no-hardcoded-strings.mdc +42 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/liquid.mdc +171 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/mobile-desktop-setting-meta.mdc +34 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/naming-convention.mdc +64 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/pages.mdc +120 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/performance.mdc +51 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/qa-section.mdc +134 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/redesign-section.mdc +147 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/schema-sync.mdc +110 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/schema.mdc +360 -0
- package/ts-dist/mocks/init-theme/.cursor/rules/share-urls.mdc +68 -0
- package/ts-dist/mocks/init-theme/.cursor/skills/browser-verify.md +128 -0
- package/ts-dist/mocks/init-theme/.cursor/skills/design-tokens.md +105 -0
- package/ts-dist/mocks/init-theme/.cursor/skills/page-json-contract.md +87 -0
- package/ts-dist/mocks/init-theme/.cursor/skills/qa-accessibility.md +35 -0
- package/ts-dist/mocks/init-theme/.cursor/skills/reference-lookup.md +88 -0
- package/ts-dist/mocks/init-theme/.cursor/skills/section-anatomy.md +173 -0
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Scaffold a new theme folder with all required files and structure
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# /create-theme
|
|
7
|
+
|
|
8
|
+
Scaffold a new theme from this theme's existing files.
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
```
|
|
12
|
+
/create-theme <theme_name>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Step 1 — Validate
|
|
18
|
+
- If `` already exists → STOP and warn the user, do not overwrite
|
|
19
|
+
- If theme_name is blank → ask the user to provide a name
|
|
20
|
+
|
|
21
|
+
## Step 2 — Find Reference Theme
|
|
22
|
+
- Use this theme's current layouts, snippets, settings, and config as the copy template
|
|
23
|
+
- Do not look outside this theme directory for other themes
|
|
24
|
+
|
|
25
|
+
## Step 3 — Create Folder Structure
|
|
26
|
+
Run terminal commands to create:
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
assets/
|
|
31
|
+
i18n/
|
|
32
|
+
en.json ← copy from reference theme, keep structure, clear values
|
|
33
|
+
en.schema.json ← copy from reference theme, keep structure, clear values
|
|
34
|
+
layouts/
|
|
35
|
+
theme.liquid ← copy from reference theme as-is
|
|
36
|
+
accounts.liquid ← copy from reference theme as-is
|
|
37
|
+
sitemap.liquid ← copy from reference theme as-is
|
|
38
|
+
sections/ ← empty folder
|
|
39
|
+
snippets/ ← copy all snippets from reference theme as-is
|
|
40
|
+
(icons, search-bar, header-sidebar, etc. are shared infrastructure)
|
|
41
|
+
pages/
|
|
42
|
+
404.json
|
|
43
|
+
blog.json
|
|
44
|
+
cart.json
|
|
45
|
+
categories.json
|
|
46
|
+
checkout.json
|
|
47
|
+
collection.json
|
|
48
|
+
index.json
|
|
49
|
+
orders.json
|
|
50
|
+
page.json
|
|
51
|
+
payment.json
|
|
52
|
+
product.json
|
|
53
|
+
sitemap.json
|
|
54
|
+
settings/
|
|
55
|
+
schema.json ← copy from reference theme as-is
|
|
56
|
+
theme.json ← copy from reference theme as-is
|
|
57
|
+
favicon.ico
|
|
58
|
+
package.json ← copy from reference theme, update name field to <theme_name>
|
|
59
|
+
postcss.config.js ← copy from reference theme as-is
|
|
60
|
+
project.json ← copy from reference theme, update name field to <theme_name>
|
|
61
|
+
tailwind.config.js ← copy from reference theme as-is
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Step 4 — Note About Tokens
|
|
65
|
+
Do NOT create figma-tokens.md. Tokens are read directly from:
|
|
66
|
+
```
|
|
67
|
+
figma-variables.json
|
|
68
|
+
```
|
|
69
|
+
This file is exported by the designer from Figma and placed here manually.
|
|
70
|
+
Remind the developer: ask your designer for figma-variables.json before running /build-section.
|
|
71
|
+
|
|
72
|
+
## Step 5 — Confirm
|
|
73
|
+
Report back:
|
|
74
|
+
- ✅ Theme folder created at ``
|
|
75
|
+
- ✅ Snippets copied from this theme's existing `snippets/`
|
|
76
|
+
- ⚠️ Ask designer for `figma-variables.json` → place at `figma-variables.json` → run `/extract-tokens` to verify
|
|
77
|
+
- ⚠️ Sections folder is empty — use `/audit-page` to plan each page before building
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Validate the Figma variables JSON exists for a theme
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# /extract-tokens
|
|
7
|
+
|
|
8
|
+
Verify the designer-exported `figma-variables.json` is in place.
|
|
9
|
+
This is the only setup step needed before building sections.
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
```
|
|
13
|
+
/extract-tokens <theme_name>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## Step 1 — Check JSON Exists
|
|
19
|
+
|
|
20
|
+
Look for `figma-variables.json`.
|
|
21
|
+
|
|
22
|
+
If missing, STOP and tell the developer:
|
|
23
|
+
```
|
|
24
|
+
❌ Missing: figma-variables.json
|
|
25
|
+
|
|
26
|
+
Ask your designer to:
|
|
27
|
+
Figma → Variables panel → ··· menu → Export variables → JSON
|
|
28
|
+
Place the file at: figma-variables.json
|
|
29
|
+
|
|
30
|
+
Re-run /extract-tokens once the file is in place.
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Step 2 — Confirm
|
|
34
|
+
|
|
35
|
+
If the file exists, confirm:
|
|
36
|
+
```
|
|
37
|
+
✅ figma-variables.json found at figma-variables.json
|
|
38
|
+
→ All build/compare/qa commands will read this file directly for token values.
|
|
39
|
+
→ When designer updates tokens: re-export JSON, replace the file, done.
|
|
40
|
+
→ Next step: run /audit-page <theme_name> <page_name>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
No conversion needed. Commands read the JSON directly.
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Fix a bug in an existing section with minimal blast radius
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# /fix-section
|
|
7
|
+
|
|
8
|
+
Fix a specific bug. Diagnose root cause first, then fix only what is broken.
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
```
|
|
12
|
+
/fix-section <theme_name> <section_name>
|
|
13
|
+
```
|
|
14
|
+
Describe: what you see (broken) vs what you expect (correct).
|
|
15
|
+
Mention if it happens always or only in certain conditions.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Visual bugs — run compare-section first
|
|
20
|
+
|
|
21
|
+
If the bug is **visual** (spacing, alignment, colour, typography, borders, CTA size, selected state), prefer running **`/compare-section <theme_name> <section_name>`** with the correct desktop and mobile Figma URLs first. Use the mismatch report to apply fixes (reply ALL or specific issue numbers). Then run `/qa-section` to verify. Use fix-section for diagnosis when the issue is logic, schema, or not clearly covered by the Figma design.
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## Pre-flight
|
|
26
|
+
Open section file + all related snippets referenced via `{% render %}`.
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## Stage 1 — Diagnose
|
|
31
|
+
Check each category:
|
|
32
|
+
|
|
33
|
+
### Schema / Settings mismatch
|
|
34
|
+
- `section.settings.X` referenced but missing from schema?
|
|
35
|
+
- url field rendered as `{{ field }}` instead of `{{ field.handle }}`?
|
|
36
|
+
- select field rendered as `{{ field }}` instead of `{{ field.value }}`?
|
|
37
|
+
- image field rendered as `{{ field }}` instead of `{{ field.url }}`?
|
|
38
|
+
- Wrong field type causing wrong render?
|
|
39
|
+
|
|
40
|
+
### Liquid Logic
|
|
41
|
+
- Loop missing empty state?
|
|
42
|
+
- Wrong condition operator?
|
|
43
|
+
- Variable assigned after it's used?
|
|
44
|
+
- `{% render %}` passing wrong variable name?
|
|
45
|
+
|
|
46
|
+
### HTML / CSS
|
|
47
|
+
- Tailwind class missing responsive prefix (`md:`, `lg:`)?
|
|
48
|
+
- Flex/grid container missing alignment classes?
|
|
49
|
+
- `hidden` conflicting with display class?
|
|
50
|
+
- z-index missing on overlay/dropdown?
|
|
51
|
+
|
|
52
|
+
### Page JSON
|
|
53
|
+
- Section type mismatched with filename?
|
|
54
|
+
- Setting value in wrong format? (e.g. `"value"` instead of `{ "display_name": "...", "value": "..." }`)
|
|
55
|
+
- Block missing from `block_order`?
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## Stage 2 — State Diagnosis
|
|
60
|
+
Before editing:
|
|
61
|
+
```
|
|
62
|
+
BUG DIAGNOSIS — <section_name>
|
|
63
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
64
|
+
ROOT CAUSE: [one clear sentence]
|
|
65
|
+
LOCATION: Line X — [code snippet]
|
|
66
|
+
FIX: [what will change]
|
|
67
|
+
BLAST RADIUS: [files affected]
|
|
68
|
+
UNRELATED ISSUES NOTICED: [list — not fixing now]
|
|
69
|
+
```
|
|
70
|
+
Ask: "Proceed?" before editing.
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
## Stage 3 — Apply Fix
|
|
75
|
+
- Change ONLY what is in the diagnosis
|
|
76
|
+
- No refactoring surrounding code
|
|
77
|
+
- No improving unrelated areas
|
|
78
|
+
- Add comment on fixed line: `{{-- fixed: [reason] --}}`
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## Stage 4 — Blast Radius Check
|
|
83
|
+
If schema field type changed → update all Liquid references + page JSON default format.
|
|
84
|
+
If Liquid logic changed → verify all branches still valid.
|
|
85
|
+
If HTML changed → verify responsive behaviour intact.
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
## Output
|
|
90
|
+
Report: root cause, lines changed, files affected, untouched confirmation.
|
|
91
|
+
List other noticed issues separately — do not fix them in this pass.
|
|
92
|
+
→ NEXT: `/qa-section <theme_name> <section_name>`
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: List sections that use a snippet (impact of changing it)
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# /impact
|
|
7
|
+
|
|
8
|
+
Find every section (and optionally snippet) that references a given snippet via `{% render 'snippet_name' %}`. Use before changing a snippet so you know which sections to re-run QA or compare on.
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
```
|
|
12
|
+
/impact <theme_name> <snippet_name>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
`snippet_name` is the name without `.liquid` (e.g. `product-card` for `product-card.liquid`).
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Steps
|
|
20
|
+
|
|
21
|
+
1. Search `` for `{% render '<snippet_name>' %}` or `{% render '<snippet_name>.liquid' %}` (and common variants, e.g. with quotes).
|
|
22
|
+
2. Include:
|
|
23
|
+
- Sections: `sections/*.liquid` that render the snippet (directly or via another snippet).
|
|
24
|
+
- Snippets: `snippets/*.liquid` that render the snippet (so the user knows nested usage).
|
|
25
|
+
3. If the snippet is rendered only by another snippet, list that snippet and then any sections that render that one (transitive closure).
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Output
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
IMPACT — changing snippet "<snippet_name>" (<theme_name>)
|
|
33
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
34
|
+
|
|
35
|
+
Sections that use this snippet (directly or via another snippet):
|
|
36
|
+
- sections/product-details.liquid
|
|
37
|
+
- sections/collection-list.liquid
|
|
38
|
+
- sections/product-quick-view.liquid
|
|
39
|
+
|
|
40
|
+
Snippets that use this snippet:
|
|
41
|
+
- snippets/product-card.liquid (used by sections above)
|
|
42
|
+
|
|
43
|
+
NEXT: After changing snippets/<snippet_name>.liquid, run:
|
|
44
|
+
/qa-section <theme_name> product-details
|
|
45
|
+
/qa-section <theme_name> collection-list
|
|
46
|
+
/qa-section <theme_name> product-quick-view
|
|
47
|
+
(and /compare-section if design may have changed)
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Keep the list accurate: only sections/snippets that actually reference the given snippet name.
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Audit a section or page for accessibility (a11y) issues
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# /qa-a11y
|
|
7
|
+
|
|
8
|
+
Run an accessibility audit on a specific section or page. Use alongside `/qa-section` once the schema and basic implementation are stable.
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
```
|
|
12
|
+
/qa-a11y <theme_name> <target>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
- **theme_name**: This theme's folder name (e.g. `my_theme`)
|
|
16
|
+
- **target**: Section file (without extension) or page handle
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Checklist
|
|
21
|
+
|
|
22
|
+
### Semantics & Structure
|
|
23
|
+
- [ ] Exactly one visible `<h1>` per page; heading levels are not skipped
|
|
24
|
+
- [ ] Interactive UI uses semantic elements (`<button>`, `<a href>`, form controls) instead of clickable `<div>`/`<span>`
|
|
25
|
+
- [ ] Landmarks (`<header>`, `<main>`, `<nav>`, `<footer>`) are present where appropriate
|
|
26
|
+
|
|
27
|
+
### Keyboard & Focus
|
|
28
|
+
- [ ] All controls are reachable and operable with keyboard only (Tab, Shift+Tab, Enter, Space)
|
|
29
|
+
- [ ] Focus indicator is clearly visible on every interactive element (no `outline: none` without replacement)
|
|
30
|
+
- [ ] No keyboard traps; modals/menus manage and restore focus correctly
|
|
31
|
+
|
|
32
|
+
### Images & Media
|
|
33
|
+
- [ ] All `<img>` elements have meaningful `alt` text or `alt=""` when decorative
|
|
34
|
+
- [ ] Icon-only buttons/links have accessible names (text, `aria-label`, or `aria-labelledby`)
|
|
35
|
+
- [ ] Auto-playing or looping motion is subtle and has a way to pause/stop when prominent
|
|
36
|
+
|
|
37
|
+
### Forms & Errors
|
|
38
|
+
- [ ] Every input/textarea/select has an associated `<label>` or equivalent ARIA labeling
|
|
39
|
+
- [ ] Error messages are programmatically tied to fields (e.g. `aria-describedby`)
|
|
40
|
+
- [ ] Required fields are indicated with more than just color
|
|
41
|
+
|
|
42
|
+
### Color & Contrast
|
|
43
|
+
- [ ] Text and essential UI elements meet WCAG AA contrast
|
|
44
|
+
- [ ] Color is never the only way information is conveyed (use text, icons, patterns)
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Output Format
|
|
50
|
+
```
|
|
51
|
+
A11Y REPORT — <target>
|
|
52
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
53
|
+
SEMANTICS ✅ PASS / ❌ FAIL
|
|
54
|
+
KEYBOARD ✅ PASS / ❌ FAIL
|
|
55
|
+
IMAGES ✅ PASS / ❌ FAIL
|
|
56
|
+
FORMS ✅ PASS / ❌ FAIL
|
|
57
|
+
CONTRAST ✅ PASS / ❌ FAIL
|
|
58
|
+
|
|
59
|
+
ISSUES:
|
|
60
|
+
❌ [file:line] description of issue → fix applied / needs your decision
|
|
61
|
+
|
|
62
|
+
AUTO-FIXED: [list]
|
|
63
|
+
NEEDS YOUR DECISION: [list]
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Auto-fix unambiguous issues directly in the code (e.g., missing `alt` on obvious decorative images, focus outline removal). Flag anything that changes visible copy, semantics, or design intent.
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Audit translation key coverage between schemas and i18n files
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# /qa-i18n
|
|
7
|
+
|
|
8
|
+
Check that every `t:` key referenced in section schemas and theme settings schema actually exists in `en.schema.json`, and flag orphaned i18n keys not referenced anywhere.
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
```
|
|
12
|
+
/qa-i18n <theme_name>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Pre-flight
|
|
18
|
+
|
|
19
|
+
Read these files:
|
|
20
|
+
|
|
21
|
+
1. `i18n/en.schema.json` — the translation key source of truth.
|
|
22
|
+
2. `settings/schema.json` — theme-level settings (keys under `settings_schema.*`).
|
|
23
|
+
3. All `sections/*.liquid` files — section schemas (keys under `sections.*`).
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Checks
|
|
28
|
+
|
|
29
|
+
### 1. Theme Settings Keys (settings_schema)
|
|
30
|
+
For every `t:settings_schema.*` string in `settings/schema.json`:
|
|
31
|
+
- Extract the path after `t:` (e.g. `settings_schema.theme.settings.primary_color.label`).
|
|
32
|
+
- Navigate `en.schema.json` using dot-delimited path.
|
|
33
|
+
- If the key does not exist → flag as **MISSING**.
|
|
34
|
+
|
|
35
|
+
### 2. Section Schema Keys (sections)
|
|
36
|
+
For every `.liquid` file in `sections/`:
|
|
37
|
+
- Extract the `{% schema %}` JSON block.
|
|
38
|
+
- Find all `t:sections.*` strings in `name`, `label`, `content`, `default`, `display_name`, `info`, `placeholder` fields — including inside `settings`, `blocks`, and `presets`.
|
|
39
|
+
- For each `t:` key:
|
|
40
|
+
- Extract the path after `t:`.
|
|
41
|
+
- Verify it exists in `en.schema.json`.
|
|
42
|
+
- If missing → flag as **MISSING**.
|
|
43
|
+
|
|
44
|
+
### 3. Section Group Keys
|
|
45
|
+
For each `*-group.json` in `sections/`:
|
|
46
|
+
- Find all `t:` strings in `name` fields.
|
|
47
|
+
- Verify each exists in `en.schema.json`.
|
|
48
|
+
|
|
49
|
+
### 4. Orphan Detection (warnings)
|
|
50
|
+
For every key path in `en.schema.json` under `settings_schema` and `sections`:
|
|
51
|
+
- Build the full `t:` path (e.g. `t:settings_schema.theme.settings.primary_color.label`).
|
|
52
|
+
- Search for that exact string across `settings/schema.json` and all `sections/*.liquid` files.
|
|
53
|
+
- If the key is never referenced → flag as **ORPHAN** (warning only).
|
|
54
|
+
|
|
55
|
+
### 5. Hardcoded English Detection
|
|
56
|
+
In all section `{% schema %}` blocks and `settings/schema.json`:
|
|
57
|
+
- Flag any `label`, `content`, `name`, `info`, or `placeholder` value that is a plain English string (does NOT start with `t:`).
|
|
58
|
+
- Exception: `default` values for `text` type MAY be `t:` keys or empty strings — both are acceptable.
|
|
59
|
+
- Exception: `default` for `checkbox` (boolean), `range` (number), `color` (hex string) are not strings and should be skipped.
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## Output
|
|
64
|
+
|
|
65
|
+
```
|
|
66
|
+
QA I18N — <theme_name>
|
|
67
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
68
|
+
|
|
69
|
+
THEME SETTINGS KEYS ✅ / ❌
|
|
70
|
+
Referenced: <n> | Missing: <n>
|
|
71
|
+
|
|
72
|
+
SECTION SCHEMA KEYS ✅ / ❌
|
|
73
|
+
Referenced: <n> | Missing: <n>
|
|
74
|
+
|
|
75
|
+
SECTION GROUP KEYS ✅ / ❌
|
|
76
|
+
Referenced: <n> | Missing: <n>
|
|
77
|
+
|
|
78
|
+
ORPHAN KEYS ✅ / ⚠️
|
|
79
|
+
Total i18n keys: <n> | Orphaned: <n>
|
|
80
|
+
|
|
81
|
+
HARDCODED ENGLISH ✅ / ⚠️
|
|
82
|
+
Instances: <n>
|
|
83
|
+
|
|
84
|
+
MISSING KEYS:
|
|
85
|
+
❌ t:settings_schema.theme.settings.new_field.label
|
|
86
|
+
→ used in: settings/schema.json
|
|
87
|
+
❌ t:sections.hero_banner.settings.cta_text.label
|
|
88
|
+
→ used in: sections/hero-banner.liquid
|
|
89
|
+
|
|
90
|
+
ORPHAN KEYS (not referenced anywhere):
|
|
91
|
+
⚠️ settings_schema.theme.settings.old_removed_field.label
|
|
92
|
+
⚠️ sections.deprecated_section.name
|
|
93
|
+
|
|
94
|
+
HARDCODED ENGLISH:
|
|
95
|
+
⚠️ sections/my-section.liquid schema: "label": "My Button Text"
|
|
96
|
+
→ should be: "label": "t:sections.my_section.settings.my_button.label"
|
|
97
|
+
|
|
98
|
+
SUMMARY
|
|
99
|
+
Errors: <n> | Warnings: <n>
|
|
100
|
+
RESULT: PASS / FAIL
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
---
|
|
104
|
+
|
|
105
|
+
## Notes
|
|
106
|
+
|
|
107
|
+
- Missing keys are errors — the UI will show raw `t:` paths instead of translated text.
|
|
108
|
+
- Orphan keys are warnings — they waste space but don't break anything. Clean up at your discretion.
|
|
109
|
+
- Hardcoded English is a warning — it works but bypasses the i18n system.
|
|
110
|
+
- This command is read-only. To add missing keys, edit `en.schema.json` directly or use `/add-theme-setting` / `/add-field` which handle i18n automatically.
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Audit all layout files in a theme for correctness, asset loading, and parity
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# /qa-layout
|
|
7
|
+
|
|
8
|
+
Audit every layout file in a theme. Checks required HTML elements, asset loading, section group references, snippet references, script patterns, and parity between `theme.liquid` and `accounts.liquid`.
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
```
|
|
12
|
+
/qa-layout <theme_name>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Pre-flight
|
|
18
|
+
|
|
19
|
+
1. List all `.liquid` files in `layouts/`.
|
|
20
|
+
2. Read each layout file.
|
|
21
|
+
3. Read `snippets/` directory listing (for snippet existence checks).
|
|
22
|
+
4. Read `sections/` directory listing (for group JSON existence checks).
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## Checks (per layout file)
|
|
27
|
+
|
|
28
|
+
### 1. Required HTML Structure
|
|
29
|
+
- `<!doctype html>` or `<!DOCTYPE html>` present.
|
|
30
|
+
- `<html` tag with `lang` attribute.
|
|
31
|
+
- `<head>` and `</head>` present.
|
|
32
|
+
- `<body>` and `</body>` present.
|
|
33
|
+
- `<meta charset="utf-8">` or equivalent in `<head>`.
|
|
34
|
+
- `<meta name="viewport"` with `width=device-width` in `<head>`.
|
|
35
|
+
- `<title>` tag in `<head>`.
|
|
36
|
+
|
|
37
|
+
**Exception:** `sitemap.liquid` is XML-only and should NOT have HTML structure. Skip HTML checks for it.
|
|
38
|
+
|
|
39
|
+
### 2. Content Placeholder
|
|
40
|
+
- `theme.liquid`: must contain `{{ content_for_layout }}`.
|
|
41
|
+
- `accounts.liquid`: must contain `{{ content_for_layout }}`.
|
|
42
|
+
- `sitemap.liquid`: must contain `{{ content_for_layout }}` (XML body).
|
|
43
|
+
|
|
44
|
+
### 3. Asset Loading
|
|
45
|
+
For `theme.liquid` and `accounts.liquid`:
|
|
46
|
+
- `style.css` loaded via `{{ "style.css" | asset_url }}` (as `<link>` or `<style>`).
|
|
47
|
+
- `theme-settings` snippet rendered via `{% render 'theme-settings' %}` OR `theme-settings.css` loaded as a stylesheet.
|
|
48
|
+
- `components-library.iife.js` loaded via `{{ "components-library.iife.js" | asset_url }}`.
|
|
49
|
+
- All `<script>` tags use `defer`, `async`, or `type="module"` — no render-blocking scripts.
|
|
50
|
+
|
|
51
|
+
### 4. Section Group References
|
|
52
|
+
For every `{% sections '...' %}` tag found:
|
|
53
|
+
- Extract the group name (e.g. `header-group` from `{% sections 'header-group' %}`).
|
|
54
|
+
- Verify `sections/<group_name>.json` exists.
|
|
55
|
+
- If the file does not exist → flag as error.
|
|
56
|
+
|
|
57
|
+
### 5. Snippet References
|
|
58
|
+
For every `{% render '...' %}` tag found:
|
|
59
|
+
- Extract the snippet name.
|
|
60
|
+
- Verify `snippets/<snippet_name>.liquid` exists.
|
|
61
|
+
- If the file does not exist → flag as error.
|
|
62
|
+
|
|
63
|
+
### 6. Liquid Conventions
|
|
64
|
+
- No `{% include %}` tags (must use `{% render %}`).
|
|
65
|
+
- User-facing output escaped: `{{ value | escape }}` where applicable.
|
|
66
|
+
- No hardcoded English strings in HTML (should use `{{ "key" | t }}` or `t:` in schema).
|
|
67
|
+
|
|
68
|
+
### 7. Image Loading
|
|
69
|
+
- Images in the header/above-fold area use `loading="eager"`.
|
|
70
|
+
- Favicon link present: `<link rel="shortcut icon"` or `<link rel="icon"`.
|
|
71
|
+
|
|
72
|
+
### 8. Layout Parity (theme.liquid vs accounts.liquid)
|
|
73
|
+
Compare `theme.liquid` and `accounts.liquid` for shared chrome:
|
|
74
|
+
- Both should load `style.css`.
|
|
75
|
+
- Both should render `theme-settings` snippet (or load `theme-settings.css`).
|
|
76
|
+
- Both should load `components-library.iife.js`.
|
|
77
|
+
- If `theme.liquid` loads a global script (e.g. `analytics.js`, `view-transitions.js`), check if `accounts.liquid` should also load it.
|
|
78
|
+
- Flag differences as warnings — some may be intentional (e.g. accounts layout may not need view transitions).
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## Output
|
|
83
|
+
|
|
84
|
+
```
|
|
85
|
+
QA LAYOUT — <theme_name>
|
|
86
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
87
|
+
|
|
88
|
+
theme.liquid
|
|
89
|
+
HTML STRUCTURE ✅ / ❌
|
|
90
|
+
CONTENT PLACEHOLDER ✅ / ❌
|
|
91
|
+
ASSET LOADING ✅ / ⚠️ / ❌
|
|
92
|
+
SECTION GROUPS ✅ / ❌
|
|
93
|
+
SNIPPET REFS ✅ / ❌
|
|
94
|
+
LIQUID CONVENTIONS ✅ / ⚠️
|
|
95
|
+
IMAGE LOADING ✅ / ⚠️
|
|
96
|
+
|
|
97
|
+
accounts.liquid
|
|
98
|
+
HTML STRUCTURE ✅ / ❌
|
|
99
|
+
CONTENT PLACEHOLDER ✅ / ❌
|
|
100
|
+
ASSET LOADING ✅ / ⚠️ / ❌
|
|
101
|
+
SECTION GROUPS ✅ / ❌ / N/A
|
|
102
|
+
SNIPPET REFS ✅ / ❌
|
|
103
|
+
LIQUID CONVENTIONS ✅ / ⚠️
|
|
104
|
+
IMAGE LOADING ✅ / ⚠️
|
|
105
|
+
|
|
106
|
+
sitemap.liquid
|
|
107
|
+
CONTENT PLACEHOLDER ✅ / ❌
|
|
108
|
+
(HTML checks skipped — XML layout)
|
|
109
|
+
|
|
110
|
+
LAYOUT PARITY ✅ / ⚠️
|
|
111
|
+
|
|
112
|
+
ISSUES:
|
|
113
|
+
❌ [file] [check] description
|
|
114
|
+
⚠️ [file] [check] description
|
|
115
|
+
|
|
116
|
+
SUMMARY: PASS / FAIL
|
|
117
|
+
Layouts checked: <n>
|
|
118
|
+
Errors: <n> | Warnings: <n>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## Notes
|
|
124
|
+
|
|
125
|
+
- This command is read-only — it does not modify layout files.
|
|
126
|
+
- Use this after `/create-theme` to verify the scaffold, or before release to catch regressions.
|
|
127
|
+
- Layout changes are manual. If issues are found, fix them directly in the layout file.
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Audit a section or page for performance risks (LCP/CLS/JS/CSS/Liquid)
|
|
3
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# /qa-performance
|
|
7
|
+
|
|
8
|
+
Run a performance-focused audit on a specific section or page. Use alongside `/qa-section` once the schema and basic implementation are stable.
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
```
|
|
12
|
+
/qa-performance <theme_name> <target>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
- **theme_name**: This theme's folder name (e.g. `my_theme`)
|
|
16
|
+
- **target**: Section file (without extension) or page handle
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Checklist
|
|
21
|
+
|
|
22
|
+
### Images & Media (LCP / CLS)
|
|
23
|
+
- [ ] Every `<img>` has `width` and `height` to prevent layout shift (CLS)
|
|
24
|
+
- [ ] Above-the-fold / LCP candidates use `loading="eager"`; non-critical images use `loading="lazy"`
|
|
25
|
+
- [ ] Image src uses the image object URL (`{{ field.url }}` / `{{ section.settings.image.url }}`), not legacy filters like `| img_url`
|
|
26
|
+
- [ ] Flag oversized image dimensions vs rendered size (recommend smaller assets / responsive approach)
|
|
27
|
+
- [ ] Avoid background images for critical content images when possible (prefer `<img>` for browser optimization)
|
|
28
|
+
- [ ] Prominent auto-playing/looping motion has a way to pause/stop; motion is subtle
|
|
29
|
+
|
|
30
|
+
### CSS (render cost / maintainability)
|
|
31
|
+
- [ ] Static styling is primarily Tailwind; `{% style %}` is used only for dynamic values, variables, or stateful selectors
|
|
32
|
+
- [ ] `{% style %}` rules are scoped to `#section-{{ section.id }}`
|
|
33
|
+
- [ ] No expensive selectors without need (deep descendant chains, broad `*`, heavy attribute selectors)
|
|
34
|
+
- [ ] Animations avoid layout properties (`width/height/top/left/margin`); prefer `transform`/`opacity`
|
|
35
|
+
|
|
36
|
+
### JavaScript (main-thread / TTI)
|
|
37
|
+
- [ ] JS is included only when the section needs it (no unused scripts on initial load)
|
|
38
|
+
- [ ] Scripts use `defer` and do not block rendering
|
|
39
|
+
- [ ] Avoid many per-item listeners in loops; use delegation where reasonable
|
|
40
|
+
- [ ] Avoid layout thrashing (batch reads, then writes)
|
|
41
|
+
- [ ] Respects `prefers-reduced-motion` where animation is present
|
|
42
|
+
|
|
43
|
+
### Liquid / HTML (server + DOM cost)
|
|
44
|
+
- [ ] Loops have empty states (`{% else %}`) or guards (`size > 0`)
|
|
45
|
+
- [ ] Heavy/repeated work is pre-assigned in a top `{% liquid %}` block instead of repeated inside loops
|
|
46
|
+
- [ ] DOM is not excessively nested; avoid unnecessary wrapper elements
|
|
47
|
+
- [ ] Repeated SVG/icon markup is deduplicated via snippet render when reused
|
|
48
|
+
|
|
49
|
+
### Fonts & Text
|
|
50
|
+
- [ ] No per-section custom font loading; rely on theme-level font loading
|
|
51
|
+
- [ ] Avoid icon fonts for small icon sets; prefer inline SVG/snippets
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## Output Format
|
|
56
|
+
```
|
|
57
|
+
PERF REPORT — <target>
|
|
58
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
59
|
+
IMAGES ✅ PASS / ⚠️ REVIEW / ❌ FAIL
|
|
60
|
+
CSS ✅ PASS / ⚠️ REVIEW / ❌ FAIL
|
|
61
|
+
JS ✅ PASS / ⚠️ REVIEW / ❌ FAIL
|
|
62
|
+
LIQUID/DOM ✅ PASS / ⚠️ REVIEW / ❌ FAIL
|
|
63
|
+
FONTS/TEXT ✅ PASS / ⚠️ REVIEW / ❌ FAIL
|
|
64
|
+
|
|
65
|
+
ISSUES:
|
|
66
|
+
❌ [file:line] description of issue → fix applied / needs your decision
|
|
67
|
+
|
|
68
|
+
AUTO-FIXED: [list]
|
|
69
|
+
NEEDS YOUR DECISION: [list]
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Auto-fix unambiguous issues directly in the code (e.g., missing `loading`/dimensions on images when values are obvious, switching non-critical images to lazy, adding `defer` to a clearly section-scoped script tag). Flag anything that changes visual design, asset choices, or loading strategy intent.
|