Our review

Creates distinctive, production-grade frontend interfaces for Bookkeep using a cinematic dark theme with jewel-tone accents and extensive glassmorphism.

Strengths

Enforces visual consistency through predefined design tokens and reusable component classes.
Provides ready-to-use patterns for cards, badges, inputs, and page headers with hover effects.
Includes modern visual effects like glassmorphism, ambient glows, and gradient text.
Accelerates development by offering concrete, tested examples.

Limitations

Tightly coupled to Bookkeep's specific visual identity, not easily portable to other projects.
Does not address responsive design or advanced accessibility considerations.
Assumes design tokens are already configured in the project's Tailwind setup.

When to use it

When building new components, pages, or features that must adhere to Bookkeep's established cinematic dark theme and glassmorphism style.

When not to use it

When the project follows a different design language or when a lightweight, non-thematic approach is preferred.

Examples

Create a glass card component

Using the frontend-design skill, generate a reusable glass card component with an icon, title, and description that follows the glassmorphism pattern. Include proper spacing, text styles, and a subtle hover effect.

Add a page header with ambient glow

I need a page header with an ambient glow effect, a gradient title, and a subtitle for a new settings page. Use the frontend-design patterns for the header and glow.

Style a form input with focus ring

Create a form input styled with the dark theme, glass background, and focus ring. Include placeholder styling and a validation error state as per the design system.

name: frontend-design description: | Creates distinctive, production-grade frontend interfaces for Bookkeep using the cinematic dark theme with jewel-tone accents. Use when: Building new components, pages, or features that need to match the established visual language. allowed-tools: Read, Edit, Write, Glob, Grep, Bash, mcp__plugin_playwright_playwright__browser_snapshot, mcp__plugin_playwright_playwright__browser_take_screenshot, mcp__plugin_playwright_playwright__browser_navigate

Frontend Design Skill

Bookkeep uses a cinematic dark theme with jewel-tone accents (emerald primary, amber accent) and extensive glassmorphism. The design prioritizes book covers as hero elements with reflection effects, glow states, and lazy-loaded imagery.

Quick Start

Card with Glassmorphism

<div className="glass rounded-xl p-6 space-y-4">
  <h3 className="text-lg font-semibold tracking-tight">Section Title</h3>
  <p className="text-sm text-muted-foreground">Description text</p>
</div>

Status Badge

<span className="status-approved inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full border">
  <CheckCircle className="h-3 w-3" />
  Approved
</span>

Interactive Card

<div className="group card-hover rounded-xl border border-border/50 bg-card/50 p-4 cursor-pointer">
  <div className="transition-transform duration-300 group-hover:translate-x-1">
    Content slides on hover
  </div>
</div>

Key Concepts

| Concept | Class | Usage | |---------|-------|-------| | Glass effect | glass, glass-subtle, glass-strong | Layered surfaces | | Book cover | book-cover, book-cover-glow | Hero imagery | | Card lift | card-lift | Elevated hover state | | Status colors | status-{state} | Semantic badges | | Gradient text | text-gradient-emerald | Accent headings |

Common Patterns

Page Header with Ambient Glow

<div className="relative mb-8">
  <div className="absolute -top-20 -left-20 w-64 h-64 bg-primary/10 rounded-full blur-3xl" />
  <h1 className="text-3xl font-bold tracking-tight">Page Title</h1>
  <p className="text-muted-foreground mt-2">Subtitle description</p>
</div>

Form Input with Focus Ring

<Input
  className="bg-card/50 border-border/50 focus:bg-card focus:border-primary/30 
             transition-all duration-300 rounded-xl h-11"
  placeholder="Search..."
/>

Design Tokens

| Token | Value | Usage | |-------|-------|-------| | Primary | hsl(158 64% 42%) | CTAs, active states | | Accent | hsl(38 92% 55%) | Warnings, highlights | | Background | hsl(220 20% 4%) | Page bg | | Radius | 0.75rem | All corners | | Transition | 300ms ease-out | Default timing |

Related Skills

See the tailwind skill for utility classes and theme configuration
See the react skill for component architecture and hooks
See the shadcn-ui skill for primitive component usage

Cinematic Frontend Design

Recommended for