AI Agent Skill HUB

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.

31 stars
bytravisjneuman
View on GitHubInstallation ↓

Best use case

generic-fullstack-design-system is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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.

Teams using generic-fullstack-design-system should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/generic-fullstack-design-system/SKILL.md --create-dirs "https://raw.githubusercontent.com/travisjneuman/.claude/main/skills/generic-fullstack-design-system/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/generic-fullstack-design-system/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How generic-fullstack-design-system Compares

Feature / Agentgeneric-fullstack-design-systemStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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 hierarchy

Related Skills

process-flowchart-designer

31
from travisjneuman/.claude

Create process flowcharts and workflow diagrams from descriptions, with optimization suggestions and bottleneck identification. Use when mapping processes, designing workflows, or improving operational efficiency.

graphic-design

31
from travisjneuman/.claude

Professional graphic design principles for digital and print media. Use when creating visual designs, choosing color palettes, typography, layouts, or providing design feedback.

generic-static-feature-developer

31
from travisjneuman/.claude

Guide feature development for static HTML/CSS/JS sites. Covers patterns, automation workflows, and content validation. Use when adding features, modifying automation, or planning changes.

generic-static-design-system

31
from travisjneuman/.claude

Complete design system reference for static HTML/CSS/JS sites. Covers colors, typography, component patterns, animations, and accessibility. Use when implementing UI, choosing colors, or ensuring brand consistency.

generic-static-code-reviewer

31
from travisjneuman/.claude

Review static site code for bugs, security issues, performance problems, accessibility gaps, and CLAUDE.md compliance. Enforces pure HTML/CSS/JS standards, minimal page weight, mobile-first design. Use when completing features, before commits, or reviewing changes.

generic-react-ux-designer

31
from travisjneuman/.claude

Professional UI/UX design expertise for React applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design reviews.

generic-react-feature-developer

31
from travisjneuman/.claude

Guide feature development for React applications with architecture focus. Covers Zustand/Redux patterns, IndexedDB usage, component systems, lazy loading strategies, and seamless integration. Use when adding new features, refactoring existing code, or planning major changes.

generic-react-design-system

31
from travisjneuman/.claude

Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.

generic-react-code-reviewer

31
from travisjneuman/.claude

Review React/TypeScript code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md workflow compliance. Enforces TypeScript strict mode, GPU-accelerated animations, WCAG AA accessibility, bundle size limits, and surgical simplicity. Use when completing features, before commits, or reviewing pull requests.

generic-fullstack-ux-designer

31
from travisjneuman/.claude

Professional UI/UX design expertise for full-stack applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design reviews.

generic-fullstack-feature-developer

31
from travisjneuman/.claude

Guide feature development for full-stack applications with architecture focus. Covers Next.js App Router patterns, NestJS backend services, database models, data workflows, and seamless integration. Use when adding new features, refactoring existing code, or planning major changes.

generic-fullstack-code-reviewer

31
from travisjneuman/.claude

Review full-stack code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md compliance. Enforces TypeScript strict mode, input validation, GPU-accelerated animations, and design system consistency. Use when completing features, before commits, or reviewing pull requests.