skills.rest
boludo00
boludo00COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate React/TypeScript frontend interfaces with a cinematic dark theme and glassmorphism.

80|8|Updated Jan 15, 2026
Search Tags:#react#tailwind css#frontend development#ui design#glassmorphism#cinematic theme
One-click install
npx skills add https://github.com/boludo00/bookkeep --skill frontend-design-boludo00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/boludo00/bookkeep/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/boludo00/bookkeep --skill frontend-design-boludo00

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides the foundational design principles and code snippets to create visually stunning, production-ready frontend interfaces that align with Bookkeep's distinct cinematic dark theme and glassmorphism aesthetic.

Core Features & Use Cases

  • Visual Language Enforcement: Ensures new components and pages adhere to the established design system.
  • Component Snippets: Offers ready-to-use React/TypeScript code for common UI patterns like glassmorphic cards, status badges, and interactive elements.
  • Design Token Guidance: Details the color palette, typography, and spacing to maintain consistency.
  • Use Case: When building a new book detail page, use this Skill's guidance to implement the hero book cover with glow effects, the cinematic dark background, and appropriately styled information cards.

Quick Start

Apply the 'glass' class to a div to give it a subtle glassmorphism effect.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement glassmorphism effects in React and Tailwind CSS?▼

To implement glassmorphism in React and Tailwind CSS, apply the 'glass' class to a div to create a subtle glassmorphic effect. This approach provides production-ready UI components with a cinematic dark theme and jewel-tone accents.

What is a cinematic UI theme and how does it use jewel tones?▼

A cinematic UI theme uses a dark background with jewel-tone accents and glassmorphism to create visually stunning interfaces. It emphasizes visual hierarchy through reusable React/TypeScript components and specific design tokens.

How do I enforce design tokens for consistent frontend development?▼

Enforce design tokens by applying predefined color palettes, typography, and spacing details to maintain visual consistency. This ensures new components adhere to the established design system and visual hierarchy during frontend development.

Can I use TypeScript with these UI design component snippets?▼

Yes, you can use TypeScript with these UI design component snippets. The Skill provides ready-to-use React/TypeScript code for common UI patterns like glassmorphic cards, status badges, and interactive elements.

What's the best way to structure a book detail page with a dark theme?▼

The best way to structure a book detail page with a dark theme is to implement a hero book cover with glow effects, a cinematic dark background, and appropriately styled information cards using the provided React and TypeScript snippets.

Related Skills

Explore More Design & Creative Skills→
wredziowredzio

tailwind-v4-shadcn

Configure Tailwind v4 theming with shadcn/ui in React + Vite projects.

Community
Advanced
monch1962monch1962
3

frontend-patterns

Provides reusable React and Next.js frontend patterns for UI architecture.

Community
Intermediate
mklozmkloz

frontend-product-ui-engineer

Build React UI components with Tailwind CSS and state management.

Community
Advanced
sanky369sanky369
29

component-architecture

Design reusable React TypeScript Tailwind components with Atomic Design.

Community
Basic