font-theme-setuplisted

Extract a design system's tokens from a Figma file (via the Figma MCP) and apply them to a Next.js + Tailwind v4 + shadcn/ui project's THEME — rewriting globals.css color tokens in oklch, wiring fonts in layout.tsx (next/font Google + local custom fonts), and setting radius, shadows, spacing, line-heights, gradients, and background images. Use this whenever the user wants to set up or update the theme / design tokens / colors / typography / fonts from a Figma link — phrases like "set up the theme from this figma", "apply these design tokens", "update the colors and fonts from figma", "convert the palette to oklch", "configure the shadcn theme", or "wire up the fonts". This is the frontend theming skill — it edits globals.css + layout.tsx + tailwind theme, it does NOT build pages or components from a frame (that is figma-to-component) and does NOT scaffold the project (that is nextjs-bootstrap). Runs once per project (re-run to refresh tokens). Requires the Figma MCP to be connected and a Figma file/frame URL.
vipincode/exr-agent-skills · ★ 0 · Web & Frontend · score 57

Install: claude install-skill vipincode/exr-agent-skills

# font-theme-setup Turn a Figma file's design tokens into a Next.js + **Tailwind v4 + shadcn/ui** theme. The job is to read the source of truth (the Figma variables / styles) and write it into the **two places a shadcn app stores its theme**: `src/app/globals.css` (the CSS variables, colors in **oklch**) and `src/app/layout.tsx` (the fonts). Everything visual that's a *token* — color, type scale, radius, shadow, spacing, line-height, gradient, background — flows from Figma into those files so the rest of the app can just use Tailwind utilities and shadcn semantic classes. This is a **theming** skill, not a component skill. It owns the global look. Building actual screens/components from a frame is `figma-to-component`; scaffolding the project is `nextjs-bootstrap`. Theming was deliberately deferred by the bootstrap to this skill (see the bootstrap's "Styling / theming" note). ## Why oklch, and why these two files shadcn/Tailwind v4 store theme colors as **oklch** CSS variables in `globals.css` (a `:root` block, a `.dark` block, and a `@theme inline` block that maps them to Tailwind color names). Figma almost always hands you **hex/rgb**. So the core mechanical step is hex→oklch, done for every color — that's what `scripts/hex_to_oklch.py` is for (don't convert by hand; it's repetitive and easy to get subtly wrong). oklch is perceptually uniform, which is why shadcn picked it: light/dark variants and hover shades stay visually consistent. Fonts live in `layout.tsx` becaus