# 5 Skills for Better Vibe Coding Projects

> Abdul Osama (عبدول أسامة) recommends five Skills for Vibe Coding projects: Superpowers, Front-End Design, Security Review, React Best Practices, and Web Testing. Together, they address workflow, visual design, security checks, React code quality, and testing the finished site.

- By Abdul Osama (عبدول أسامة) — AI, marketing and business, in Arabic
- 5 October 2026
- URL: https://abdulosama.com/en/feed/five-vibe-coding-skills
- Video: https://abdulosama.com/feed/video/117
- Instagram: https://www.instagram.com/reel/DbAh0dws2e2/

## Key takeaways

- Superpowers helps structure the build and prompt useful questions.
- Front-End Design does not replace choosing your own design system, fonts, and colors.
- Security Review helps identify security mistakes and vulnerabilities.
- React Best Practices addresses React code; Web Testing checks the finished site.
- Abdul presents all five Skills as important, without ranking them.

## Which Skills does he recommend?

Abdul Osama (عبدول أسامة) recommends five Skills for a Vibe Coding project: Superpowers, Front-End Design, Security Review, React Best Practices, and Web Testing. They serve different purposes, from planning a build to checking the finished site; he does not rank one above the others.

> “They all matter.” — Abdul Osama

### What each Skill is for

| Skill | Its role in Abdul’s explanation |
| --- | --- |
| Superpowers | Provides a workflow that prompts the right questions and encourages a logical build, helping avoid problems caused by inexperience. |
| Front-End Design | Helps make a site look less like a generic AI-generated design. |
| Security Review | Helps find security vulnerabilities or mistakes in what you built so you can address them. |
| React Best Practices | Helps align React code with recommended practices. Abdul attributes it to Vercel. |
| Web Testing | Checks the site after you finish for errors you may have missed. |

Abdul stresses that Front-End Design is not a substitute for your own design work: create a design system, choose fonts and a color palette, and develop a distinctive concept. He attributes Front-End Design and Web Testing to Anthropic; verify the Skill names and publishers before looking for them.

## In numbers

- **5 Skills** covering different parts of building and checking a project.

## Background

Vibe Coding is an approach to software development in which someone describes what they want to an AI tool and reviews what it produces. A Skill, in this context, is guidance or a workflow used with a coding assistant. React is a library for building user interfaces; Vercel provides web development tools, while Anthropic develops AI models.

## What to do next

Organize the build, make deliberate design choices, review security and code quality, then test the finished site. Abdul also says viewers can reply to his post to request his list of Skills.

## Questions and answers

### What are the five Skills Abdul mentions?

Superpowers, Front-End Design, Security Review, React Best Practices, and Web Testing.

### Will Front-End Design make a site distinctive on its own?

No. Abdul says you still need to develop a design system and choose fonts, colors, and a distinctive concept.

### What does Security Review help with?

It helps identify security vulnerabilities or mistakes in what you built so you can address them.

### When should you use Web Testing?

After building the site, to check for errors you might have missed.

## Full transcript

خمس Skills ماينفعش تبني بيهم لو بتعمل Vibe Coding ومش أقول لك إن آخر واحدة أهم واحدة كلهم مهمين وأنا بحبش الحركة دي. أول واحدة Superpowers. Workflow محترم معمول من ناس شطرة في المجال ده من زمان عاملة لنفسها نظام إزاي بتبني. فهيجبرك إن أنت ترد على الأسئلة الصح وتبني بشكل منطقي عشان ما تقعش في مشاكل بسبب قلة خبرتك. التانية اسمها Front-End Design. ودي معمولة من Anthropik أصلاً وهتساعدك إنك إلى حد كبير تعمل حاجة مش AI Slop ما تعملش موقع شبه كل موقع اللي طالعة بس طبعاً لازم تجتهد زي ما قولنا قبل كده. عملك Design System بتاعك واختيار الفونتات وتميز نفسك بـ Color Palette محترمة وفكرة معينة. تالت واحدة Security Review. دي عشان لما تبني حاجة ما تبقىش مخارمة من كل النواحي. هي AI هيساعدك إلى حد ما تلاقي الـ Vulnerabilities أو الأخطاء الـ Security اللي أنت عاملها وتصلحها. رابع واحدة عشان كل الناس بتستخدم React. React هم مش عارفين فواحدة اسمها React Best Practices by Vercel رغم أنهم مقاطعة مش هنستخدم Vercel هنستخدم الحاجة بتاعتهم ونقول لهم هم تص. ومهمة جداً عشان هتخلي الكود بتاعك يمشي بالBest Practices بتاعت React. وبعد كده عندنا آخر واحدة اسمها Web Testing by Anthropik برضو. ودي لما تخلص هتستيلك الحاجة على الWeb عشان تطمن لو في أي أخطاء أنت مش شايفها لأنك مش هتستفصلح حالك. لو عايز لستة بكل الSkills دي ابعتلي رد وهبعتلك على الخاصن عبد القسامة. تابعنا عشان تعرف كل جديد في الزكاء الصناعي والتسويق.

---
Transcribed and written up with AI from the video; reviewed on request.