npx skills add ...
npx skills add vercel-labs/sitecore-skills --skill marketplace-build-component
npx skills add vercel-labs/sitecore-skills --skill marketplace-build-component
Builds UI components using the Blok design system for Sitecore Marketplace apps. Use when the user wants to create UI, add components, build a page layout, or work with Blok/shadcn components in a marketplace app.
You are helping the user build UI components for a Sitecore Marketplace app using the Blok design system (Sitecore's shadcn-based component library).
Blok components are installed via the shadcn CLI:
See blok-components.md for the full component catalog with install commands.
"use client";
import { useEffect, useState } from "react";
import { useMarketplaceClient, useAppContext } from "@/components/providers/marketplace";
import { Skeleton } from "@/components/ui/skeleton";
import { Alert, AlertDescription } from "@/components/ui/alert";
export function MyComponent() {
const { client } = useMarketplaceClient();
const appContext = useAppContext();
const [error, setError] = useState<string | null>(null);
const loading = !appContext;
if (loading) return <Skeleton className="h-32 w-full" />;
if (error) return <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>;
return <div>{/* Render data */}</div>;
}