skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

shopify-ui-skills

Enforce Shopify's UI design system with light mode, Inter font, and 4px grid.

73|9|Updated Jan 25, 2026
Search Tags:#design system#ui design#shopify#light mode#inter font#4px grid
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill shopify-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shopify-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/shopify
Command: npx skills add https://github.com/ihlamury/design-skills --skill shopify-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Shopify's design aesthetic, ensuring a familiar and high-quality user experience.

Core Features & Use Cases

  • Consistent Design Language: Enforces Shopify's light mode, Inter font, and 4px grid system for pixel-perfect UIs.
  • Accessibility Compliance: Ensures proper text contrast ratios for readability.
  • Use Case: When developing a new e-commerce admin panel, use these guidelines to ensure it feels like a native part of the Shopify ecosystem.

Quick Start

Apply Shopify's UI design system to a new web application, ensuring adherence to their light mode, Inter font, and 4px grid.

Frequently Asked Questions about shopify-ui-skills

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

FAQPage Schema
How do I build a Shopify-style interface for an e-commerce admin panel?▼

To build a Shopify-style interface, apply this design system enforcing light mode, the Inter font, and a 4px grid for pixel-accurate, branded user experiences. It provides specific color palettes, typography scales, spacing rules, and border-radius values for consistency.

What design constraints are required for Shopify UI development?▼

Shopify UI development requires adhering to a strict 4px grid system, using the Inter font, and maintaining a light mode color palette. These constraints ensure pixel-accurate, accessible interfaces with proper text contrast ratios and defined border-radius values.

Does this Shopify UI design system support dark mode?▼

No, this Shopify UI design system does not support dark mode; it specifically enforces a light mode aesthetic. It focuses on delivering a familiar, high-quality user experience by constraining interfaces to defined light color palettes and accessibility compliance.

How do I ensure text contrast ratios are accessible in a Shopify design system?▼

To ensure accessible text contrast ratios in a Shopify design system, follow the enforced light mode color palettes provided in the documentation. These opinionated constraints guarantee readability and accessibility compliance for e-commerce platform interfaces.

What is the best way to achieve pixel-accurate spacing in Shopify web applications?▼

The best way to achieve pixel-accurate spacing in Shopify web applications is by applying a strict 4px grid system. This design skill enforces specific spacing rules and border-radius values, ensuring consistent interface development across the platform.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
TNHoang2708TNHoang2708
1

ck:shopify

Develop and deploy Shopify apps, themes, and UI extensions using Shopify CLI.

Community
Advanced
InchooInchoo
18

ui-component-grids

Configure Magento 2 admin UI component grids with XML, PHP, and JavaScript.

Official
Intermediate
pengelbrechtpengelbrecht
6

frontend-design

Design production-grade frontend interfaces with cohesive typography, theming tokens, and accessibility.

Community
Advanced