# shopify-polaris-app-home

Builds embedded Shopify admin user interfaces using Polaris web components. It searches component docs and validates code via CLI scripts before returning snippets.

- skill · `type=skill` · Codex, ChatGPT · 1 install · ★ 7604
- Author: Shopify · official OpenAI repository
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/openai/plugins/tree/HEAD/plugins/shopify/skills/shopify-polaris-app-home/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/shopify-polaris-app-home

## What it does

This skill guides Codex when building primary embedded interfaces for the Shopify admin. It focuses on modern Polaris web components such as `s-page`, `s-section`, `s-table`, and form controls. Whenever Polaris is mentioned without explicit framework details, the assistant targets this App Home specification.

The workflow enforces automated verification through the `bash` tool. Codex first searches reference material using `scripts/search_docs.mjs`, drafts the UI markup, and tests it with `scripts/validate.mjs`. If checks fail, the assistant inspects the error and retries up to three times.

Node.js is mandatory on the host machine. Without terminal execution permissions, validation scripts fail immediately and the agent will refuse to hand over the generated layout.

## Install

### Codex (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill shopify-polaris-app-home -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/shopify-polaris-app-home/SKILL.md` — For all projects use ~/.agents/skills/

### Claude Code

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill shopify-polaris-app-home -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/shopify-polaris-app-home/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/shopify-polaris-app-home/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/shopify-polaris-app-home/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install openai/plugins shopify-polaris-app-home
```

2. **Manually: put the files in place**
- File: `.github/skills/shopify-polaris-app-home/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/openai/plugins --path plugins/shopify/skills/shopify-polaris-app-home
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/shopify-polaris-app-home/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/openai/plugins/tree/HEAD/plugins/shopify/skills/shopify-polaris-app-home/SKILL.md

## When to use it
- Scaffold an embedded Shopify admin homepage using Polaris web components
- Generate settings views with date pickers, switches, and color inputs
- Assemble metric cards, empty states, and resource tables
- Validate UI component properties before pasting into your codebase

## Example prompts
- Build an app settings screen with an email field, toggle switch, and primary save button using Polaris components.
- Create a resource list layout with `s-table`, search inputs, and pagination controls.
- Add an empty state card with an illustration, callout text, and an action modal.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [openai/plugins](https://affpapa.org/en/nevibecode/by/openai/plugins.md) — 528 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md