Use this skill when the user asks to create a new React/Next.js component, page, section, or UI element for the Vitamind project. Applies project-specific rules for Server Components, CSS tokens, fonts, icons, and theme compatibility.
Create a new component or page that follows the Vitamind project's coding and design conventions.
"use client") unless the component needs:
window, document, localStorage)useState, useEffect, useRef)"use client" at the top.components/<category>/ComponentName.tsx
layout/, ui/, blog/, admin/, auth/, elements/, sections/, widgets/app/<route>/page.tsxapp/<route>/layout.tsxstyles/tokens.css and semantic tokens from app/globals.cssvar(--c-0) to var(--c-40), gradients: var(--g-brand), var(--g-brand-soft)var(--page-bg), var(--page-text), var(--surface-card), var(--frame-border), etc.var(--space-1) to var(--space-8)var(--radius-1) to var(--radius-pill)var(--shadow-1) to var(--shadow-3)tailwind.config.ts:
bg-brand0/10, text-brand2, border-brand1/20, bg-brandvar(--font-sans) ("Be Vietnam Pro")var(--font-display) ("Noto Serif").theme-day and .theme-nightvar(--page-text)) rather than raw color tokens for text and backgroundsuicons-regular-rounded (class: fi fi-rr-*)boxicons (class: bx bx-*)remixicon (class: ri-*)--site-shell-max and --site-shell-guttermax-width or container classes directlyBefore finalizing a component:
.theme-day) and dark (.theme-night)?