An AI skill is a structured system prompt or set of custom instructions that gives AI assistants like ChatGPT, Claude, and Gemini specialized capabilities. It includes a clear role definition, specific knowledge areas, step-by-step processes, and quality criteria that help AI perform specific professional tasks.

How does Skill This work?

Simply describe your professional expertise in plain text. Our free AI skill generator analyzes your input and transforms it into a structured system prompt. The skill is then graded on clarity, specificity, and usefulness. You can share your skill via a unique URL or copy it to use as custom instructions with any AI assistant like ChatGPT, Claude, or Gemini.

Is Skill This free to use?

Yes, Skill This is completely free. No account or payment is required. You can create unlimited skills and share them with anyone.

How is my skill graded?

Skills are graded on a scale from A+ to F (0-100 points). The grade reflects how clear, specific, and actionable your skill is. Higher grades indicate skills that AI assistants can use more effectively.

How do I use my skill with an AI assistant?

Copy your generated skill and paste it into the system prompt or custom instructions of any AI assistant. For ChatGPT, use Personalization > Custom Instructions. For Claude, add it to a Project's instructions. For Cursor or other IDEs, save it as a .cursorrules or CLAUDE.md file. The AI will then adopt that skill and perform tasks according to your expertise.

AI Skill Report Card

Designing Glassmorphism UI

B+76·Aug 12, 2026·Source: Extension-selection

Quick Start14 / 15

CSS
.glass-panel {
  /* 1. Backdrop Blur */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* 2. Background Opacity & Color */
  background: rgba(255, 255, 255, 0.2);

  /* 3. Specular Border */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 4. Border Radius */
  border-radius: 16px;

  /* 5. Box Shadow */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);

  /* 6. Texture Grain (optional overlay layer) */
  position: relative;
}

.glass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('noise.png');
  opacity: 0.05;
  border-radius: inherit;
  pointer-events: none;
}

Recommendation▾

Mixed language usage (Thai for workflow/pitfalls, English for code/frontmatter) reduces accessibility and consistency—standardize on one language throughout the skill for broader usability.

Workflow12 / 15

Progress:

Step 1: กำหนดโหมดดีไซน์ (Light Mode / Dark Mode / Tactical Mode)
Step 2: ตั้งค่า Backdrop Blur ให้เหมาะกับพื้นหลัง
Step 3: เลือกสีและความทึบของแผ่นกระจก (rgba)
Step 4: เพิ่ม Specular Border เพื่อจำลองแสงหักเหขอบกระจก
Step 5: กำหนด Border Radius ตามสไตล์ (มนหรือเหลี่ยม)
Step 6: ใส่ Box Shadow เพื่อสร้างมิติความลอย
Step 7: เพิ่ม Noise/Grain Texture เพื่อความสมจริง (ทางเลือก)
Step 8: ทดสอบ contrast ของข้อความ/ไอคอนบนพื้นกระจกให้อ่านง่าย

รายละเอียดแต่ละ Step

Step 1 — เลือกโหมด:

Light Mode → พื้นหลังสว่าง สะอาดตา
Dark/Tactical Mode → พื้นหลังดำ-เทา เน้นตัวอักษรเรืองแสง

Step 2 — Backdrop Blur:

ค่าแนะนำ: 8px (บาง, subtle) ถึง 16px (หนา, ฝ้าชัด)
ยิ่งเบลอมาก ยิ่งเห็นพื้นหลังเลือนราง เหมาะกับ overlay ที่ต้องการซ่อนรายละเอียดด้านหลัง

Step 3 — Background Color/Opacity:

Dark/Tactical: rgba(18, 20, 19, 0.75) — ตัดกับตัวอักษรเรืองแสง เช่น #CEDE62
Light: rgba(255, 255, 255, 0.2) — โปร่งแสงสูง ดูคลีน

Step 4 — Specular Border:

ใช้ border: 1px solid rgba(255,255,255,0.15–0.3)
จุดประสงค์: แยกแผงออกจากพื้นหลังเข้ม (เช่น #040404) โดยไม่แย่งซีน

Step 5 — Border Radius:

โมเดิร์น/ซอฟต์แวร์ทั่วไป: 12px–24px
Tactical/ทหาร: 4px–8px + Decorative Corner Marks (เช่น เส้นมุมสั้น ๆ ที่ 4 มุม)

Step 6 — Box Shadow:

เงาลอย: box-shadow: 0 8px 32px rgba(0,0,0,0.25);
เงาเรืองแสง (เน้นจุดสำคัญ): box-shadow: 0 0 20px rgba(206,222,98,0.4);

Step 7 — Noise/Grain Texture:

ใช้ pseudo-element (::before/::after) วาง noise.png หรือ SVG fractal noise ทับ opacity ต่ำ (0.03–0.08)
ห้ามให้ noise แย่ง contrast ของเนื้อหา

Step 8 — ตรวจสอบ Readability:

เช็คค่า contrast ของข้อความกับพื้นกระจกที่เบลอ+โปร่งแสง โดยเฉพาะบนพื้นหลังที่มีรูปภาพซับซ้อน

Recommendation▾

The workflow checklist steps are somewhat generic (standard CSS property tuning); could add more decision logic/branching (e.g., 'if background is high-contrast photo, increase opacity to X') rather than just listing steps.

Examples15 / 20

Example 1: Tactical/Dark HUD Panel Input: ต้องการแผงควบคุมสไตล์ทหาร บนพื้นหลังดำสนิท #040404 ตัวเลขสีเขียวมะนาว #CEDE62 Output:

CSS
.tactical-panel {
  backdrop-filter: blur(10px);
  background: rgba(18, 20, 19, 0.75);
  border: 1px solid rgba(206, 222, 98, 0.15);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 12px rgba(206,222,98,0.15);
  color: #CEDE62;
  position: relative;
}
/* Corner marks */
.tactical-panel::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px solid rgba(206,222,98,0.2);
  border-radius: 2px;
  pointer-events: none;
}

Example 2: Clean Light Mode Card Input: การ์ดข้อมูลสไตล์โมเดิร์น บนพื้นหลังไล่สีพาสเทล Output:

CSS
.light-glass-card {
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

Recommendation▾

Add a light-mode vs dark-mode comparison example with a 'bad' output (e.g., low-opacity glass on busy background causing readability failure) to reinforce the pitfalls section with concrete before/after evidence.

Best Practices

ใช้ -webkit-backdrop-filter คู่กับ backdrop-filter เสมอเพื่อรองรับ Safari
ตรวจสอบ fallback สำหรับ browser ที่ไม่รองรับ backdrop-filter — ให้กำหนด background ทึบสำรอง
อย่าใช้ blur สูงเกิน 20px บนพื้นที่ขนาดใหญ่ เพราะกิน performance (GPU-heavy)
ให้ธีมสีของ border/shadow เข้ากับโทนหลักของ UI (เช่น neon accent ใน tactical mode)
ใส่ noise/grain เบามาก ๆ — เป้าหมายคือ texture ไม่ใช่ pattern ที่สังเกตเห็นชัด
ทดสอบบนพื้นหลังหลายแบบ (ภาพถ่าย, gradient, solid color) เพื่อดูว่ากระจกยังดูดีในทุกสถานการณ์

Common Pitfalls

Contrast ต่ำเกินไป: background opacity ต่ำเกินไปบนพื้นหลังซับซ้อนทำให้ข้อความอ่านไม่ออก — เพิ่ม opacity หรือเพิ่ม blur
ลืม vendor prefix: ไม่ใส่ -webkit-backdrop-filter ทำให้เอฟเฟกต์ไม่ขึ้นบน Safari/iOS
Border หนาเกินไป: ทำให้ดูเหมือนกรอบทึบธรรมดา ไม่ใช่ขอบสะท้อนแสงกระจก — ควรบางและโปร่งแสงสูง
ผสมสไตล์มุมผิด context: ใช้มุมมนมากในธีม tactical ทำให้ดูขัดกับความดุดันที่ต้องการ
Noise หนักเกินไป: ทำให้ดู noisy/สกปรกแทนที่จะดูมีพื้นผิวธรรมชาติ
ใช้ blur มากเกินจำเป็นบนหลายเลเยอร์ซ้อนกัน: ทำให้ performance ตกบนมือถือ/อุปกรณ์สเปกต่ำ