開發客製化 shopify theme 或許可以用一段 base prompt

正在評估使用

或許會讓過程更符合我需求

.github/copilot-instructions.md

# Shopify Theme Custom Project Rules

## Project Context

This is a custom Shopify theme built for a single client.

Goals:
- Reproduce the approved Figma design as closely as possible
- Move fast and keep implementation simple
- Maintain clean, readable code

This is NOT:
- a reusable marketplace theme
- a generic design system
- a merchant-flexible layout builder

The base theme should be treated as runtime infrastructure only.

---

## Implementation Principles

- Prefer direct implementation over abstraction
- Match Figma accurately
- Keep layout mostly fixed
- Avoid building for hypothetical future needs
- It is acceptable to simplify or replace base-theme patterns

Default priority:

1. Figma fidelity  
2. Simplicity  
3. Maintainability  
4. Minimal editor exposure  

---

## Theme Editor Policy

Expose only what client will realistically edit:

✔ headings  
✔ body text  
✔ button label + link  
✔ images  
✔ alt text  
✔ simple toggles  

Avoid:

✘ unnecessary blocks  
✘ layout systems  
✘ spacing sliders  
✘ advanced color systems  
✘ merchant layout flexibility  

---

## Code Style

- Prefer clear and explicit Liquid
- Keep schema minimal
- Avoid nested complexity
- Avoid unnecessary snippets
- Keep sections mostly self-contained
- Avoid JS unless required
- Use stable class naming

---

## Naming Rules (mc- Prefix Usage)

### Core Rule
Use `mc-` only as a frontend namespace.  
Do NOT use `mc-` for file names.

---

### DO NOT use mc- (keep semantic naming)

**Section file names**
hero.liquid  
faq-list.liquid  
product-showcase.liquid  

**Snippet file names**
button-primary.liquid  
product-card.liquid  

**Template names**
product.json  
page.about.json  

**Liquid variables**
product_title  
faq_items  

---

### USE mc- (avoid conflicts)

**CSS classes (recommended)**
mc-hero  
mc-hero__title  
mc-faq  
mc-button  

**JS hooks / selectors**
data-mc-tab  
data-mc-modal  
data-mc-drawer  

**JS namespace / events**
window.mcTheme  
mc:cart-open  
mc:variant-change  

**CSS variables**
--mc-color-primary  
--mc-container-width  

**IDs / utilities**
id="mc-modal"  
.mc-hidden  

---

### OPTIONAL

**Asset file names**
theme-custom.css (preferred)  
mc-theme.css (acceptable)

**Body class**
mc-theme (recommended)

---

### Short Rule Summary

File names → NO mc-  
DOM / CSS / JS namespace → USE mc-

---

## Strong Constraints

Do NOT:

- default to Dawn-style flexibility
- design for reuse
- over-engineer
- add settings "just in case"

This is a focused client implementation.

或許會非常神奇

我會在實務上試試看

站長阿川

每週二 YT 直播 Q&A（可 Discord Call-in）
YT：https://www.youtube.com/@codelove_tw
DC：https://discord.gg/fvCF2whZ9D

⭐️ Shopify 接案服務（給品牌）
https://job.turn.tw/shopify-services

⭐️ Shopify 技術教練（給工程師）
https://job.turn.tw/developer-coaching

⭐️ 台灣 Shopify 開發者 LINE 群（非官方）
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA