This skill guides creation of frontend interfaces for the Fables & Sagas D&D Solo app. All output must integrate seamlessly with the existing codebase and its dark medieval fantasy aesthetic.
Tech Stack
- Framework: Next.js 16 with React 19, TypeScript
- Styling: Tailwind CSS v4 with DaisyUI v5
- State: Zustand (
useDnDStore from @/stores/useStore)
- Icons:
lucide-react (primary), @mdi/react + @mdi/js (supplemental)
- Toasts:
sonner (dark theme, custom styled — see layout.tsx)
- Lists:
react-virtuoso for virtualized scrolling
- Markdown:
react-markdown
- Fonts loaded via
next/font/google:
MedievalSharp — display/headings (import from @/app/components/medievalFont)EB_Garamond — secondary displayGeist / Geist_Mono — body text (CSS variables --font-geist-sans, --font-geist-mono)
Theme: "fables"
DaisyUI custom theme (data-theme="fables") defined in src/app/globals.css:
| Token |
Value |
Usage |
primary |
#d4af37 (antique gold) |
Headings, accents, borders, CTA |
primary-content |
#0a0a0a |
Text on primary backgrounds |
secondary |
#8b1a1a (deep crimson) |
Secondary actions, danger accents |
secondary-content |
#f0e6c8 |
Text on secondary backgrounds |
accent |
#e6c44c (bright gold) |
Highlights, hover states |
neutral |
#1a1a1a |
Card/panel backgrounds |
neutral-content |
#d4c9a8 (parchment) |
Body text on neutral |
base-100 |
#0a0a0a (near-black) |
Page background |
base-200 |
#1a1a1a |
Elevated surfaces |
base-300 |
#2a2a2a |
Higher elevation |
base-content |
#d4c9a8 |
Default text |
error |
#dc2626 |
Destructive actions |
success |
#22c55e |
Confirmations |
Always use DaisyUI semantic tokens (text-primary, bg-base-200, btn-primary, etc.) instead of hardcoded colors.
Custom Tailwind Utilities
Defined in src/app/globals.css:
bg-login-vignette — radial gradient overlay for cinematic scenesbg-gradient-radial, bg-gradient-conic — custom gradient utilities.animate-fade-in-up, .animate-fade-in-up-delay-1/2/3 — staggered entrance animations.text-glow-gold — gold text-shadow glow effect for dramatic headings
Component Patterns
Follow these conventions from existing code:
- "use client" directive on all interactive components
- DaisyUI classes for base components:
btn, input, input-bordered, modal, drawer, card, badge, tooltip
- Opacity modifiers for subtle layering:
bg-base-200/50, border-primary/15, text-base-content/30
- Section headers use
medievalFont.className with gold decorative horizontal rules (see SectionHeader.tsx pattern)
- Modals use fixed overlay with
bg-black bg-opacity-50, centered card with border-2
- Inputs use:
input input-bordered w-full bg-base-200/50 border-primary/15 text-base-content placeholder:text-base-content/30 focus:border-primary/40 focus:outline-none
- Drawers slide from right with backdrop blur
Aesthetic Direction
This app has a dark medieval fantasy aesthetic — think weathered parchment text on near-black backgrounds, gold filigree accents, and deep crimson highlights. The tone is immersive and atmospheric, like opening an ancient tome by candlelight.
When designing new components:
- Lean into the dark + gold contrast
- Use
medievalFont for section titles and dramatic text
- Apply subtle opacity and blur for depth (
backdrop-blur-sm, /50 opacity modifiers)
- Use staggered
animate-fade-in-up for page entrances
- Add
text-glow-gold sparingly for emphasis on hero elements
- Keep backgrounds dark (
base-100, base-200) with gold (primary) as the accent color
- Borders should be subtle:
border-primary/15 to border-primary/40
File Organization
- Components:
src/app/components/{Feature}/ComponentName.tsx
- Hooks:
src/hooks/useHookName.ts
- Stores:
src/stores/useStore.ts (single Zustand store)
- API routes:
src/app/api/{endpoint}/route.ts
- Services:
src/services/
1---2name: frontend-design-123description: Create frontend components and pages for the Fables & Sagas D&D app. Use this skill when building UI for the dnd-homebrew-frontend project. Generates code that matches the existing dark fantasy aesthetic, theme system, and component patterns.4---5
6This skill guides creation of frontend interfaces for the **Fables & Sagas** D&D Solo app. All output must integrate seamlessly with the existing codebase and its dark medieval fantasy aesthetic.
7
8## Tech Stack
9
10- **Framework**: Next.js 16 with React 19, TypeScript
11- **Styling**: Tailwind CSS v4 with DaisyUI v5
12- **State**: Zustand (`useDnDStore` from `@/stores/useStore`)
13- **Icons**: `lucide-react` (primary), `@mdi/react` + `@mdi/js` (supplemental)
14- **Toasts**: `sonner` (dark theme, custom styled — see layout.tsx)
15- **Lists**: `react-virtuoso` for virtualized scrolling
16- **Markdown**: `react-markdown`
17- **Fonts loaded via `next/font/google`**:
18 - `MedievalSharp` — display/headings (import from `@/app/components/medievalFont`)
19 - `EB_Garamond` — secondary display
20 - `Geist` / `Geist_Mono` — body text (CSS variables `--font-geist-sans`, `--font-geist-mono`)
21
22## Theme: "fables"
23
24DaisyUI custom theme (`data-theme="fables"`) defined in `src/app/globals.css`:
25
26| Token | Value | Usage |
27|-------|-------|-------|
28| `primary` | `#d4af37` (antique gold) | Headings, accents, borders, CTA |
29| `primary-content` | `#0a0a0a` | Text on primary backgrounds |
30| `secondary` | `#8b1a1a` (deep crimson) | Secondary actions, danger accents |
31| `secondary-content` | `#f0e6c8` | Text on secondary backgrounds |
32| `accent` | `#e6c44c` (bright gold) | Highlights, hover states |
33| `neutral` | `#1a1a1a` | Card/panel backgrounds |
34| `neutral-content` | `#d4c9a8` (parchment) | Body text on neutral |
35| `base-100` | `#0a0a0a` (near-black) | Page background |
36| `base-200` | `#1a1a1a` | Elevated surfaces |
37| `base-300` | `#2a2a2a` | Higher elevation |
38| `base-content` | `#d4c9a8` | Default text |
39| `error` | `#dc2626` | Destructive actions |
40| `success` | `#22c55e` | Confirmations |
41
42**Always use DaisyUI semantic tokens** (`text-primary`, `bg-base-200`, `btn-primary`, etc.) instead of hardcoded colors.
43
44## Custom Tailwind Utilities
45
46Defined in `src/app/globals.css`:
47
48- `bg-login-vignette` — radial gradient overlay for cinematic scenes
49- `bg-gradient-radial`, `bg-gradient-conic` — custom gradient utilities
50- `.animate-fade-in-up`, `.animate-fade-in-up-delay-1/2/3` — staggered entrance animations
51- `.text-glow-gold` — gold text-shadow glow effect for dramatic headings
52
53## Component Patterns
54
55Follow these conventions from existing code:
56
57- **"use client"** directive on all interactive components
58- **DaisyUI classes** for base components: `btn`, `input`, `input-bordered`, `modal`, `drawer`, `card`, `badge`, `tooltip`
59- **Opacity modifiers** for subtle layering: `bg-base-200/50`, `border-primary/15`, `text-base-content/30`
60- **Section headers** use `medievalFont.className` with gold decorative horizontal rules (see `SectionHeader.tsx` pattern)
61- **Modals** use fixed overlay with `bg-black bg-opacity-50`, centered card with `border-2`
62- **Inputs** use: `input input-bordered w-full bg-base-200/50 border-primary/15 text-base-content placeholder:text-base-content/30 focus:border-primary/40 focus:outline-none`
63- **Drawers** slide from right with backdrop blur
64
65## Aesthetic Direction
66
67This app has a **dark medieval fantasy** aesthetic — think weathered parchment text on near-black backgrounds, gold filigree accents, and deep crimson highlights. The tone is immersive and atmospheric, like opening an ancient tome by candlelight.
68
69When designing new components:
70- Lean into the **dark + gold** contrast
71- Use `medievalFont` for section titles and dramatic text
72- Apply subtle opacity and blur for depth (`backdrop-blur-sm`, `/50` opacity modifiers)
73- Use staggered `animate-fade-in-up` for page entrances
74- Add `text-glow-gold` sparingly for emphasis on hero elements
75- Keep backgrounds dark (`base-100`, `base-200`) with gold (`primary`) as the accent color
76- Borders should be subtle: `border-primary/15` to `border-primary/40`
77
78## File Organization
79
80- Components: `src/app/components/{Feature}/ComponentName.tsx`
81- Hooks: `src/hooks/useHookName.ts`
82- Stores: `src/stores/useStore.ts` (single Zustand store)
83- API routes: `src/app/api/{endpoint}/route.ts`
84- Services: `src/services/`
diegosouzapw