@zohofinance/commerce 1.0.0 → 1.0.1

package/ts-dist/mocks/init-theme/.claude/skills/.archive/zcommerce-theme-builder.20260528/SKILL.md

@@ -0,0 +1,605 @@
+# ZCommerce Theme Builder
+
+Complete workflow for building, editing, and QA-ing Liquid themes in this theme directory.
+
+> **Read CLAUDE.md first** for project context, folder structure, and global conventions.
+> **Read reference sub-skills** in this directory for detailed lookup tables (design-tokens.md, section-anatomy.md, page-json-contract.md, qa-accessibility.md).
+
+---
+
+## Table of Contents
+1. [Conventions (Always-On Rules)](#1-conventions)
+2. [Commands](#2-commands)
+3. [Workflows (Playbook)](#3-workflows)
+4. [Build-and-Verify Pipeline](#4-build-and-verify-pipeline)
+
+---
+
+# 1. Conventions
+
+These rules apply to ALL theme work. Internalize them before writing any code.
+
+## 1.1 Custom Schema Syntax (NOT Shopify)
+
+Every schema field uses custom default formats. NEVER use plain-string Shopify defaults.
+
+| Type | Default format | Liquid access |
+|------|---------------|---------------|
+| text | `"t:sections.<n>.settings.<id>.default"` | `{{ section.settings.<id> }}` |
+| url | `{ "display_name": "t:...", "handle": "/path" }` | `.handle`, `.display_name` |
+| image_picker | `{ "url": "file.webp", "enable_customisation": true }` | `.url` |
+| media_picker | `{ "url": "video.mp4", "is_video": true }` | `.url`, `.is_video` |
+| select | `{ "display_name": "t:...", "value": "opt" }` | `.value`, `.display_name` |
+| menu | `{ "display_name": "t:...", "handle": "" }` | `.handle`, `.display_name` |
+| checkbox | `true` / `false` | `{{ section.settings.<id> }}` |
+| range | number (e.g. `40`) | `{{ section.settings.<id> }}` |
+| color | hex string (e.g. `"#000000"`) | `{{ section.settings.<id> }}` |
+| header | no id, `"content": "t:..."` | UI divider only |
+
+All labels: `"t:sections.<section_name>.settings.<field_id>.label"`
+Select options: `"t:sections.<section_name>.settings.<field_id>.option__<n>.label"`
+Block settings: `"t:sections.<section_name>.blocks.<block_type>.settings.<field_id>.label"`
+Video fields must use `media_picker` (not `image_picker`) with default:
+`{ "url": "video.mp4", "is_video": true }`
+
+## 1.2 Liquid Rules
+
+- CUSTOM system — not standard Shopify
+- `{% render 'snippet' %}` only — NEVER `{% include %}`
+- Escape output: `{{ value | escape }}`
+- Assets: `{{ 'file.js' | asset_url }}`
+- Internal links: `{{ pageinfo.origin }}/path`
+- All assigns in one `{% liquid %}` block at top
+- Every loop must have empty state (`{% else %}`)
+- Every text/heading: check `!= blank` before rendering
+
+### Global Objects
+```liquid
+{{ organization.organizationName }}    {{ organization.logo.url }}
+{{ organization.email }}               {{ organization.phone }}
+{{ pageinfo.origin }}                {{ default_menu.menuItems }}
+{{ cart.item_count }}                  {{ organization.social_media_list }}
+```
+
+## 1.3 CSS Rules
+
+- Tailwind utility classes for layout, spacing, typography
+- CSS variables for ALL colors: `var(--color-primary)`, `var(--color-heading)`, etc.
+- NEVER hardcode hex colors inline
+- Container: `max-w-container-theme mx-auto`
+- Section padding: `style="padding-left: var(--section-padding-x, 16px); padding-right: var(--section-padding-x, 16px);"`
+- Responsive: `hidden md:block` (desktop), `md:hidden` (mobile only)
+- Dynamic CSS via `{% style %}` scoped to `#section-{{ section.id }}`
+
+### Available CSS Variables
+```
+--color-primary        --color-on-primary      --color-heading
+--color-background     --color-border          --color-header-bg
+--section-padding-x
+```
+
+## 1.4 JavaScript Rules
+
+- Vanilla JS only, Web Components extending HTMLElement
+- Custom events for cross-component communication
+- `data-` attributes for JS hooks, not CSS classes
+- Always `defer` scripts
+- Fetch with proper error handling
+
+## 1.5 i18n Rules
+
+- ALL user-facing strings use `t:` translation keys
+- Files: `i18n/en.json` (content), `i18n/en.schema.json` (schema labels)
+- Key pattern: `t:sections.{section_name}.settings.{field_id}.label`
+- `display_name` in url/select/menu defaults MUST be a `t:` key
+- NEVER hardcode English strings in schema
+
+## 1.6 Figma Variable Resolution
+
+When using Figma MCP or reading Figma output:
+1. For every `var(--name, fallback)`: strip `--`, split on `/`, traverse `figma-variables.json`
+2. If path has `$value` → use it (theme-mode-specific)
+3. If not found → use fallback
+4. Map resolved value to Tailwind/CSS using design-tokens reference
+
+## 1.7 Cross-Theme Reference Rules
+
+When building a new section:
+- **Logic, schema, Liquid patterns** → copy from existing sections in this theme
+- **HTML structure and visual design** → follow the new theme's Figma
+- NEVER discard working Liquid logic for simpler placeholder code
+- If no equivalent section exists → use closest match, build schema from scratch
+
+---
+
+# 2. Commands
+
+## create-theme
+
+Scaffold a new theme from this theme's existing files.
+
+**Usage:** `create-theme <theme_name>`
+
+1. **Validate** — if `` exists, STOP
+2. **Find reference** — use this theme's current layouts, snippets, settings, and config as the template
+3. **Create structure:**
+   ```
+   
+     assets/
+     i18n/en.json, en.schema.json    <- copy from ref, keep structure, clear values
+     layouts/theme.liquid, accounts.liquid, sitemap.liquid  <- copy as-is
+     sections/                        <- empty
+     snippets/                        <- copy all from ref (shared infrastructure)
+     pages/404.json, blog.json, cart.json, categories.json, checkout.json,
+           collection.json, index.json, orders.json, page.json, payment.json,
+           product.json, sitemap.json
+     settings/schema.json, theme.json <- copy as-is
+     favicon.ico, package.json, postcss.config.js, project.json, tailwind.config.js
+   ```
+4. Update `name` field in package.json and project.json
+5. Report: remind user to get `figma-variables.json` from designer
+
+## build-section
+
+Build ONE section at a time. Never build multiple in a single run.
+Includes integrated design verification — matches Figma on the first pass.
+
+**Usage:** `build-section <theme_name> <section_name>`
+
+### Pre-flight
+- Verify `figma-variables.json` exists
+- Identify a reference section from this theme's `sections/` folder
+- Confirm Figma frame is available (request BOTH desktop and mobile)
+- Read `.cursor/rules/design-spec-extraction.mdc`
+
+### Stages
+1. **Read Reference** — extract schema, assigns, conditionals, loops, renders, JS components, style blocks
+2. **Extract Detailed Design Spec** — THIS IS THE MOST CRITICAL STAGE. Follow the Design Spec Extraction Protocol. Resolve ALL var() from figma-variables.json. Extract EXACT px/hex values for EVERY visible element (text, containers, images, buttons, cards). Produce a Design Spec Table — this is the BUILD CONTRACT
+3. **Map Tokens** — convert all Figma values to Tailwind classes using figma-variables.json + design-tokens reference. Update spec table's Tailwind/CSS column
+4. **Build HTML** — Liquid markup with Tailwind classes + CSS vars. **Use the Design Spec Table as blueprint — every row must appear in code**. Mobile-first responsive: base = mobile, `md:` = desktop
+5. **Add Schema** — using custom syntax. Copy fields from reference, add new fields from Figma. Set padding_top/padding_bottom defaults from Figma spec (not always 40)
+6. **Add Style/Script** — `{% style %}` for dynamic CSS only, script tags if JS component needed
+7. **Self-Compare** — For EVERY row in the Design Spec Table, verify the generated code matches exactly. Fix any mismatches before saving. This eliminates the need for separate compare→fix cycles
+8. **Code QA** — verify: every setting has schema field, no raw hex, no raw px fonts, loops have empty state, images have all attributes, all labels use `t:` keys, responsive classes for all mobile overrides
+
+### Section File Anatomy (required order)
+```liquid
+{{-- 1. SCRIPT TAGS --}}
+<script src="{{ 'component.js' | asset_url }}" defer></script>
+
+{{-- 2. STYLE BLOCK --}}
+{% style %}
+  #section-{{ section.id }} {
+    padding-top: {{ section.settings.padding_top }}px;
+    padding-bottom: {{ section.settings.padding_bottom }}px;
+  }
+{% endstyle %}
+
+{{-- 3. LIQUID ASSIGNS --}}
+{% liquid
+  assign heading = section.settings.heading
+  assign show_section = section.settings.show_section
+%}
+
+{{-- 4. CONDITIONAL VISIBILITY --}}
+{% if show_section %}
+
+{{-- 5. SECTION WRAPPER --}}
+<section id="section-{{ section.id }}" class="section-name w-full">
+  <div class="max-w-container-theme mx-auto"
+       style="padding-left: var(--section-padding-x, 16px); padding-right: var(--section-padding-x, 16px);">
+    {{-- 6. CONTENT --}}
+  </div>
+</section>
+
+{% endif %}
+
+{{-- 7. SCHEMA — always last --}}
+{% schema %}
+{ ... }
+{% endschema %}
+```
+
+### Output
+Save to `sections/<section_name>.liquid`
+Report: what was preserved from reference, what was new from Figma, any unmapped tokens.
+
+## build-page-sections
+
+Batch-build all sections for a page from an audit plan.
+
+**Usage:** `build-page-sections <theme_name> <page_name>`
+
+1. Read the audit plan (from a previous `audit-page` run or user-provided list)
+2. For each section in the plan, run the `build-section` workflow
+3. Build in page order (top to bottom)
+4. Report consolidated results
+
+## audit-page
+
+Plan page sections from Figma before building. No code output.
+
+**Usage:** `audit-page <theme_name> <page_name>`
+
+1. Read the Figma page frame
+2. Identify each distinct section (top to bottom)
+3. For each section, determine: name, reference section (from this theme's `sections/`), new elements not in reference
+4. Output an audit plan table:
+   ```
+   | # | Section Name | Reference | New Elements | Notes |
+   ```
+5. Ask user to approve/edit before building
+
+## assemble-page
+
+Generate page JSON after all sections are built and QA'd.
+
+**Usage:** `assemble-page <theme_name> <page_name>`
+
+1. List all sections built for this page
+2. Read each section's schema to get settings, blocks, block types
+3. Generate page JSON following the page-json-contract (see reference skill)
+4. Save to `pages/<page_name>.json`
+
+## add-field
+
+Add a new setting to an existing section.
+
+**Usage:** `add-field <theme_name> <section_name>`
+
+1. **Determine spec** — type, ID, level (section/block), label key, default, placement
+2. **Update schema** — add field using custom syntax
+3. **Add Liquid assign** — in the `{% liquid %}` block
+4. **Wire in HTML** — add rendering where needed
+5. **Update page JSON** — add default value in correct format
+6. **Update i18n** — add translation keys
+
+## add-theme-setting
+
+Add theme-level customizer settings (global settings like product card style, transitions, etc.).
+
+**Usage:** `add-theme-setting <theme_name>`
+
+Updates: `settings/schema.json`, every preset in `theme.json`, `i18n/en.schema.json`
+
+## fix-section
+
+Fix bugs with minimal blast radius.
+
+**Usage:** `fix-section <theme_name> <section_name>`
+
+1. Describe what's broken vs expected
+2. Diagnose root cause
+3. Fix with minimal changes — don't refactor unrelated code
+4. Run self-QA after fix
+
+## redesign-section
+
+Replace HTML/CSS design while preserving all Liquid logic.
+
+**Usage:** `redesign-section <theme_name> <section_name>`
+
+1. Extract all logic from existing section (schema, assigns, loops, conditions, renders)
+2. Read new Figma frame for design
+3. Rebuild HTML/CSS with new design
+4. Re-wire all preserved logic into new structure
+5. Self-QA
+
+## compare-section
+
+Compare built section against Figma design. Desktop + mobile.
+
+**Usage:**
+```
+compare-section <theme_name> <section_name>                     → code compare (default)
+compare-section <theme_name> <section_name> --visual            → visual browser compare
+compare-section <theme_name> <section_name> --visual --page product --store-url <url>
+```
+
+### Code Compare (default)
+1. Fetch both Figma frames (parallel if possible)
+2. Compare layout, spacing, typography, colors against the built section
+3. Output consolidated mismatch report tagged: desktop-only, mobile-only, or both
+4. User chooses: ALL / CRITICAL ONLY / specific issue numbers
+
+### Visual Compare (`--visual`)
+Delegates to the `visual-compare` subagent (`.cursor/agents/visual-compare.md`):
+1. Ensures dev server is running (`yarn run dev --storeUrl=<url>`)
+2. Uses Claude in Chrome to navigate to the page and screenshot the rendered section (desktop 1440px + mobile 375px)
+3. Fetches Figma screenshot via `get_screenshot`
+4. Visually compares both screenshots — catches CSS cascade bugs, z-index issues, overflow clipping, and rendering quirks that code compare misses
+5. Checks browser console for JS/Liquid errors
+6. Produces a visual diff report with CRITICAL / MINOR / SUGGESTION / MOBILE-SPECIFIC categories
+
+**Requires:** Claude in Chrome + Figma MCP + dev server (auto-started if not running)
+
+### Recommended: run both modes for final QA
+Code compare finds precise CSS value mismatches; visual compare catches what actually looks wrong in the browser.
+
+## refactor-section
+
+Full structural refactoring of a section.
+
+**Usage:** `refactor-section <theme_name> <section_name>`
+
+## extract-tokens
+
+Validate that `figma-variables.json` exists and is readable.
+
+**Usage:** `extract-tokens <theme_name>`
+
+## sync-theme-settings
+
+Sync settings from figma-variables.json into theme.json.
+
+**Usage:** `sync-theme-settings <theme_name>`
+
+## impact
+
+Find all sections that use a given snippet.
+
+**Usage:** `impact <theme_name> <snippet_name>`
+
+Search all sections for `{% render '<snippet_name>' %}` references.
+
+---
+
+## QA Commands
+
+### qa-section
+Audit a completed section for: schema validity, Liquid correctness, token usage, image attributes, accessibility, performance.
+
+### qa-sections
+Batch QA all sections in a theme.
+
+### qa-theme
+Full theme QA — runs all validation commands and produces consolidated report:
+- qa-sections (all sections)
+- validate-theme-settings
+- qa-layout (all layout files)
+- validate-section-group (per group)
+- validate-page (per page)
+- qa-i18n (translation coverage)
+
+### qa-layout
+Audit layout files for structure, assets, group references, snippet usage, parity.
+
+### qa-i18n
+Audit translation key coverage: missing keys, orphan keys, hardcoded English.
+
+### validate-page
+Verify page JSON: section types match files, block types match schemas, order arrays match keys.
+
+### validate-section-group
+Validate group JSON files (header-group.json, footer-group.json).
+
+### validate-theme-settings
+Cross-check: settings/schema.json <-> settings/theme.json <-> i18n/en.schema.json <-> Liquid consumers.
+
+---
+
+# 3. Workflows (Playbook)
+
+## Flow 0 — Full Autopilot (new theme from Figma) ⭐ RECOMMENDED
+1. `build-theme <name> <figma_file_key>` — orchestrates everything: scaffold, extract tokens, audit pages, build all sections **with design spec verification**, assemble pages, QA
+2. Review the consolidated audit plan (only manual step)
+3. Review design accuracy summary — check which sections have <100% spec match
+4. `compare-section <name> <section>` — **only for sections with unresolved items** (most sections should pass)
+5. `fix-section <name> <section>` — fix any remaining mismatches
+6. `qa-theme <name>` — final QA after any manual fixes
+
+**Key improvement:** Build now includes self-compare against a Design Spec Table, eliminating most compare→fix iterations.
+
+## Flow 1 — Step-by-Step (manual control)
+1. `create-theme` -> 2. `extract-tokens` -> 3. `audit-page` -> 4. `build-section` (one at a time) -> 5. `qa-section` -> 6. `compare-section` -> 7. `fix-section` -> 8. `assemble-page` -> 9. `qa-theme`
+
+## Flow 2 — Redesign Existing Section
+1. `compare-section` (with new Figma URLs) -> 2. `redesign-section` -> 3. `qa-section` -> 4. `compare-section` again
+
+## Flow 3 — Bug Fix
+1. `compare-section` (if visual bug) -> 2. `fix-section` -> 3. `qa-section`
+
+## Flow 4 — New Theme Setting
+1. `add-theme-setting` -> 2. Wire in layout/CSS/JS -> 3. `sync-theme-settings` if Figma-driven
+
+## Flow 5 — Pre-Release QA
+Run `qa-theme` or individually: `qa-sections` -> `validate-theme-settings` -> `qa-layout` -> `validate-section-group` -> `validate-page` -> `qa-i18n`
+
+## Quality Gate (every section before ship)
+```
+qa-section       -> code correctness
+compare-section  -> design accuracy (use both Figma URLs)
+fix-section      -> fix approved issues
+```
+
+---
+
+# 4. Build-and-Verify Pipeline
+
+End-to-end automated loop: Figma design → build sections → run dev server → browser test → visual compare → fix → repeat.
+
+## Tools used
+| Step | Tool |
+|------|------|
+| Extract design | Figma MCP (`get_design_context`, `get_screenshot`) |
+| Build/fix sections | `Read`, `Write`, `Edit` |
+| Run dev server | `Bash` (background process) |
+| Browser testing | Claude in Chrome (`navigate`, `get_page_text`, `read_console_messages`) |
+| Visual screenshot | Claude in Chrome (`upload_image`) + Figma MCP (`get_screenshot`) |
+| Loop control | Self-directed iteration until pass |
+
+## Usage
+```
+build-and-verify <theme_name> <figma_file_url_or_key>
+```
+Optionally scope to a single page: `build-and-verify <theme_name> <figma_url> --page <page_name>`
+
+---
+
+## Stage 1 — Design Extraction
+1. Call `get_design_context` on the Figma file/frame
+2. Call `get_variable_defs` to get the full variable set — save as `figma-variables.json` if not already present
+3. Call `get_screenshot` on each major page frame — store references for later comparison
+4. Run `audit-page` flow per page: identify sections top-to-bottom, find reference sections, note new elements
+
+Output: audit plan table (user approves before proceeding)
+
+---
+
+## Stage 2 — Build
+For each section in the approved audit plan, run the `build-section` workflow (see Section 2).
+Save all sections to `sections/`.
+Assemble page JSONs via `assemble-page`.
+
+---
+
+## Stage 3 — Start Dev Server
+
+**Run in Antigravity terminal:**
+```bash
+cd <theme_name>
+yarn run dev --storeUrl=<your store url>
+```
+Wait for "ready" or "compiled" output. Preview opens in Antigravity's browser panel or at the storeUrl.
+
+---
+
+## Stage 4 — Browser Verification Loop
+
+Two modes depending on available tools:
+
+### Mode A — Claude in Chrome (preferred when available)
+- Navigate to storefront, take screenshots, read console errors automatically
+
+### Mode B — Antigravity + Cowork (fallback)
+- **Cowork (me):** Pull Figma screenshots via `get_screenshot`, audit section code against design, produce mismatch reports and fixes
+- **Antigravity (you):** Run dev server, preview in browser panel, describe issues or paste/upload screenshots
+- **Loop:** I fix code → you refresh Antigravity preview → feedback → repeat
+
+### 4a. Design-to-Code Comparison (Cowork)
+For each section, I:
+1. Call `get_screenshot` on the Figma frame for that section
+2. Call `get_design_context` for exact values (spacing, font sizes, colors)
+3. Read the section `.liquid` file
+4. Compare and produce a mismatch report
+
+### 4b. Live Preview Check (Antigravity)
+- Open Antigravity browser panel at the storeUrl
+- Check for: Liquid render errors, layout breaks, missing images, console JS errors
+- Describe issues back to me or share a screenshot (paste or upload) for any visual discrepancy
+
+### 4c. Console Error Resolution
+If Antigravity terminal or browser console shows errors:
+- JS errors → I read the section's asset JS, diagnose, fix
+- Network 404s → check asset_url references, verify file exists in assets/
+- Liquid errors → I check the section file for undefined variables or syntax issues
+
+### 4d. Loop Exit Condition
+A page passes when:
+- [ ] No Liquid render errors
+- [ ] No critical JS console errors
+- [ ] All sections visually match Figma within acceptable tolerance
+- [ ] Mobile viewport (375px) also checked
+
+### 4b. Visual Comparison
+For each section on the page:
+1. Get Figma screenshot for that section frame
+2. Compare against the browser screenshot:
+   - Layout structure (columns, rows, alignment)
+   - Spacing and padding
+   - Typography (size hierarchy, weight, line height)
+   - Colors (mapped correctly to CSS variables)
+   - Images (correct placeholders, aspect ratios)
+   - Responsive breakpoints (check mobile viewport too)
+3. Produce a **mismatch report** for this section:
+   ```
+   SECTION: <section_name>
+   ━━━━━━━━━━━━━━━━━━━━━━━
+   ✅ MATCH: layout structure, color tokens
+   ❌ MISMATCH:
+     [1] Heading font size: Figma=48px, Built=36px — CRITICAL
+     [2] Card gap: Figma=24px, Built=16px — MINOR
+     [3] CTA button radius: Figma=rounded-full, Built=rounded-md — MINOR
+   ```
+
+### 4c. Fix Mismatches
+- Fix CRITICAL issues immediately (wrong layout, broken rendering, missing sections)
+- Fix MINOR issues in batches
+- Apply minimal changes — only touch the CSS/Tailwind classes involved, never refactor schema
+- After fixes, reload the browser page and re-screenshot
+
+### 4d. Console Error Resolution
+If console errors are present:
+- JS errors: read the section's asset JS file, diagnose, fix
+- Network errors: check asset_url references, verify file exists in assets/
+- Liquid errors: check section file for syntax issues, undefined variables
+
+### 4e. Loop Exit Condition
+A page passes when:
+- [ ] No Liquid render errors on page
+- [ ] No critical JS console errors
+- [ ] All sections visually match Figma within acceptable tolerance
+- [ ] Mobile viewport checked and responsive breakpoints correct
+
+---
+
+## Stage 5 — Self Design Review
+After all pages pass the loop, run a final design review:
+
+1. **Consistency check** — across all pages:
+   - Same heading hierarchy used consistently
+   - Same button styles across CTAs
+   - Spacing rhythm consistent between sections
+   - Color token usage consistent (no raw hex crept in)
+
+2. **Cross-page navigation** — use Chrome to navigate between pages, check:
+   - Header/footer renders correctly on all pages
+   - No layout shifts between pages
+   - Active states in nav correct per page
+
+3. **Accessibility pass** — using qa-accessibility checklist (see reference skill):
+   - All images have alt text
+   - Focus indicators visible
+   - Heading levels logical
+   - Buttons/links have labels
+
+4. **Final report:**
+   ```
+   THEME: <theme_name> — DESIGN REVIEW COMPLETE
+   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   Pages reviewed: [list]
+   Sections built: [count]
+   ✅ PASSED: [list of sections]
+   ⚠️  NEEDS ATTENTION: [list with issue descriptions]
+   ❌ BLOCKED: [list with blockers]
+
+   NEXT: Fix ⚠️ items → re-run build-and-verify for affected sections
+   ```
+
+---
+
+## Stage 6 — Iteration
+For any remaining issues from Stage 5:
+- Run `fix-section` for visual mismatches
+- Re-run Stage 4 loop for the affected section only
+- Re-run Stage 5 design review for affected pages
+
+---
+
+## Notes
+- **Dev server must stay running** during the entire loop. If it crashes, restart before re-checking.
+- **Always compare both desktop and mobile** — navigate Chrome at 1440px width for desktop, 375px for mobile.
+- **Figma screenshots are the source of truth** — if there's ambiguity, the Figma frame wins.
+- **Don't over-fix** — if a value is within 1-2px/Tailwind-unit of the design, it's acceptable. Only flag true visual deviations.
+
+---
+
+# 5. Parallel Agent Strategy
+
+When building multiple sections or running QA across a theme, use subagents for parallel work:
+- **Building:** spawn one agent per section (each follows the build-section workflow)
+- **QA:** spawn agents to QA sections in parallel
+- **Compare:** fetch desktop + mobile Figma in parallel (same agent, concurrent tool calls)
+- **Build-and-verify:** spawn one agent per page to run the visual verification loop in parallel
+
+Always have each agent read this SKILL.md before starting its work.