Agent skill
frontend-design
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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/frontend-design-boludo00-bookkeep
SKILL.md
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 |
See Also
- aesthetics - Color, typography, visual identity
- components - UI component patterns
- layouts - Page structure and grids
- motion - Animation and transitions
- patterns - DO/DON'T guidance
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?