nextjs-build-website-theme

Generate design tokens and wire them into a Next.js codebase.

2|Updated Apr 18, 2026

Search Tags:#typography #accessibility #next.js #design tokens #tailwind #ui consistency #theme setup

Ready to run

npx skills add https://github.com/sdcorejs/sdcorejs-agent --skill nextjs-build-website-theme

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-build-website-theme
Source: https://github.com/sdcorejs/sdcorejs-agent/tree/main/plugin/skills/nextjs-build-website-theme
Command: npx skills add https://github.com/sdcorejs/sdcorejs-agent --skill nextjs-build-website-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents Tailwind color and typography sprawl by converting an industry-driven “vibe” into consistent, reusable design tokens that components follow site-wide.

Core Features & Use Cases

Palette + typography selection: Picks an industry-appropriate primary/accent/neutral palette and a matching heading/body font pair from the brainstorm inputs (VI/EN ready).
Tokenized implementation: Writes a single source of truth in src/config/theme.ts, then mirrors it into tailwind.config.ts and src/app/[locale]/globals.css using a Tailwind 4 @theme block.
Guardrails for consistency: Ensures components use tokens (e.g., bg-brand, text-neutral-600) instead of raw hex values or Tailwind’s arbitrary full palette, plus includes an accessibility (WCAG AA) contrast verification requirement.

Quick Start

Use this skill to set theme palette and design tokens for a newly initialized Next.js site, based on the industry vibe and brand-color context from earlier onboarding steps.

Frequently Asked Questions about nextjs-build-website-theme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up design tokens in a Next.js project using Tailwind?▼

To set up design tokens in Next.js, define a single source of truth in src/config/theme.ts and mirror those palette, typography, and spacing values into tailwind.config.ts and globals.css using a Tailwind 4 @theme block.

What is the best way to prevent Tailwind color sprawl in Next.js components?▼

Preventing Tailwind color sprawl requires enforcing token-only color usage across components, ensuring they reference semantic classes like bg-brand instead of raw hex values or Tailwind’s arbitrary full palette.

How do I configure next/font/google with custom typography design tokens?▼

Configuring next/font/google with typography tokens involves selecting a matching heading and body font pair, then wiring those specific font variables into your global CSS theme block alongside the generated design tokens.

Does this design token approach support WCAG AA accessibility checks?▼

Yes, the design token setup includes an accessibility verification requirement, ensuring that the generated primary, accent, and neutral color palettes pass WCAG AA contrast checks before components are styled.

Can I use this token setup for a freshly initialized Next.js codebase?▼

Yes, this theme setup is specifically used to apply an industry-appropriate design system by wiring consistent tokens directly into a freshly initialized Next.js codebase immediately after site initialization.

Why should I use a single theme.ts file for Next.js design tokens?▼

Using a single theme.ts file creates a centralized source of truth for palette and typography, which prevents inconsistent styling by mirroring those exact values to Tailwind and CSS rather than hardcoding them.