frontend-design — for Claude Code frontend-design, dnd-homebrew-frontend, community, for Claude Code, ide skills, useDnDStore, lucide-react, sonner, guides, creation

v1.0.0
GitHub

Sobre este Skill

Perfeito para Agentes focados em UI que necessitam de integração perfeita com Next.js, React e TypeScript para estética de fantasia medieval escura. Resumo localizado: Create frontend components and pages for the Fables & Sagas D&D app. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

Recursos

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 sty

# Core Topics

for Claude Code useDnDStore lucide-react sonner guides creation
rmunoz33 rmunoz33
[0]
[0]
Updated: 3/8/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 8/11

This page remains useful for teams, but Killer-Skills treats it as reference material instead of a primary organic landing page.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution
Review Score
8/11
Quality Score
30
Canonical Locale
en
Detected Body Locale
en

Perfeito para Agentes focados em UI que necessitam de integração perfeita com Next.js, React e TypeScript para estética de fantasia medieval escura. Resumo localizado: Create frontend components and pages for the Fables & Sagas D&D app. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

Por que usar essa habilidade

Habilita os agentes a criar interfaces de frontend imersivas usando Tailwind CSS v4, DaisyUI v5 e gerenciamento de estado Zustand, enquanto integra com ícones lucide-react e @mdi/react e toasts sonner para uma experiência do usuário coesa.

Melhor para

Perfeito para Agentes focados em UI que necessitam de integração perfeita com Next.js, React e TypeScript para estética de fantasia medieval escura.

↓ Casos de Uso Práticos for frontend-design

Projetar layouts responsivos para o aplicativo Fables & Sagas D&D Solo
Implementar temas de fantasia medieval escura usando Tailwind CSS e DaisyUI
Integrar gerenciamento de estado Zustand para fluxo de dados sem interrupções

! Segurança e Limitações

  • Requer compatibilidade com Next.js 16 e React 19
  • Limitado a TypeScript como linguagem de programação principal
  • Dependente de bibliotecas específicas: Tailwind CSS v4, DaisyUI v5, Zustand, lucide-react, @mdi/react e sonner

Why this page is reference-only

  • - Current locale does not satisfy the locale-governance contract.
  • - The underlying skill quality score is below the review floor.

Source Boundary

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

After The Review

Decide The Next Action Before You Keep Reading Repository Material

Killer-Skills should not stop at opening repository instructions. It should help you decide whether to install this skill, when to cross-check against trusted collections, and when to move into workflow rollout.

Install Path

Start With Installation And Validation

If this skill is worth continuing with, the next step is to confirm the install command, CLI write path, and environment validation.
Trusted Recheck

Cross-Check Against Trusted Picks

If you are still comparing multiple skills or vendors, go back to the trusted collection before amplifying repository noise.
Workflow

Move To Workflow Collections For Team Rollout

When the goal shifts from a single skill to team workflows, approvals, and repeatable execution, move into workflow collections.
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is frontend-design?

Perfeito para Agentes focados em UI que necessitam de integração perfeita com Next.js, React e TypeScript para estética de fantasia medieval escura. Resumo localizado: Create frontend components and pages for the Fables & Sagas D&D app. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

How do I install frontend-design?

Run the command: npx killer-skills add rmunoz33/dnd-homebrew-frontend/frontend-design. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for frontend-design?

Key use cases include: Projetar layouts responsivos para o aplicativo Fables & Sagas D&D Solo, Implementar temas de fantasia medieval escura usando Tailwind CSS e DaisyUI, Integrar gerenciamento de estado Zustand para fluxo de dados sem interrupções.

Which IDEs are compatible with frontend-design?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for frontend-design?

Requer compatibilidade com Next.js 16 e React 19. Limitado a TypeScript como linguagem de programação principal. Dependente de bibliotecas específicas: Tailwind CSS v4, DaisyUI v5, Zustand, lucide-react, @mdi/react e sonner.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add rmunoz33/dnd-homebrew-frontend/frontend-design. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use frontend-design immediately in the current project.

! Reference-Only Mode

This page remains useful for installation and reference, but Killer-Skills no longer treats it as a primary indexable landing page. Read the review above before relying on the upstream repository instructions.

Upstream Repository Material

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

Upstream Source

frontend-design

Resumo localizado: Create frontend components and pages for the Fables & Sagas D&D app. This AI agent skill supports Claude Code, Cursor, and Windsurf

SKILL.md
Readonly
Upstream Repository Material
The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.
Supporting Evidence

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:

TokenValueUsage
primary#d4af37 (antique gold)Headings, accents, borders, CTA
primary-content#0a0a0aText on primary backgrounds
secondary#8b1a1a (deep crimson)Secondary actions, danger accents
secondary-content#f0e6c8Text on secondary backgrounds
accent#e6c44c (bright gold)Highlights, hover states
neutral#1a1a1aCard/panel backgrounds
neutral-content#d4c9a8 (parchment)Body text on neutral
base-100#0a0a0a (near-black)Page background
base-200#1a1a1aElevated surfaces
base-300#2a2a2aHigher elevation
base-content#d4c9a8Default text
error#dc2626Destructive actions
success#22c55eConfirmations

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/

Habilidades Relacionadas

Looking for an alternative to frontend-design or another community skill for your workflow? Explore these related open-source skills.

Ver tudo

openclaw-release-maintainer

Logo of openclaw
openclaw

Resumo localizado: 🦞 # OpenClaw Release Maintainer Use this skill for release and publish-time workflow. It covers ai, assistant, crustacean workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

★ 333.8k
⑂ 0
Inteligência Artificial

widget-generator

Logo of f
f

Resumo localizado: Generate customizable widget plugins for the prompts.chat feed system # Widget Generator Skill This skill guides creation of widget plugins for prompts.chat . It covers ai, artificial-intelligence, awesome-list workflows. This AI agent skill supports Claude Code, Cursor, and

★ 149.6k
⑂ 0
Inteligência Artificial

flags

Logo of vercel
vercel

Resumo localizado: The React Framework # Feature Flags Use this skill when adding or changing framework feature flags in Next.js internals. It covers blog, browser, compiler workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

★ 138.4k
⑂ 0
Navegador

pr-review

Logo of pytorch
pytorch

Resumo localizado: Usage Modes No Argument If the user invokes /pr-review with no arguments, do not perform a review . It covers autograd, deep-learning, gpu workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

★ 98.6k
⑂ 0
Desenvolvedor