skills.rest
dan10002ht
dan10002htCOMMUNITY
Explore all skills by this author →
GitHub

dev-admin

Implements Shopify embedded admin app code using Remix routes, Polaris components, and App Bridge 4.x.

Updated Mar 14, 2026
Search Tags:#typescript#graphql#shopify#remix#polaris#app bridge#admin app
One-click install
npx skills add https://github.com/dan10002ht/shopify-template --skill dev-admin-dan10002ht
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-admin
Source: https://github.com/dan10002ht/shopify-template/tree/main/.claude/skills/dev-admin
Command: npx skills add https://github.com/dan10002ht/shopify-template --skill dev-admin-dan10002ht

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a Shopify embedded admin app requires consistent conventions across Remix loaders/actions, Polaris UI, App Bridge navigation, and Shopify Admin GraphQL API calls. This Skill enforces those conventions automatically so generated code follows server-first data fetching, strict TypeScript, and Shopify design system patterns instead of ad-hoc implementations. ## Core Features & Use Cases - Route & Code Conventions: Enforces app. prefixed Remix routes, loader/action patterns with authenticate.admin(), Zod form validation, and mandatory error boundaries. - Ready-Made Patterns: Provides nine reference patterns including GraphQL queries, resource pickers, toasts, cursor-based pagination, and bulk actions via IndexTable. - Use Case: When asked to build a product list page, the Skill generates a route with an authenticated loader querying the Shopify Admin GraphQL API, a Polaris IndexTable with pagination, and a proper ErrorBoundary. ## Quick Start Ask the AI to implement an admin feature such as a settings page or product list using the dev-admin conventions for Remix, Polaris, and App Bridge.

Frequently Asked Questions about dev-admin

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

FAQPage Schema
How do I fetch Shopify data in a Remix loader?▼

Call authenticate.admin(request) at the start of the loader, then use admin.graphql() with a typed query and variables. Return the parsed response with json() so the route component can consume it via useLoaderData.

How do I validate form data in a Remix action?▼

Parse request.formData() and validate it with a Zod schema using safeParse. On failure return field errors with status 422; on success perform the mutation and return the created resource as JSON.

Can I use custom CSS or client-side fetch in a Shopify admin app?▼

No. The conventions require Polaris components only for admin UI and forbid client-side fetch for admin API calls. All data fetching belongs in loaders and mutations in actions, with navigation handled through App Bridge.

How do I implement cursor-based pagination with Shopify GraphQL?▼

Request pageInfo with hasNextPage and endCursor in the GraphQL query, then use the Polaris Pagination component. Update search params with after or before cursors so the loader refetches the correct page.

Why does my embedded app navigation break when using window.location?▼

Embedded Shopify apps run inside an iframe, so browser navigation APIs break the host frame. Use App Bridge 4.x navigation and the useAppBridge hook for redirects, modals, toasts, and resource pickers instead.

Related Skills

Explore More Software Engineering Skills→
artofrawrartofrawr
1

shopify-apps

Scaffold Remix-based Shopify apps with Admin API and checkout extensions.

Community
Advanced
aroidoaroido

React Testing with Vitest and RTL

Create unit and integration tests for React components with Vitest and React Testing Library.

Official
Intermediate
jjmendezrodriguezjjmendezrodriguez

code-errors

Convert TypeScript/React/Supabase failures into typed AppError-based error handling.

Community
Intermediate
silvarojasdiegoarturo91silvarojasdiegoarturo91

shopify-polaris-app-home

Create embedded Shopify admin interfaces with Polaris web components.

Community
Intermediate