generic-fullstack-design-system
Build consistent UIs across full-stack Next.js/NestJS applications using this design system reference. It covers theme configuration, shadcn/ui component patterns, CSS variables, dark mode setup with next-themes, and visual effects like glassmorphism. Extends the generic design system foundation for colors, typography, and spacing.
generic-fullstack-design-system provides design patterns, component templates, and theming setup for Next.js/NestJS applications.
AI-generated summary based on this skill's SKILL.md
Install
travisjneuman/.claude/generic-fullstack-design-system · repository language: JavaScript
git clone https://github.com/travisjneuman/.claude
cp -r .claude/skills/generic-fullstack-design-system ~/.claude/skills/generic-fullstack-design-systemnpx skillfed install travisjneuman/.claude/generic-fullstack-design-systemFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is generic-fullstack-design-system and what does it cover?
generic-fullstack-design-system is a design system reference for building consistent UIs across full-stack Next.js/NestJS applications. It covers theme configuration, shadcn/ui component patterns, CSS variables, dark mode setup with next-themes, and visual effects like glassmorphism. The system extends the generic design system foundation for colors, typography, and spacing to ensure visual consistency across your entire application.
How do I implement a cohesive design system for Next.js/NestJS full-stack applications?
generic-fullstack-design-system provides a structured approach to implementing cohesive design systems. Start by configuring theme tokens and CSS variables for your colors and spacing, then integrate shadcn/ui components with consistent styling and variants. Set up dark mode using next-themes for seamless theme switching. This layered approach ensures every component across your Next.js frontend and NestJS backend follows the same design language and visual guidelines.
How do I configure theme tokens, colors, spacing, and CSS variables?
generic-fullstack-design-system guides you through setting up CSS variables for your design tokens. Define your color palette using HSL color theory, establish a responsive spacing system, and create CSS variable mappings that can be toggled between light and dark modes. These variables become the foundation for all component styling, ensuring brand consistency and making global theme updates simple—changes propagate automatically across all components using those tokens.
What is the best way to use shadcn/ui components with consistent styling?
generic-fullstack-design-system demonstrates how to leverage shadcn/ui components while maintaining consistent styling through your design tokens. Configure component variants to align with your theme, use CSS variables for colors and spacing, and ensure all button, form, dialog, and modal components follow the same visual patterns. This approach lets you build a cohesive component library where every element respects your design system rules.
How do I set up dark mode and theme switching with next-themes?
generic-fullstack-design-system covers dark mode implementation using next-themes. Configure your theme provider in your Next.js layout, define light and dark CSS variable values, and create a theme toggle component. next-themes handles persistence and system preference detection automatically, letting users switch between themes seamlessly while your CSS variables update all component colors instantly.
Does generic-fullstack-design-system address accessibility and visual effects?
Yes. generic-fullstack-design-system ensures WCAG AA accessibility standards across your UI while also covering visual effects like glassmorphism and GPU-accelerated animations. The system balances aesthetic polish with accessible color contrast, readable typography, and keyboard navigation support. This means your full-stack application maintains both brand consistency and inclusive design practices.
SKILL.md
rendered from the published skill — quoted content, verbatim
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)
```css :root { --background: #ffffff; --foreground: #0a0a0f; --primary: hsl(220, 100%, 55%); --primary-foreground: #ffffff; }
.dark { --background: #0a0a0f; --foreground:
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/generic-fullstack-design-system/SKILL.md