Awesome-omni-skill frontend-design

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.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/frontend-design-rmunoz33" ~/.claude/skills/diegosouzapw-awesome-omni-skill-frontend-design-37a7fe && rm -rf "$T"

manifest: skills/development/frontend-design-rmunoz33/SKILL.md

source content

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 display

Geist

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 scenes
```
bg-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/
```