skills.rest
toilahuongg
toilahuonggCOMMUNITY
Explore all skills by this author →
GitHub

shopify-polaris-viz

Generate accessible Polaris Viz charts for Shopify Apps.

10|2|Updated Nov 11, 2025
Search Tags:#data visualization#charts#react#ui components#shopify#polaris
One-click install
npx skills add https://github.com/toilahuongg/Shopify-Agents-Kit --skill shopify-polaris-viz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shopify-polaris-viz
Source: https://github.com/toilahuongg/Shopify-Agents-Kit/tree/main/.claude/skills/shopify-polaris-viz
Command: npx skills add https://github.com/toilahuongg/Shopify-Agents-Kit --skill shopify-polaris-viz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @shopify/polaris-viz, @shopify/polaris, @shopify/polaris-tokens, and includes references (resource) components.

What problem does it solve?

This Skill helps developers create data visualizations within Shopify Apps that are consistent with the Shopify Admin's look and feel, ensuring a cohesive user experience.

Core Features & Use Cases

  • Accessible Charts: Provides pre-built React components for common chart types like Bar, Line, and Donut charts.
  • Polaris Theming: Automatically applies Shopify's design system themes for visual consistency.
  • Use Case: You need to display sales trends over the last month in your Shopify app's dashboard. Use this Skill to generate a LineChart component that matches the Polaris design.

Quick Start

Use the shopify-polaris-viz skill to create a BarChart with the provided data.

Frequently Asked Questions about shopify-polaris-viz

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

FAQPage Schema
How do I add data visualizations to my Shopify app using React?▼

You can add data visualizations to your Shopify app by generating accessible React chart components, such as BarChart, LineChart, and DonutChart, using the Polaris Viz library to maintain the Shopify Admin aesthetic.

Can I use Polaris Viz charts with the Shopify Polaris design system?▼

Yes, Polaris Viz charts are designed for full integration with @shopify/polaris and @shopify/polaris-tokens, automatically applying Shopify's design system themes to ensure visual consistency across your app.

What types of charts can I generate for a Shopify Admin dashboard?▼

You can generate accessible, themeable BarChart, LineChart, and DonutChart components to display trends and comparisons within your Shopify Admin dashboard.

How do I display sales trends in my Shopify app dashboard?▼

To display sales trends over a specific period in your Shopify app, you can use this Skill to generate a LineChart component that matches the Polaris design system for visual cohesion.

Does the Polaris Viz library require dependencies for Shopify theming?▼

Yes, full theming and component compatibility require integrating with @shopify/polaris and @shopify/polaris-tokens alongside the Polaris Viz library.

Are the charts generated for Shopify apps accessible?▼

Yes, this Skill provides pre-built React components for common chart types that are specifically designed to be accessible while matching the Shopify Admin look and feel.

Related Skills

Explore More Software Engineering Skills→
silvarojasdiegoarturo91silvarojasdiegoarturo91

shopify-polaris-app-home

Create embedded Shopify admin interfaces with Polaris web components.

Community
Intermediate
nesihaver-ILnesihaver-IL

analytics-metrics

Build interactive analytics dashboards and charts in React with Recharts.

Community
Intermediate
sarojpundesarojpunde
4

polaris-fundamentals

Explain Polaris Web Components fundamentals for Shopify app UI development.

Community
Basic
luan-thnhluan-thnh

shopify

Build Shopify apps, extensions, and themes using GraphQL/REST APIs and Liquid templating.

Community
Intermediate