frontend_skill

Overview

This skill provides practical React + Shopify Polaris patterns for building an embedded admin app. It covers translations, code-splitting with loadable components, skeleton loading states, API hooks (fetch/create/delete), and context-based state. Use it to standardize admin pages and developer workflows for the admin frontend.

How this skill works

The skill inspects common admin needs and recommends component structure, translation workflows, and API hook usage. It enforces code-splitting by organizing loadable components in folders, requires skeleton pages for all data-fetching routes, and promotes lightweight contexts for global state. It also outlines translation key formats and commands to update localized files.

When to use it

• Creating or updating admin pages that use Shopify Polaris UI
• Implementing translations and multi-locale support
• Adding code-splitting for large pages with Loadable components
• Building data-driven pages that require skeleton loading states
• Using standardized API hooks for fetch/create/delete operations

Best practices

• Keep components in packages/assets/src/components and pages in pages/ with skeleton counterparts
• Place loadable components in dedicated folders with index.js; never create loadables at the top level
• Always provide a SkeletonPage for pages that fetch data to avoid layout shifts
• Define translation keys in locale/input as JSON per feature and run the translation script to generate locales
• Use React Context for lightweight global state and local component state for UI concerns
• Use useFetchApi, useCreateApi, and useDeleteApi for consistent API interactions and success callbacks

Example use cases

• Add a Customer page: create a page component, a Loadable wrapper, and a CustomerPageSkeleton to display while fetching
• Add a new translation: add a JSON file in locale/input, run the translation update command, then use t('Feature.key') in components
• Implement create flow: use useCreateApi with a successCallback to refresh the listing via useFetchApi
• Code-split a heavy report page by moving it to loadables/ReportPage with an index.js loader
• Manage shop-level settings with a ShopContext provider and useShop hook for cross-page access