Frontend Development (packages/assets)

Name: frontend-development
Rating: 88
Author: nhson2612

Admin Embedded App - Uses React + Shopify Polaris

For storefront widgets (customer-facing), see scripttag skill

Quick Reference

Topic	Reference File
i18n, Translation Keys, yarn update-label	references/translations.md
useFetchApi, useCreateApi, useEditApi	references/api-hooks.md
ui-save-bar, Loading States	references/save-bar.md
Product/Collection Picker	references/resource-picker.md
New Page Checklist, Routes, Navigation	references/creating-pages.md

Directory Structure

code

packages/assets/src/
├── components/        # Reusable React components
├── pages/            # Page components with skeleton loading
├── loadables/        # Code-split components (organized in folders)
├── contexts/         # React contexts for state management
├── hooks/            # Custom React hooks (API, state)
├── services/         # API services calling admin endpoints
├── routes/           # Route definitions (routes.js)
└── locale/           # Translations
    ├── input/        # Source translation JSON files
    └── output/       # Generated translated files

Quick Patterns

Translation Usage

javascript

import {useTranslation} from 'react-i18next';

function MyPage() {
  const {t} = useTranslation();
  return <Page title={t('MyPage.title')}>{t('MyPage.subtitle')}</Page>;
}

API Hooks

javascript

// Fetch data
const {data, loading, fetchApi} = useFetchApi({
  url: '/api/customers',
  defaultData: [],
  initLoad: true
});

// Create
const {creating, handleCreate} = useCreateApi({
  url: '/api/customers',
  successMsg: 'Created!',
  successCallback: () => fetchApi()
});

Skeleton Loading

javascript

function PageSkeleton() {
  return (
    <SkeletonPage primaryAction>
      <Layout>
        <Layout.Section>
          <Card>
            <SkeletonBodyText lines={5} />
          </Card>
        </Layout.Section>
      </Layout>
    </SkeletonPage>
  );
}

State Management

•Use React Context for global state
•Use local state for component-specific data

javascript

// contexts/ShopContext.js
const ShopContext = createContext();

export function ShopProvider({ children }) {
  const [shop, setShop] = useState(null);

  return (
    <ShopContext.Provider value={{ shop, setShop }}>
      {children}
    </ShopContext.Provider>
  );
}

export const useShop = () => useContext(ShopContext);

Component Guidelines

•Use .js files only (no .jsx)
•Always create loadable components in organized folders with index.js
•All data-fetching pages must have skeleton loading states

Development Commands

bash

# Start embedded app development
cd packages/assets && npm run watch:embed

# Start standalone development
cd packages/assets && npm run watch:standalone

# Production build
cd packages/assets && npm run production