generic-fullstack-design-system

Name: generic-fullstack-design-system
Author: travisjneuman

github.com/travisjneumanDesign & UI106138 installsUpdated 1d ago

About generic-fullstack-design-system

A design system skill for Next.js/NestJS full-stack applications, covering theme setup, component patterns, and dark mode. It extends Generic Design System with implementation guidance for developers building consistent interfaces.

Key features

01Theme configuration and CSS variables
02Tailwind integration patterns
03shadcn/ui component patterns
04Glassmorphism and gradient effects
05Dark mode implementation
06Static asset organization

Use cases

01Configuring a theme for a Next.js app
02Applying shadcn/ui patterns in an interface
03Adding dark mode to an application

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/travisjneuman/.claude --skill generic-fullstack-design-system

After installing, type/generic-fullstack-design-systemin Claude Code to confirm it loaded.

Details

From the project README

Fullstack Design System

Design system patterns for Next.js/NestJS full-stack applications.

Extends: Generic Design System - Read base skill for color theory, typography scale, spacing system, and component states.

Theme Configuration

lib/theme.ts Structure

// lib/theme.ts - Single source of truth
export const theme = {
  colors: {
    primary: "hsl(220, 100%, 55%)",
    secondary: "hsl(180, 100%, 50%)",
    accent: "hsl(270, 70%, 60%)",
  },
  spacing: {
    xs: "4px",
    sm: "8px",
    md: "16px",
    lg: "24px",
  },
};

CSS Variables (globals.css)

:root {
  --background: #ffffff;
  --foreground: #0a0a0f;
  --primary: hsl(220, 100%, 55%);
  --primary-foreground: #ffffff;
}

.dark {
  --background: #0a0a0f;
  --foreground: #fafafa;
}

Tailwind Integration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        primary: "var(--primary)",
      },
    },
  },
};

shadcn/ui Patterns

Button Variants

import { Button } from '@/components/ui/button';

<Button>Primary</Button>
<Button variant="outline">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="ghost">Cancel</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

Form Components

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="[email protected]" />
</div>;

Dialog/Modal

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm Action</DialogTitle>
    </DialogHeader>
    {/* Content */}
  </DialogContent>
</Dialog>;

Visual Effects

Glassmorphism

.glass {
  background: hsl(var(--card) / 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--border) / 0.5);
}

Gradient Backgrounds

.bg-gradient {
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

Dark Mode Implementation

Next.js + next-themes

// app/layout.tsx
import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Theme Toggle

import { useTheme } from "next-themes";

function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Toggle theme
    </button>
  );
}

Asset Organization

public/
├── images/
│   ├── logo.svg
│   └── og-image.png    # 1200x630, < 1MB
├── favicons/
│   ├── favicon.ico
│   ├── apple-touch-icon.png
│   └── favicon-32x32.png
└── site.webmanifest

Comments

Markdown supported