frontend-development

Standardize React and Polaris frontend patterns for embedded Shopify admin apps.

Updated Feb 4, 2026
One-click install
npx skills add https://github.com/ducnm-mimhus/Avada-Simple-Sales-Pop --skill frontend-development-ducnm-mimhus
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/ducnm-mimhus/Avada-Simple-Sales-Pop/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/ducnm-mimhus/Avada-Simple-Sales-Pop --skill frontend-development-ducnm-mimhus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams building admin dashboards often rely on ad-hoc patterns for React components, Polaris UI, i18n, and App Bridge integration, leading to inconsistent UX and duplicated effort.

Core Features & Use Cases

  • Reusable React components and loadables for admin pages using Polaris.
  • Integrated i18n/translation workflow with locale scaffolding and language keys.
  • API hooks (fetch/create/update/delete) and App Bridge helpers for Shopify embedded apps.
  • Use Case: Rapidly assemble customizable admin dashboards with consistent patterns across stores.

Quick Start

Install the project dependencies and start the embedded admin development server to begin using the React/Polaris patterns.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I structure React components for a Shopify Polaris admin app?

Structure React components for a Shopify Polaris admin app using standardized patterns for component organization, loadables, and skeleton loading. This ensures consistent UX across admin pages and reduces duplicated frontend effort.

What is the best way to integrate i18n translations in an embedded Shopify app?

Integrate i18n translations in an embedded Shopify app using a standardized workflow with locale scaffolding and language keys. This enforces consistent translation guidelines across admin dashboard pages.

How do I use Shopify App Bridge with React and Polaris?

Use Shopify App Bridge with React and Polaris through provided App Bridge helpers and API hooks. These patterns standardize fetch, create, update, and delete operations within embedded admin apps.

Can I use this Skill to build admin dashboards for multiple Shopify stores?

Yes, you can rapidly assemble customizable admin dashboards for multiple Shopify stores. The Skill provides reusable React components and Polaris UI patterns to maintain consistency across different store contexts.

Do I need skeleton loading for my Shopify Polaris admin pages?

Skeleton loading is enforced for Shopify Polaris admin pages to standardize loading states. This prevents inconsistent UX during data fetching and provides a uniform user experience across dashboard components.

Why does my Shopify embedded app have inconsistent frontend patterns?

Inconsistent frontend patterns in Shopify embedded apps stem from ad-hoc React components and Polaris UI usage. Standardizing API hooks, i18n workflows, and App Bridge integration eliminates duplicated effort and unifies UX.