Can I use this for general D&D apps?

While tailored for the Fables & Sagas project, its patterns are perfect for any application requiring a dark medieval fantasy aesthetic.

How does it manage application state?

It follows the project's pattern of using a central Zustand store (useDnDStore) for all game and UI state management.

Does it handle typography and icons?

Yes, it uses MedievalSharp for headings, EB Garamond for display text, and Lucide-React for primary iconography.

What tech stack does this skill support?

It is optimized for Next.js 16, React 19, Tailwind CSS v4, and DaisyUI v5 using a custom 'fables' theme.

Fables & Sagas Frontend Design

Name: Fables & Sagas Frontend Design
Author: rmunoz33

byrmunoz33

0•

设计工具

Generates immersive dark medieval fantasy UI components and pages using Next.js 16 and Tailwind CSS v4.

This skill empowers Claude to act as a specialized UI/UX engineer for the Fables & Sagas project, ensuring all generated frontend code adheres to a specific dark medieval fantasy aesthetic. It leverages a modern tech stack—including Next.js 16, React 19, and DaisyUI v5—to build immersive interfaces featuring gold filigree accents, weathered parchment text, and cinematic animations. By automating the implementation of complex theme tokens, typography like MedievalSharp, and custom component patterns, it ensures consistent design and seamless integration with the project's Zustand state management.

主要功能

010 GitHub stars

02Applies cinematic animations like staggered fade-ins and gold text glow effects

03Integrates seamlessly with Zustand 'useDnDStore' for reactive game logic

04Implements the custom 'fables' DaisyUI theme with antique gold and crimson accents

05Automates complex UI patterns including virtualized lists and decorative section headers

06Generates responsive Next.js 16 components with React 19 and TypeScript support

使用场景

01Building immersive character sheet interfaces and inventory management screens

02Designing themed modal overlays and slide-out drawers for game events

03Creating cinematic landing pages with radial vignettes and medieval typography

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rmunoz33/dnd-homebrew-frontend frontend-design

For use in Claude.ai and ChatGPT

Download Skill