skills.rest
dan10002ht
dan10002htCOMMUNITY
Explore all skills by this author →
GitHub

dev-storefront

Implements performance-constrained Preact components and Theme App Extensions for Shopify storefronts.

Updated Mar 14, 2026
Search Tags:#performance#preact#lazy loading#liquid#shopify#storefront#theme app extension
One-click install
npx skills add https://github.com/dan10002ht/shopify-template --skill dev-storefront-dan10002ht
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-storefront
Source: https://github.com/dan10002ht/shopify-template/tree/main/.claude/skills/dev-storefront
Command: npx skills add https://github.com/dan10002ht/shopify-template --skill dev-storefront-dan10002ht

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building customer-facing Shopify storefront UI requires strict performance discipline—heavy frameworks like React or Tailwind can blow the bundle budget and slow merchant stores. This Skill enforces lightweight coding conventions so every storefront component stays within tight size and speed limits. ## Core Features & Use Cases - Preact-First Patterns: Provides component, Signals state management, and lazy-loading patterns using Preact (~3KB) instead of React, with Intersection Observer-based mounting. - Theme App Extension Guidance: Covers Liquid app blocks with schema settings, noscript fallbacks, and scoped CSS using BEM-style prefixes to avoid theme conflicts. - Performance Budget Enforcement: Defines hard limits (JS < 15KB gzipped, CSS < 5KB, CLS = 0) plus banned imports (React, styled-components, axios, lodash) and a Vite build config with terser minification. - Use Case: When adding a promo banner app block to a merchant's product page, use this Skill to generate a lazy-loaded Preact component with scoped CSS, a Liquid block with merchant-customizable settings, and a lightweight sendBeacon tracking call. ## Quick Start Ask the AI to implement a storefront widget or app block for the extensions directory following the dev-storefront conventions.

Frequently Asked Questions about dev-storefront

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a Shopify Theme App Extension with Preact?▼

Create a Liquid app block in the blocks directory with a data attribute mount point and schema settings, then lazy-mount a Preact component via IntersectionObserver from your entry point. Build with Vite using the Preact preset and output to the extension's assets folder.

Preact vs React for Shopify storefront widgets?▼

Preact is required for storefront code because it is about 3KB gzipped versus React's 45KB+, which would break the 15KB JavaScript budget. Use Preact Signals for shared state and preact/hooks for effects instead of React APIs.

Can I use Tailwind or styled-components in Shopify storefront code?▼

No. CSS-in-JS libraries and Tailwind are banned in storefront code due to bundle overhead. Use vanilla CSS or CSS Modules with BEM-style prefixed classes like app-widget__btn to prevent theme conflicts.

How do I lazy load Preact components on a Shopify storefront?▼

Use an IntersectionObserver-based lazyMount helper that watches mount-point elements, dynamically imports the component when it approaches the viewport, and renders it with props parsed from a data-props attribute.

Why can't storefront code call the Shopify Admin API directly?▼

Storefront code must never call the Admin API because it would expose credentials and violate security boundaries. Use the Storefront API or route requests through an App Proxy endpoint like /apps/proxy/api instead.

What is the performance budget for Shopify storefront apps?▼

Targets are under 15KB gzipped JavaScript, under 5KB CSS, first paint under 100ms, and zero layout shift. Hard limits are 30KB JS, 10KB CSS, and CLS below 0.1, verified with bundlesize before each pull request.

Related Skills

Explore More Software Engineering Skills→
MicrockMicrock
322

shopify-app-dev

Guide building custom Shopify apps with CLI, OAuth, and deployment.

Community
Advanced
lv7devlv7dev

shopify

Build Shopify apps, extensions, and themes using GraphQL/REST APIs and Liquid templates.

Community
Advanced
silvarojasdiegoarturo91silvarojasdiegoarturo91

shopify-admin-app

Develop a Shopify admin interface with React, Polaris, and App Bridge.

Community
Intermediate
shalevaminshalevamin

shopify-expert

Build and debug Shopify themes, apps, and Storefront API integrations.

Community
Advanced