generic-fullstack-design-system
Complete design system reference for full-stack applications. Covers colors, typography, spacing, component patterns (shadcn/ui), effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
Works with
---
name: generic-fullstack-design-system
description: Complete design system reference for full-stack applications. Covers colors, typography, spacing, component patterns (shadcn/ui), effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
license: MIT
---
# Fullstack Design System
Design system patterns for Next.js/NestJS full-stack applications.
**Extends:** [Generic Design System](../generic-design-system/SKILL.md) - Read base skill for color theory, typography scale, spacing system, and component states.
## Theme Configuration
### lib/theme.ts Structure
```typescript
// 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: #fafafa;
}
```
### Tailwind Integration
```javascript
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
primary: "var(--primary)",
},
},
},
};
```
## shadcn/ui Patterns
### Button Variants
```tsx
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
```tsx
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="user@example.com" />
</div>;
```
### Dialog/Modal
```tsx
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
```css
.glass {
background: hsl(var(--card) / 0.5);
backdrop-filter: blur(12px);
border: 1px solid hsl(var(--border) / 0.5);
}
```
### Gradient Backgrounds
```css
.bg-gradient {
background: linear-gradient(135deg, var(--primary), var(--accent));
}
```
## Dark Mode Implementation
### Next.js + next-themes
```tsx
// 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
```tsx
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
```
## See Also
- [Generic Design System](../generic-design-system/SKILL.md) - Token organization, spacing
- [Design Patterns](../_shared/DESIGN_PATTERNS.md) - Atomic Design, component docs
- [UX Principles](../_shared/UX_PRINCIPLES.md) - Visual hierarchyMore Design Systems skills
stitch-design-taste
leonxlnx/taste-skill
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
figma
heygen-com/hyperframes
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.
image
coreyhaines31/marketingskills
When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Flux Kontext,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'ChatGPT Images,' 'Ideogram,' 'Gemini image,' 'Nano Banana,' 'Recraft,' 'Stable Diffusion,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.
