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.
.claude/skills/bilal140202-frontend-glassmorphism/SKILL.md| 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)| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 28,105 | 26,790 | -5% | 1 | 1 | 0% | 6,200 | 7,148 | +15% | 0 | 0 | — |
case-02 | fail→fail | 23,941 | 25,627 | +7% | 1 | 1 | 0% | 6,180 | 7,128 | +15% | 0 | 0 | — |
case-03 | fail→pass | 13,012 | 10,798 | -17% | 1 | 1 | 0% | 2,129 | 2,749 | +29% | 0 | 0 | — |
case-04 | pass→pass | 14,549 | 19,621 | +35% | 1 | 1 | 0% | 2,801 | 5,003 | +79% | 0 | 0 | — |
case-05 | pass→pass | 15,969 | 10,814 | -32% | 1 | 1 | 0% | 3,183 | 3,405 | +7% | 0 | 0 | — |
case-06 | pass→pass | 15,417 | 13,349 | -13% | 1 | 1 | 0% | 3,220 | 3,747 | +16% | 0 | 0 | — |
case-07 | pass→pass | 27,691 | 19,923 | -28% | 1 | 1 | 0% | 6,166 | 5,508 | -11% | 0 | 0 | — |
case-08 | fail→pass | 24,526 | 22,810 | -7% | 1 | 1 | 0% | 5,714 | 5,993 | +5% | 0 | 0 | — |
case-09 | pass→pass | 12,645 | 12,040 | -5% | 1 | 1 | 0% | 2,892 | 3,680 | +27% | 0 | 0 | — |
case-10 | pass→pass | 17,617 | 19,612 | +11% | 1 | 1 | 0% | 3,770 | 5,480 | +45% | 0 | 0 | — |
case-11 | fail→fail | 14,401 | 8,488 | -41% | 1 | 1 | 0% | 3,704 | 3,433 | -7% | 0 | 0 | — |
case-12 | pass→pass | 17,164 | 14,999 | -13% | 1 | 1 | 0% | 3,772 | 4,127 | +9% | 0 | 0 | — |
case-13 | fail→fail | 16,089 | 12,080 | -25% | 1 | 1 | 0% | 4,003 | 3,722 | -7% | 0 | 0 | — |
case-14 | pass→pass | 12,609 | 13,445 | +7% | 1 | 1 | 0% | 2,869 | 4,079 | +42% | 0 | 0 | — |
case-15 | pass→fail | 17,079 | 21,116 | +24% | 1 | 1 | 0% | 3,874 | 6,068 | +57% | 0 | 0 | — |
case-16 | pass→pass | 16,341 | 14,135 | -13% | 1 | 1 | 0% | 3,703 | 4,079 | +10% | 0 | 0 | — |
case-17 | pass→pass | 24,210 | 16,789 | -31% | 1 | 1 | 0% | 5,786 | 4,759 | -18% | 0 | 0 | — |
case-18 | pass→pass | 20,313 | 14,116 | -31% | 1 | 1 | 0% | 3,754 | 3,720 | -1% | 0 | 0 | — |
case-19 | pass→pass | 11,940 | 11,827 | -1% | 1 | 1 | 0% | 2,402 | 3,461 | +44% | 0 | 0 | — |
case-20 | pass→pass | 14,481 | 14,970 | +3% | 1 | 1 | 0% | 3,171 | 4,548 | +43% | 0 | 0 | — |
case-21 | pass→pass | 15,100 | 12,483 | -17% | 1 | 1 | 0% | 3,494 | 4,236 | +21% | 0 | 0 | — |
case-22 | pass→pass | 9,613 | 7,185 | -25% | 1 | 1 | 0% | 2,064 | 2,507 | +21% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +5 percentage points is the difference between those two pass rates over the 22 comparable cases. 2 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.