trantuananh-17/product-reviews
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
FAQ
Include placeholders like {name} or {points} in the JSON and pass values with t('Key', { name: 'Alex', points: 100 }).
When should I create a Loadable component?
Create a Loadable for any page or component that significantly increases bundle size or is not needed on initial load; organize it in its own folder with index.js.
5 skills
This skill provides React and Polaris patterns for admin frontends, including translations, skeleton loading, and loadable components to accelerate UI
This skill helps you design REST APIs with best practices, validation, and standardized response formats for robust backend endpoints.
This skill helps you optimize Firestore queries, indexing, and batch operations with best practices to improve performance and reliability.
This skill helps you audit security risk, enforce authentication, and prevent IDOR by applying proven patterns for auth, PII protection, and webhooks.
This skill helps you design scalable Node.js and Firebase backends using async/await patterns, Pub/Sub, and background processing for reliable webhooks and
