Components — Development skill for Claude Code
name: ui-extensions-validate-components description: Use when validating component documentation updates in the ui-extensions repo.
How to install Components
Installs to ~/.claude/skills/shopify-ui-extensions-components/SKILL.md
mkdir -p ~/.claude/skills/shopify-ui-extensions-components && curl -fsSL https://raw.githubusercontent.com/Shopify/ui-extensions/HEAD/.claude/skills/components.md -o ~/.claude/skills/shopify-ui-extensions-components/SKILL.md Restart Claude Code, or start a new session, for it to be picked up.
What Components does
name: ui-extensions-validate-components description: Use when validating component documentation updates in the ui-extensions repo. Covers example file format, component descriptions, best practices, limitations, and sections to remove. Run after ui-extensions:style-lint.
Components Validation
Run after `ui-extensions:style-lint`. Also run `ui-extensions:type-definitions` and `ui-extensions:cross-surface`.
**How to use:** Evaluate each item against the files provided. Skip items tha
Alternatives in Development
- Web Artifacts Builder — Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui 94.1k ★
- Claude Integration Guide — FOR CLAUDE CODE: When a user asks you to integrate components from this showcase repository into their project 9.3k ★
- Stitch React Components — Stitch to React components conversion 2.6k ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Stitch Shadcn UI
Build UI components with shadcn/ui
Astro
/astroAstro 5.x components, routing, collections, i18n, SEO, Tailwind, React islands, transitions
Marp Slides
MARP presentation skill for Claude Code — 22 curated example decks, SVG charts, dark/light themes, dashboard c
Prime Components
Learn how to build components in this codebase
Pew
The ultimate starting point for doing anything in any project. Systematically discovers what you want to achie
Shard
Use this prompt to systematically extract reusable components from any artifact, create them as separate files
Related Agents
Token Auditor
Scans ui/src/ for hardcoded visual values, duplicate components, and shadcn replacement candidates; produces d
Civitai Reuse Review
Reviews a feature segment in the main Civitai Next.js app (src/) for code that was rebuilt when it already exi
Frontend Developer
Frontend developer for React, Next.js, responsive layouts, and accessible UI components