Does this work with standard Polaris React?

While based on Polaris principles, these specific templates are optimized for Polaris Web Components, utilizing custom tags like , , and for streamlined development.

Which page types can I create with this skill?

The skill includes templates for common Shopify app views such as Index/List pages (for products or orders), Settings pages, Dashboards, and Resource Management UIs.

How do I trigger the Polaris Compositions skill?

The skill is automatically invoked when you describe tasks related to building new pages, creating dashboards, or implementing layout patterns within a Shopify application context.

What is the Polaris Compositions skill?

It is a specialized Claude Code skill that provides standardized UI patterns and page templates based on Shopify's Polaris design system to help developers build consistent app interfaces quickly.

Polaris Compositions

Name: Polaris Compositions
Author: sarojpunde

bysarojpunde

•

E-commerce Solutions

Simplifies Shopify app development with pre-built Polaris composition patterns and production-ready page templates.

The Polaris Compositions skill provides a comprehensive library of standardized layout patterns and complete page templates for building high-quality Shopify applications using Polaris Web Components. It streamlines the creation of essential app views—including data-rich index tables, multi-section settings pages, and performance dashboards—by offering ready-to-use structural patterns like Metrics Cards, Resource Lists, and Setup Guides. This skill helps developers maintain strict adherence to Shopify's design language while significantly accelerating the frontend scaffolding process within Claude Code.

Key Features

01Auto-activation for creating new views or building complex layout structures

02Built-in support for Polaris-specific components like banners, cards, and stacks

03Standardized composition patterns for resource management and data tables

041 GitHub stars

05Pre-configured UI snippets for KPI metrics and status tracking

06Full-page templates for Index, Settings, and Dashboard layouts

Use Cases

01Designing a complex app settings interface with organized sections and save flows

02Building an app homepage dashboard featuring key performance metrics and quick actions

03Scaffolding a product management index page with search, filters, and bulk actions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sarojpunde/shopify-dev-toolkit-claude-plugins polaris-compositions

For use in Claude.ai and ChatGPT

Download Skill