Profile My skills Saved My plugins Edit profile Submit a skill

← all publishers

display-design-studio

@display-design-studio source repo

28 published skills

  1. ▌
    Shopify Polaris Customer Account Extensions · display-design-studio bundle
    Build custom functionality that merchants can install at defined points on the Order index, Order status, and Profile pages in customer accounts. Customer Account UI Extensions also supports scaffolding new customer account extensions using Shopify CLI commands.
    7 installs
  2. ▌
    Shopify Polaris Checkout Extensions · display-design-studio bundle
    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.
    7 installs
  3. ▌
    Shopify Liquid · display-design-studio bundle
    Liquid is an open-source templating language created by Shopify. It is the backbone of Shopify themes and is used to load dynamic content on storefronts. Keywords: liquid, theme, shopify-theme, liquid-component, liquid-block, liquid-section, liquid-snippet, liquid-schemas, shopify-theme-schemas
    1 install
  4. ▌
    Shopify Pos UI · display-design-studio bundle
    Build retail point-of-sale applications using Shopify's POS UI components. These components provide a consistent and familiar interface for POS applications. POS UI Extensions also supports scaffolding new POS extensions using Shopify CLI commands. Keywords: POS, Retail, smart grid
    7 installs
  5. ▌
    Ucp · display-design-studio bundle
    Use when the user wants to use the UCP CLI to find, compare, buy, or track products from online merchants, or to set up and troubleshoot the local UCP profile required for merchant-scoped operations. Covers global catalog search ("find me X under $Y"), named-merchant transactions ("buy this from Z.com"), order tracking, `ucp profile init`, `ucp doctor`, carts, checkout, orders, and UCP setup/help. Falls back to merchant-hosted handoff when direct in-protocol checkout isn't available.
    1 install
  6. ▌
    Ruby · display-design-studio bundle
    Core Ruby language best-practices skill (Ruby 3.3/4.0) covering syntax and types, collections/Enumerable, blocks/procs/lambdas, OOP and modules, metaprogramming, Bundler/gems, testing (RSpec/Minitest), style/typing tooling (RuboCop, RBS, Steep, ruby-lsp), and performance/debugging. Use when the user mentions Ruby, gem, Bundler, Gemfile, RSpec, Minitest, RuboCop, irb, pry, blocks, procs, lambdas, mixins, or module/metaprogramming patterns that are not specific to a framework. For Ruby on Rails framework-specific questions (Active Record, routing, Action View, etc.), see the sibling `ruby-on-rails` skill instead.
    1 install
  7. ▌
    Nuxt SEO · display-design-studio bundle
    Full @nuxtjs/seo suite best practices for Nuxt 3 — covers @nuxtjs/sitemap, nuxt-og-image, nuxt-schema-org, nuxt-seo-utils, nuxt-link-checker, @nuxtjs/robots, useSeoMeta, useHead, breadcrumbs, canonical URLs, favicon, og:image, structured data, and llms.txt. Use when the user mentions sitemap, og image, schema.org, useSeoMeta, useHead, breadcrumbs, canonical, link checker, robots.txt, noindex, blockAiBots, llms.txt, or any @nuxtjs/seo module in a Nuxt project.
    1 install
  8. ▌
    Ponytail · display-design-studio
    Forces the laziest solution that actually works, simplest, shortest, most minimal. Channels a senior dev who has seen everything: question whether the task needs to exist at all (YAGNI), reach for the standard library before custom code, native platform features before dependencies, one line before fifty. Supports intensity levels: lite, full (default), ultra. Use on ANY coding task: writing, adding, refactoring, fixing, reviewing, or designing code, and choosing libraries or dependencies. Also use whenever the user says "ponytail", "be lazy", "lazy mode", "simplest solution", "minimal solution", "yagni", "do less", or "shortest path", or complains about over-engineering, bloat, boilerplate, or unnecessary dependencies. Do NOT use for non-coding requests (general knowledge, prose, translation, summaries, recipes).
    1 install
  9. ▌
    Gsap Core · display-design-studio
    Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, scroll-driven animation, or a framework-agnostic library. GSAP runs in any framework or vanilla JS; powers Webflow Interactions.
    1 install
  10. ▌
    Gsap Utils · display-design-studio
    Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.
    1 install
  11. ▌
    Nuxt Sanity · display-design-studio bundle
    @nuxtjs/sanity module integration best practices for Nuxt 3 and Nuxt 4 apps connected to Sanity CMS (there is no separate `@sanity/nuxt` package). Covers useSanityQuery, useLazySanityQuery, useSanity, SanityImage, SanityContent (Portable Text), visual editing / live preview with stega, TypeScript typegen, named clients, and Nitro server routes. Also covers the Display Starter architecture with Netlify-cached server routes, preview-switch composables, Netlify CDN caching, and cache tag invalidation. Use when the user mentions @nuxtjs/sanity, nuxt-sanity, useSanityQuery, SanityImage in Nuxt, or is building a Nuxt app that fetches data from Sanity.
    1 install
  12. ▌
    Ruby On Rails · display-design-studio bundle
    Comprehensive Ruby on Rails 8.1 best-practices skill covering MVC, Active Record, routing, views, background jobs, storage, security, testing, performance, Kamal/Thruster deployment, and engines/generators. Use when the user mentions Rails, Ruby on Rails, ActiveRecord, ActiveJob, ActionMailer, ActionCable, Active Storage, rails generate, rails routes, Hotwire, Turbo, Stimulus, Kamal, or asks to build, review, debug, or migrate a Rails application or API. For plain Ruby language questions (blocks, modules, metaprogramming, gems, RSpec/Minitest) not specific to the framework, see the sibling `ruby` skill instead.
    1 install
  13. ▌
    Shopify Admin · display-design-studio bundle
    Write or explain **Admin GraphQL** queries and mutations for apps and integrations that extend the Shopify admin. Use when the user wants to **understand, design, or generate** the operation itself—even before deciding how to run it. Do **not** choose `admin` first for **app or extension config validation** —use **`use-shopify-cli`**. Do **not** choose `admin` first to **execute** Admin GraphQL **now via Shopify CLI** or for CLI setup/troubleshooting on store workflows—use **`use-shopify-cli`** (store auth/execute, handle/SKU/location lookups, inventory changes).
    1 install
  14. ▌
    Sanity Schema Accelerator · display-design-studio bundle
    Fast Sanity schema generation skill for low-token output. Generates ready-to-paste TypeScript schema files for object blocks, pageBuilder arrays, singleton pages, and repeatable pages using defineType and defineField conventions. Use when the user asks to create a Sanity schema, page builder block, singleton (home/about), or repeatable page with localeString/localeSlug. Starter-aware: updates schemaTypes index and singleton structure registration files.
    1 install
  15. ▌
    Shopify Storefront GRAPHQL · display-design-studio bundle
    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.
    1 install
  16. ▌
    Shopify Onboarding Merchant · display-design-studio bundle
    Set up and connect a Shopify store from your AI assistant. Use when the user wants to start selling online, open a first Shopify store, try Shopify before they have an account, or get merchant-facing next steps after a preview store is created, including how to keep it, save it, or make it real. This is for store owners — not developers. Preview-store creation for brand-new merchants belongs here via `shopify store create preview`; explicit CLI troubleshooting and named-store command execution belong in **`use-shopify-cli`**.
    1 install
  17. ▌
    Shopify Polaris Admin Extensions · display-design-studio bundle
    Add custom actions and blocks from your app at contextually relevant spots throughout the Shopify Admin. Admin UI Extensions also supports scaffolding new adminextensions using Shopify CLI commands.
    5 installs
  18. ▌
    Shopify Shopifyql · display-design-studio bundle
    Answer a merchant's **analytics and reporting** questions with **ShopifyQL** — Shopify's query language for aggregated store metrics that the Admin GraphQL API cannot compute. Choose this (not `admin`) whenever the ask is for **numbers, totals, trends, or breakdowns** rather than fetching or mutating individual records: including but not limited to total/gross/net sales and revenue, order counts, average order value, refunds, quantity sold, sessions, conversion rate, and traffic — sliced by product, channel, region, or customer, trended over time, or compared period-over-period. Examples: "total sales last 7 days", "orders by sales channel this month", "top products by revenue", "conversion rate this week", "sales this year vs last year". This topic covers writing the ShopifyQL query; if the merchant wants to run it against their store, execution is handed off to `use-shopify-cli`. Not for general Admin GraphQL record operations — fetching or mutating individual resources (use `admin`).
    1 install
  19. ▌
    Shopify Custom Data · display-design-studio bundle
    MUST be used first when prompts mention Metafields or Metaobjects. Use Metafields and Metaobjects to model and store custom data for your app. Metafields extend built-in Shopify data types like products or customers, Metaobjects are custom data types that can be used to store bespoke data structures. Metafield and Metaobject definitions provide a schema and configuration for values to follow.
    1 install
  20. ▌
    Shopify Development · display-design-studio bundle
    Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid. TRIGGER: "shopify", "shopify app", "checkout extension", "admin extension", "POS extension", "shopify theme", "liquid template", "polaris", "shopify graphql", "shopify webhook", "shopify billing", "app subscription", "metafields", "shopify functions"
    1 install
  21. ▌
    Shopify Payments Apps · display-design-studio bundle
    The Payments Apps API enables payment providers to integrate their payment solutions with Shopify's checkout.
    1 install
  22. ▌
    Shopify Onboarding Dev · display-design-studio bundle
    Get started building on Shopify. Use when a developer asks to build an app, build a theme, create a dev store, set up a partner account, scaffold a project, or get started developing for Shopify. NOT for merchants managing stores.
    1 install
  23. ▌
    Shopify Use Shopify CLI · display-design-studio bundle
    Choose when the user needs **Shopify CLI** to run or fix something now: validate app or extension config on disk (`shopify.app.toml`, `shopify.app.<name>.toml`, `shopify.extension.toml`); run or troubleshoot store workflows (`shopify store auth`, `shopify store execute`); or perform explicit store-scoped reads/writes on a named store domain (for example, show/list/find the first 10 products on my store at `foo.myshopify.com`, or inventory and product changes by handle, SKU, or location name). Emphasize **commands and operational steps**, not only authoring GraphQL. Skip for API-only understanding or codegen with no CLI execution, and skip for brand-new merchant asks to start a Shopify store or try Shopify before they have an account. Examples: validate configuration before deploy; run an existing query via CLI; show the first 10 products on `foo.myshopify.com`; missing `shopify store execute`.
    1 install
  24. ▌
    Shopify App Store Review · display-design-studio bundle
    Run a pre-submission compliance check against your Shopify app's codebase. Reviews App Store requirements and surfaces likely issues before you submit for official review.
    1 install
  25. ▌
    Shopify Polaris App Home · display-design-studio bundle
    Build your app's primary user interface embedded in the Shopify admin. If the prompt just mentions `Polaris` and you can't tell based off of the context what API they meant, assume they meant this API.
    1 install
  26. ▌
    Shopify Partner · display-design-studio bundle
    The Partner API lets you programmatically access data about your Partner Dashboard, including your apps, themes, and affiliate referrals.
    1 install
  27. ▌
    Shopify Customer · display-design-studio bundle
    The Customer Account API allows customers to access their own data including orders, payment methods, and addresses.
    1 install
  28. ▌
    Shopify Functions · display-design-studio bundle
    Shopify Functions allow developers to customize the backend logic that powers parts of Shopify. Available APIs: Discount, Cart and Checkout Validation, Cart Transform, Pickup Point Delivery Option Generator, Delivery Customization, Fulfillment Constraints, Local Pickup Delivery Option Generator, Order Routing Location Rule, Payment Customization
    1 install