liquid-theme-standards은(는) 무엇을 하나요?
Shopify Liquid 테마를 위한 CSS, JavaScript 및 HTML 코딩 표준입니다. 스타일시트 태그 내 BEM 네이밍, 디자인 토큰, CSS 사용자 정의 속성, 테마용 웹 컴포넌트, 방어적 CSS 및 점진적 향상을 다룹니다. .liquid 파일이나 테마 에셋 파일에서 CSS/JS/HTML을 작성할 때 사용하세요.
Shopify Liquid 테마를 위한 CSS, JavaScript 및 HTML 코딩 표준입니다. 스타일시트 태그 내 BEM 네이밍, 디자인 토큰, CSS 사용자 정의 속성, 테마용 웹 컴포넌트, 방어적 CSS 및 점진적 향상을 다룹니다. .liquid 파일이나 테마 에셋 파일에서 CSS/JS/HTML을 작성할 때 사용하세요.
이 스킬은 Shopify Liquid 테마 개발 시 일관된 CSS, JavaScript 및 HTML 코딩 표준을 제공합니다. 개발자는 BEM(Block Element Modifier) 네이밍 규칙, 디자인 토큰, CSS 사용자 정의 속성, Web Components, 방어적 CSS, 점진적 향상 등 모던 웹 개발 모범 사례를 .liquid 파일 및 테마 에셋 파일 내에서 적용할 수 있습니다. Shopify 테마 개발자, 프론트엔드 엔지니어, Web Component에 관심 있는 디자이너에게 유용하며, Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 지원됩니다. 이 스킬은 구조적 가이드라인을 제시하여 유지보수성과 확장성을 높이고, 테마 전반의 일관된 스타일과 성능 최적화를 돕습니다.
npx skills add https://github.com/benjaminsehl/liquid-skills/tree/main/skills/liquid-theme-standardsShopify Liquid 테마를 위한 CSS, JavaScript 및 HTML 코딩 표준입니다. 스타일시트 태그 내 BEM 네이밍, 디자인 토큰, CSS 사용자 정의 속성, 테마용 웹 컴포넌트, 방어적 CSS 및 점진적 향상을 다룹니다. .liquid 파일이나 테마 에셋 파일에서 CSS/JS/HTML을 작성할 때 사용하세요.
This repo contains 2 individual skills — each has its own dedicated page.
Implement WCAG 2.2 accessibility patterns in Shopify Liquid themes. Covers e-commerce-specific components including product cards, carousels, cart drawers, price display, forms, filters, and modals. Use when building accessible theme components, fixing accessibility issues, or reviewing ARIA patterns in .liquid files.
Generate Shopify Liquid theme code (sections, blocks, snippets) with correct schema JSON, LiquidDoc headers, translation keys, and CSS/JS patterns. Use when creating or editing .liquid files for Shopify themes, working with schema, doc, stylesheet, javascript tags, or Shopify Liquid objects/filters/tags.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".