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
Decision gist · record as of 2026-07-17
generic-fullstack-design-system provides design patterns, component templates, and theming setup for Next.js/NestJS applications. 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.
Use it when
- generic-fullstack-design-system provides a structured approach to implementing cohesive design systems.
- generic-fullstack-design-system guides you through setting up CSS variables for your design tokens.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
travisjneuman/.claude/generic-fullstack-design-system · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/generic-fullstack-design-system/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Implement a cohesive design system for Next.js/NestJS full-stack applications”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
shadcn/ui provides production-ready React components you copy directly into your project rather than installing as a package. Built on Radix UI primitives and styled with Tailwind CSS, each component gives you full customization control and transparent implementation.
shadcn-inertia teaches you how to use shadcn/ui components in Inertia Rails React applications by adapting Next.js examples. It replaces shadcn's form components and react-hook-form with Inertia's Form component, removes Next.js directives and APIs, and covers dialogs, tables, toasts, and dark mode setup.
shadcn-ui guides you through initializing the component library, installing individual components via CLI, and building forms with validation. It covers button variants, dialogs, tables, toasts, and charts styled with Tailwind CSS and CSS variables for custom theming.
Shadcn Ui Expert helps you design and implement accessible React components using shadcn-ui, Tailwind CSS, and Radix UI. Get guidance on component selection, customization, and best practices across forms, layouts, dialogs, tables, and data displays. Works with Next.js, Vite, Remix, Astro, and other frameworks.
UI Design System enforces design consistency across React and TypeScript projects through reusable tokens, spacing grids, and component patterns. It covers color systems, typography scales, an 8pt spacing grid, shadcn/ui integration, and WCAG 2.1 AA accessibility standards to streamline component creation and layout building.
Shadcn provides copy-paste React components you own and control, built atop Radix UI for accessibility and styled with Tailwind CSS. Customize components freely while respecting design tokens for theme switching and preserving built-in accessibility features.
More skills shadcn-ui (MIT) · generic-react-design-system (MIT) · shadcn-vue-inertia (MIT) · generic-react-ux-designer (MIT)