Notre avis

Crée des interfaces frontend distinctives et de qualité production pour Bookkeep, en utilisant un thème sombre cinématique avec des accents de couleur joyau et un effet de verre dépoli.

Points forts

Assure une cohérence visuelle stricte grâce à des tokens de design prédéfinis.
Fournit des composants réutilisables (cartes, badges, champs de formulaire) avec des classes utilitaires.
Intègre des effets visuels modernes comme le glassmorphisme et les lueurs ambiantes.
Accélère le développement en proposant des patterns concrets et testés.

Limites

Fortement lié à l'identité visuelle spécifique de Bookkeep, difficile à réutiliser ailleurs.
Ne couvre pas les aspects responsifs ou d'accessibilité avancés.
Suppose que les tokens de design sont déjà configurés dans le projet.

Quand l'utiliser

Lors de la création de nouveaux composants, pages ou fonctionnalités devant respecter le thème sombre et le style glassmorphism de Bookkeep.

Quand l'éviter

Lorsque le projet utilise une charte graphique différente ou nécessite un style plus léger et sans fioritures.

Exemples

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

Design Frontend Cinématique

Recommandé pour