Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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.
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-03 | ✗→✓ | ▲ Improved | 29% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 5% | 0% |
| case-15 | ✓→✗ | ▼ Worse | 57% | 0% |
| case-04 | ✓→✓ | ＝ Same ✓ | 79% | 0% |
| case-05 | ✓→✓ | ＝ Same ✓ | 7% | 0% |
Bu skill, modern SaaS landing page ve UI bileşenlerini glassmorphism estetiğiyle üretmek için kurallar ve şablonlar sağlar.
backdrop-blur + yarı şeffaf beyaz/siyah katmanÖnerilen Tailwind pattern:
bg-white/5 veya bg-black/20backdrop-blur-xlborder border-white/10shadow-2xl shadow-black/20rounded-2xl1) Kullanıcı “sadece tasarım konsepti” istiyorsa:
resources/prompt-templates.md içinden uygun prompt şablonu ver2) Kullanıcı “kod” istiyorsa:
examples/ dosyalarına benzer şekilde TSX bileşeni üretresources/tokens.json ile uyumlu tut3) Kullanıcı “tam landing page” istiyorsa:
4) Kullanıcı “performans” diyorsa:
Skill içindeki scriptler “black box”tır:
--help çalıştırScriptler:
scripts/check-ui.sh: proje içinde UI hygiene check (opsiyonel)scripts/generate-component.ts: örnek bileşen şablonu üretir (opsiyonel)Other measured skills in the registry, with their headline benchmark lift.