liquid skills
by Shopify · Updated
Liquid language fundamentals, CSS/JS/HTML coding standards, and WCAG accessibility patterns for Shopify themes
At a glance
liquid-skills is an Agent Skill by Shopify in the Design & Creative category. In Claude Code it installs with `/plugin install liquid-skills@claude-plugins-official` after adding the anthropics/claude-plugins-official marketplace; other assistants use its SKILL.md instructions as rules. Its source repository has 35 GitHub stars (as of Oct 28, 2026).
How to install liquid skills in your AI client
Setup for Claude Code, Claude Desktop, Cursor, Codex, Windsurf, Cline and VS Code — copy-paste ready.
How to install liquid skills in Claude CodeAnthropic's agentic CLI
Add the marketplace
claude/plugin marketplace add anthropics/claude-plugins-officialInstall the skill
claude/plugin install liquid-skills@claude-plugins-officialUse it
These are slash commands for a Claude Code session, not your shell. Claude auto-invokes the skill when your request matches its description — or type its slash command if it exposes one.
How to install liquid skills in Claude DesktopDesktop app (MCP config)
Clone the source
bashgit clone https://github.com/Shopify/liquid-skills.gitFind the skill
It lives in liquid-skills/plugins/liquid-skills — that folder contains the SKILL.md.
Add the SKILL.md to your Skills folder
Settings → Capabilities → Skills → add the folder containing SKILL.md. Claude picks it up automatically.
How to install liquid skills in CursorAI-first code editor
Clone the source
bashgit clone https://github.com/Shopify/liquid-skills.gitFind the skill
It lives in liquid-skills/plugins/liquid-skills — that folder contains the SKILL.md.
Convert to a Cursor rule
Create .cursor/rules/liquid-skills.mdc and paste the SKILL.md body. Set `alwaysApply` or a glob so the Agent loads it in context.
How to install liquid skills in Codex CLIOpenAI coding agent
Clone the source
bashgit clone https://github.com/Shopify/liquid-skills.gitFind the skill
It lives in liquid-skills/plugins/liquid-skills — that folder contains the SKILL.md.
Reference in AGENTS.md
Add the skill's instructions (or a link) to AGENTS.md at your repo root — Codex reads it on every run.
How to install liquid skills in WindsurfCodeium's agentic IDE
Clone the source
bashgit clone https://github.com/Shopify/liquid-skills.gitFind the skill
It lives in liquid-skills/plugins/liquid-skills — that folder contains the SKILL.md.
Add to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
How to install liquid skills in ClineVS Code autonomous agent
Clone the source
bashgit clone https://github.com/Shopify/liquid-skills.gitFind the skill
It lives in liquid-skills/plugins/liquid-skills — that folder contains the SKILL.md.
Add to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
How to install liquid skills in VS CodeCopilot / MCP support
Clone the source
bashgit clone https://github.com/Shopify/liquid-skills.gitFind the skill
It lives in liquid-skills/plugins/liquid-skills — that folder contains the SKILL.md.
Add to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
More Design & Creative skills
- Design & Creative185k
example skills
Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling
Anthropic Skills12 skillsby anthropics
- Design & Creative185k
academy guide
Recommends relevant Claude Academy courses, tutorials, and use cases when users ask how to use Claude
Anthropic Skills1 skillsby anthropics
- Design & Creative75k
hyperframes
HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website-to-video capture for HyperFrames.
Claude Plugins (Official)by heygen-com
- Design & Creative45k
discord
Discord messaging bridge with built-in access control. Manage pairing, allowlists, and policy via /discord:access.
Claude Plugins (Official)by anthropics
- Design & Creative45k
frontend design
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.
Claude Plugins (Official)by anthropics
- Design & Creative45k
imessage
iMessage messaging bridge with built-in access control. Reads chat.db directly, sends via AppleScript. Manage pairing, allowlists, and policy via /imessage:access.
Claude Plugins (Official)by anthropics
Catalog data refreshed . Something wrong? Report it.