{"enrichment":{"faq":[{"a":"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.","q":"What is generic-fullstack-design-system and what does it cover?"},{"a":"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.","q":"How do I implement a cohesive design system for Next.js/NestJS full-stack applications?"},{"a":"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\u2014changes propagate automatically across all components using those tokens.","q":"How do I configure theme tokens, colors, spacing, and CSS variables?"},{"a":"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.","q":"What is the best way to use shadcn/ui components with consistent styling?"},{"a":"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.","q":"How do I set up dark mode and theme switching with next-themes?"},{"a":"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.","q":"Does generic-fullstack-design-system address accessibility and visual effects?"}],"shadow_tags":["component-library","theme-management","design-tokens","visual-effects","accessibility-compliance","dark-mode-support","css-architecture","ui-patterns","brand-guidelines","responsive-design"],"summary_rewrite":"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."},"files":[{"bytes":3882,"path":"skills/generic-fullstack-design-system/SKILL.md","sha256":"8147e3634c52cd366c9ad6c9d0df3d78d6acdb52aeb6f40bda21c5e7dd8c4f51","url":"https://skillfed.io/files/travisjneuman/.claude/generic-fullstack-design-system/7b90fb2e/SKILL.md"}],"id":"travisjneuman/.claude/generic-fullstack-design-system","links":{"html":"https://skillfed.io/travisjneuman/.claude/generic-fullstack-design-system","md":"https://skillfed.io/travisjneuman/.claude/generic-fullstack-design-system.md","repo":"https://github.com/travisjneuman/.claude"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":20,"language":"JavaScript","last_updated":"2026-07-17","license":"MIT","name":"generic-fullstack-design-system","publisher":"travisjneuman","stars":85},"relations":{"similar":[{"id":"bobmatnyc/claude-mpm-skills/shadcn"},{"id":"inertia-rails/skills/shadcn-inertia"},{"id":"giuseppe-trisciuoglio/developer-kit/shadcn-ui"},{"id":"dirnbauer/webconsulting-skills/shadcn-ui"},{"id":"MajesteitBart/TalentMatcher/shadcn-ui-expert"},{"id":"shep-ai/shep/shadcn-ui"},{"id":"travisjneuman/.claude/generic-react-design-system"},{"id":"pedronauck/skills/shadcn"},{"id":"patricio0312rev/skills/dark-mode-implementer"},{"id":"inertia-rails/skills/shadcn-vue-inertia"}]},"slug":{"owner":"travisjneuman","repo":".claude","skill":"generic-fullstack-design-system"},"version":"7b90fb2e"}