Loading...
Loading...
Found 34 Skills
Discover the power of Web Components and how to build them with both JavaScript and Dart for reusable, framework-agnostic UI elements.
Use Shopify Polaris Web Components (s-* custom elements) for App Home UI. Use when building App Home surfaces (not embedded apps), designing UI with s-page, s-section, s-stack, s-box, s-button, and other s-* components. Do not use @shopify/polaris React - App Home requires Web Components.
Build checkout and payment experiences using Primer's web components. Use this skill when implementing payment flows, checkout pages, card forms, or integrating Primer SDK into React, Next.js, or vanilla JavaScript applications. Covers component usage, React integration patterns, stable object references, event handling, SSR support, and CSS theming.
Build web components using Custom Elements v1 API with Declarative Shadow DOM, attribute-driven state, handleEvent pattern, and zero DOM selection. Use when creating custom elements, extending built-in HTML elements, or implementing component-based architecture. NO querySelector, NO innerHTML, NO external libraries - pure web platform APIs only.
Create or modify vanilla HTML/CSS/JavaScript (without a framework) using modular ES modules (ESM), vanilla technologies, clean and readable code, ready for production (no transpiling). Useful for lightweight, high-performance pages, dependency-free UI widgets, standard JavaScript refactoring, and rapid prototyping without using frameworks like React, Angular or Vue.
Use Shopify Polaris Web Components (s-* custom elements) for App Home UI. Use when building App Home surfaces (not embedded apps), designing UI with s-page, s-section, s-stack, s-box, s-button, and other s-* components. Do not use @shopify/polaris React - App Home requires Web Components.
Use for custom storefronts requiring direct GraphQL queries/mutations for data fetching and cart operations. Choose this when you need full control over data fetching and rendering your own UI. NOT for Web Components - if the prompt mentions HTML tags like <shopify-store>, <shopify-cart>, use storefront-web-components instead.
Production-ready Tailwind CSS patterns for common website components: responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, and dark mode support. Use when building UI components, creating landing pages, styling forms, implementing navigation, or fixing responsive layouts.
ALWAYS use when working with Angular Elements, web components, custom elements, or packaging Angular components for non-Angular applications.
Learn how to create a Figma plugin using Lit web components, including project setup, component creation, WASM integration, and building the final plugin for use in Figma.
Learn how to create a dynamic HTML table from JSON data using a Lit web component, with examples for fetching data from a URL or using inline JSON, and the ability to make the table editable.
Build custom functionality that merchants can install at defined points in the checkout flow, including product information, shipping, payment, order summary, and Shop Pay. Checkout UI Extensions also supports scaffolding new checkout extensions using Shopify CLI commands.