frontend-glassmorphism
Generates aesthetic glassmorphism UI components with optimized Tailwind CSS patterns.
Install
mkdir -p .claude/skills/frontend-glassmorphism && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13800" && unzip -o skill.zip -d .claude/skills/frontend-glassmorphism && rm skill.zipInstalls to .claude/skills/frontend-glassmorphism
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Builds premium glassmorphism (3D-like, soft blur) frontend UI components and landing pages using React/Next.js + Tailwind conventions. Use when designing modern SaaS pages, hero sections, pricing, navbars, feature grids, and animations with accessible contrast and performance constraints.Key capabilities
- →Generate glassmorphism UI components
- →Build SaaS landing pages with glassmorphism aesthetics
- →Ensure accessible contrast and typography for readability
- →Produce React/Next.js + Tailwind compatible code
- →Optimize for performance by using measured blur and shadows
- →Implement semantic HTML tags for accessibility
How it works
The skill applies design principles for glass surfaces, color, contrast, typography, and layout, then generates React/Next.js + Tailwind code following specific coding rules and an internal decision tree.
Inputs & outputs
When to use frontend-glassmorphism
- →Building hero sections
- →Creating pricing cards
- →Designing modern SaaS dashboards
About this skill
Frontend Glassmorphism Skill
Bu skill, modern SaaS landing page ve UI bileşenlerini glassmorphism estetiğiyle üretmek için kurallar ve şablonlar sağlar.
Ne zaman kullanılır?
- “Landing page”, “hero”, “pricing”, “features”, “navbar”, “CTA”, “dashboard UI” gibi isteklerde
- “3D glassmorphism”, “blur”, “frosted glass”, “neon”, “soft shadow”, “premium UI” gibi ifadeler geçtiğinde
- UI üretimi istenirken tasarım dili + kod kalitesi birlikte istendiğinde
Çıktı hedefleri
- Görsel kalite: premium, yormayan, modern
- Okunabilirlik: kontrast, tipografi, spacing
- Uygulanabilir kod: React/Next.js + Tailwind ile copy/paste çalışır
- Performans: blur ve gölgeler ölçülü, gereksiz animasyon yok
- Erişilebilirlik: buton/Link states, focus ring, semantik yapı
Tasarım İlkeleri (Glassmorphism Standardı)
A) Cam katman (glass surface)
- Arka plan: gradient + yumuşak noise hissi
- Kart:
backdrop-blur+ yarı şeffaf beyaz/siyah katman - Border: ince ve yarı saydam (ışık kırılması efekti)
- Shadow: soft, çok yayık, “floating” hissi
Önerilen Tailwind pattern:
bg-white/5veyabg-black/20backdrop-blur-xlborder border-white/10shadow-2xl shadow-black/20rounded-2xl
B) Renk ve kontrast
- Metin kontrastı “cam üstünde” okunacak şekilde ayarlanmalı
- Minimum: body metinlerinde yeterli kontrast
- Parlak neon sadece vurgu (accent) olarak kullanılmalı
C) Tipografi ve hiyerarşi
- Hero başlık: büyük, kısa, net
- Alt metin: 2-3 satır, fayda odaklı
- CTA: 1 ana + 1 ikincil
D) Layout
- Grid tabanlı düzen (12-col veya 2/3 kolon)
- Bol whitespace
- Kartlar arası tutarlı spacing
Kod Kuralları (Frontend)
- React bileşenleri: tek sorumluluk
- Tailwind: className’ler aşırı şişmesin, gerektiğinde yardımcı fonksiyon kullanılabilir
- State yönetimi gerekiyorsa minimal
- Animasyon: framer-motion kullanımı varsa kontrollü
- Her bileşende:
- hover/focus/active state
- mobile responsive
- semantik tag (nav, header, main, section)
İş Akışı (Decision Tree)
- Kullanıcı “sadece tasarım konsepti” istiyorsa:
resources/prompt-templates.mdiçinden uygun prompt şablonu ver
- Kullanıcı “kod” istiyorsa:
examples/dosyalarına benzer şekilde TSX bileşeni üret- Tailwind tokenlarını
resources/tokens.jsonile uyumlu tut
- Kullanıcı “tam landing page” istiyorsa:
- Hero + Social proof + Features + Pricing + FAQ + CTA bloklarını üret
- Her blok glass kart temasıyla tutarlı olsun
- Kullanıcı “performans” diyorsa:
- Blur seviyesini azalt, gölgeleri sadeleştir, animasyonları minimuma indir
Script Kullanımı
Skill içindeki scriptler “black box”tır:
- Önce
--helpçalıştır - Sonra amaca uygun parametrelerle kullan
Scriptler:
scripts/check-ui.sh: proje içinde UI hygiene check (opsiyonel)scripts/generate-component.ts: örnek bileşen şablonu üretir (opsiyonel)
Çıktı Formatı
- Kod istenirse: tek bir TSX dosyası veya bileşen blokları
- Tasarım yönergesi istenirse: bullet list + tokenlar + örnek className pattern’leri
- Gereksiz uzun açıklama yok, direkt kullanılabilir çıktı
When not to use it
- →When the user does not explicitly request glassmorphism design
- →When the target framework is not React/Next.js + Tailwind
- →When the user prioritizes raw performance over visual style
Limitations
- →The skill is for building glassmorphism frontend UI components and landing pages.
- →It uses React/Next.js + Tailwind conventions.
- →It ensures accessible contrast and performance constraints.
How it compares
This skill provides a structured approach to building glassmorphism interfaces with predefined design principles and code rules for React/Next.js + Tailwind, ensuring visual quality, readability, and performance, unlike a generic UI builder
Compared to similar skills
frontend-glassmorphism side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| frontend-glassmorphism (this skill) | 0 | 6mo | Review | Intermediate |
| ui-styling | 12 | 9mo | Review | Beginner |
| web-design-reviewer | 7 | 7mo | No flags | Intermediate |
| design-lab | 7 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
design-lab
0xdesign
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.
frontend-design-pro
claudekit
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.
tailwindcss-development
spatie
Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
frontend-enhancer
ailabs-393
This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.