nextjs-build-website-theme
CommunityApply design tokens to a Next.js site.
Design & Creative#typography#accessibility#next.js#design tokens#tailwind#ui consistency#theme setup
Authorsdcorejs
Version1.0.0
Installs0
System Documentation
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 intotailwind.config.tsandsrc/app/[locale]/globals.cssusing a Tailwind 4@themeblock. - 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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: nextjs-build-website-theme Download link: https://github.com/sdcorejs/sdcorejs-agent/archive/main.zip#nextjs-build-website-theme Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.