agentsclimarketplace

Persian engineering corporate site

Skill mhrsdev/AI-Agent-Skills-Library/organized-skills/website-business-builds/persian-engineering-corporate-site

A curated library of 124 AI agent skills organized into 10 categories, with model-specific versions for Claude, GPT-5.5, GPT-5.4 and earlier, GLM, and DeepSeek.

Install
npx -y skills add mhrsdev/AI-Agent-Skills-Library --skill persian-engineering-corporate-site

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

راهنمای عملی طراحی و توسعه سایت شرکتی فارسی برای شرکت‌های مهندسی، معماری، مشاور، ساخت‌وساز و خدمات فنی با HTML/CSS/Vanilla JS، بر اساس تجربه پروژه نقش و هنر مهرسام.

The file declares its own license as Internal project guidance. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

15.0 KB, as published. Nobody here has run it

Persian Engineering Corporate Site

این Skill برای ساخت سایت‌های شرکتی فارسی، راست‌به‌چپ و سبک برای شرکت‌های مهندسین مشاور، معماری، عمران، برق، مکانیک، ساخت‌وساز و خدمات فنی است؛ مخصوصاً وقتی فاز اول پروژه بدون بک‌اند، بدون پنل و بدون فریم‌ورک انجام می‌شود.

1. هدف Skill

از این Skill استفاده کن وقتی پروژه شبیه این موارد است:

  • سایت شرکتی فارسی برای معرفی خدمات و اعتمادسازی اولیه.
  • شرکت مهندسین مشاور یا مجموعه معماری/عمران/تأسیسات.
  • landing corporate یا سایت تک‌صفحه‌ای.
  • فاز اول بدون بک‌اند، دیتابیس، CMS و پنل مدیریت.
  • پروژه‌ای که باید سریع، قابل ارائه، سبک و قابل توسعه بماند.

2. اصول کلی پروژه

  • اول یک فرانت‌اند استاتیک تمیز بساز؛ بک‌اند، دیتابیس، پنل و سئوی کامل را همزمان شروع نکن.
  • مرحله‌ای کار کن: ساختار، طراحی، محتوا، رفتارهای JS، تست، سپس polish.
  • برای مدل‌ها یا agentهای محدود، task را کوچک و دقیق بده.
  • قبل از تغییرات بزرگ، حتماً index.html، assets/css/style.css، assets/js/main.js و README.md را بخوان.
  • ساختار موجود را خراب نکن؛ تغییرات را با الگوهای فعلی مثل CSS variables، کلاس‌های theme و Vanilla JS هماهنگ کن.

3. تکنولوژی پیشنهادی فاز اول

استفاده شود:

  • HTML semantic
  • CSS معمولی با variables و media query
  • Vanilla JS سبک

استفاده نشود مگر کاربر صریحاً مهاجرت بخواهد:

  • React / Next.js / TypeScript
  • Tailwind / shadcn / Bootstrap
  • PHP / MySQL / backend / CMS
  • npm package یا کتابخانه خارجی برای رفتارهای ساده

اگر کاربر کامپوننت React داد، فقط زبان بصری آن را با HTML/CSS/JS بازسازی کن؛ پروژه را مهاجرت نده.

4. ساختار فایل پیشنهادی

index.html
assets/
  css/
    style.css
  js/
    main.js
  images/
  videos/        # فقط اگر فایل واقعی وجود دارد
README.md
  • فایل‌های نهایی را داخل assets نگه دار، نه docs یا مسیرهای موقت.
  • نام فایل تصویر/ویدیو بدون فاصله و پایدار باشد.
  • اگر رسانه آماده نیست، مسیر آن را در README بنویس ولی در UI باعث 404 نشو.

5. طراحی بصری مناسب

  • حس کلی: رسمی، مهندسی، premium، قابل اعتماد و دقیق.
  • رنگ‌های موفق در این پروژه: زغالی/مشکی، سفید، off-white، خاکستری، نارنجی برند.
  • نارنجی برای CTA، نقاط تأکید، line drawing و نشانه‌های ساخت‌وساز مناسب است.
  • dark theme خوب است، اما اگر light/dark داریم همه اجزا باید در هر دو تم خوانا باشند؛ حتی preloader.
  • glass effect را محدود و هدفمند استفاده کن؛ زیاده‌روی باعث خروجی خام AI می‌شود.
  • از گرادیان‌ها، سایه‌ها و glowهای تکراری و شلوغ پرهیز کن.
  • سایت نباید شبیه قالب ارزان، demo یا اسکلت نیمه‌کاره دیده شود.

6. تایپوگرافی فارسی

  • فونت فارسی پیشنهادی: Vazirmatn، Estedad، IRANSansX، Dana.
  • fallback مناسب:
--font-fa: "Vazirmatn", "Estedad", "IRANSansX", "Dana", "Tahoma", sans-serif;
--font-en: "Inter", "Plus Jakarta Sans", "Arial", sans-serif;
  • بهتر است فونت‌ها با preconnect و link در HTML لود شوند؛ @import داخل CSS قابل قبول است اما ایده‌آل نیست.
  • h1 باید بزرگ و مطمئن باشد، نه له‌شده یا بیش از حد کشیده؛ برای دسکتاپ و موبایل جدا کنترل شود.
  • line-height متن فارسی معمولاً بین 1.7 تا 1.95 خوب جواب می‌دهد.
  • متن انگلیسی یا عددی کلاس جدا داشته باشد؛ مثل .en-text و .numeric.
  • منوها و دکمه‌ها ریز و بی‌هویت نباشند؛ وزن و اندازه باید حس شرکتی بدهد.

7. معماری سکشن‌ها

  • Header: برند، ناوبری، theme toggle. Settings اضافه نکن مگر واقعاً قابلیت دارد.
  • Hero: پیام اصلی، CTA اصلی و ثانویه، تصویر/گرید/فرم مهندسی.
  • About: معرفی کوتاه و واقعی؛ متن طولانی رزومه‌ای نگذار.
  • Services: خدمات اصلی با متن قابل ارائه، نه placeholder.
  • Work Process: فقط اگر ترتیب واقعی دارد؛ شماره‌گذاری وقتی معنا دارد.
  • Trust / Credentials: سال تأسیس، حوزه‌ها، اطلاعات واقعی.
  • Projects / Portfolio: اگر نمونه‌کار واقعی نیست، صادقانه به عنوان بخش آینده طراحی شود اما متن visible نباید «placeholder» باشد.
  • Contact: تلفن، آدرس، لینک‌های واقعی.
  • Footer: کپی‌رایت و لینک بازگشت/اطلاعات پایه.

8. Hero Section

  • تیتر باید قوی، قابل اعتماد و مستقیم باشد؛ مثل «طراحی، نظارت و مشاوره مهندسی ساختمان».
  • CTA اصلی: درخواست مشاوره یا تماس.
  • CTA ثانویه: مشاهده خدمات یا روند همکاری.
  • فضای خالی کافی بده؛ هرچیز را داخل hero نریز.
  • پس‌زمینه می‌تواند تصویر پروژه، گرید معماری، پلان یا فرم خطی باشد.
  • موبایل فقط نسخه کوچک‌شده دسکتاپ نیست: تیتر، فاصله‌ها و دکمه‌ها را جدا تنظیم کن.

9. دکمه‌ها و سیستم CTA

  • همه دکمه‌ها باید یک سیستم مشترک داشته باشند.
  • primary: نارنجی برند برای درخواست مشاوره.
  • secondary: glass/outline برای مشاهده خدمات.
  • nav buttons می‌توانند pill/glass باشند.
  • حداقل ارتفاع لمس موبایل: 44px.
  • hover، active و focus-visible واضح باشد.
  • دکمه یا لینک غیرواقعی نساز؛ Settings یا لینک شبکه اجتماعی بدون مقصد واقعی اضافه نکن.

10. Dark / Light Theme

  • برای هر رنگ در CSS variable تعریف کن و حالت light را جدا تست کن.
  • theme toggle ساده باشد و preference در localStorage ذخیره شود.
  • loader، کارت‌ها، CTAها، header، footer و متن‌ها باید در هر دو تم کنتراست کافی داشته باشند.
  • اگر preloader قبل از JS اصلی دیده می‌شود، اسکریپت inline کوتاه باید تم ذخیره‌شده/سیستمی را زود روی body.dataset.theme اعمال کند.

11. موبایل واقعی / Mobile-first

  • فقط responsive کافی نیست؛ mobile-first فکر کن.
  • منوی موبایل باید لمس‌پذیر، ساده و با aria-expanded باشد.
  • کارت‌ها در موبایل یک ستونه و خوانا شوند.
  • فاصله سکشن‌ها در موبایل کوتاه‌تر و منظم‌تر شود.
  • CTAها در موبایل اغلب تمام‌عرض بهترند.

12. انیمیشن‌ها و Preloader

  • انیمیشن‌ها سبک، رسمی و مرتبط با معماری باشند.
  • preloader مناسب: line drawing ساختمان، گرید پلان، مونوگرام خطی یا blueprint.
  • مدت مناسب حدود 1.2s تا 2s است.
  • از stroke-dasharray و stroke-dashoffset برای SVG line drawing استفاده کن.
  • بعد از window.load کلاس is-loaded را به body اضافه کن و loader را hidden/remove کن.
  • fail-safe بگذار تا سایت گیر نکند.
  • prefers-reduced-motion را رعایت کن و loader را حذف/ساده کن.
  • برای preloader از ویدیو، canvas، WebGL یا کتابخانه خارجی استفاده نکن مگر واقعاً لازم باشد.

13. ویدیو و رسانه

  • اگر ویدیو آماده نیست، video فعال با مسیر غیرواقعی نگذار که 404 بسازد.
  • ایده ویدیو را در README ثبت کن، اما سایت را بدون فایل واقعی وابسته نکن.
  • ویدیو در سایت شرکتی می‌تواند حجم، پیچیدگی و مشکل performance ایجاد کند.
  • اگر ظاهر بدون ویدیو خوب است، حذف ویدیو بهتر از placeholder ضعیف است.
  • هر رسانه fallback داشته باشد.

14. محتوای فارسی و کپی‌رایتینگ

  • متن visible نباید شامل skeleton، placeholder، demo، next phase یا «اسکلت» باشد.
  • حتی در فاز اول، صفحه باید قابل ارائه به مشتری دیده شود.
  • متن خدمات را خاص‌تر از «خدمت برای تکمیل بعدی» بنویس.
  • مزیت رقابتی واقعی شرکت را برجسته کن: دقت، هماهنگی بین رشته‌ها، نظارت، محاسبات.
  • ادعای جعلی درباره پروژه، مجوز، مشتری یا testimonial نساز.

15. اعتمادسازی

موارد مناسب:

  • سال تأسیس واقعی.
  • حوزه‌های تخصصی: معماری، عمران، برق، مکانیک.
  • خدمات اصلی.
  • شماره تماس و آدرس واقعی.
  • واتساپ با لینک واقعی.
  • پروژه‌ها و مجوزها فقط اگر داده واقعی وجود دارد.
  • از آمارسازی جعلی خودداری کن.

16. لینک‌ها و تماس

  • تلفن: href="tel:021...".
  • واتساپ: https://wa.me/98... با شماره بین‌المللی.
  • href="#" برای لینک واقعی نگذار؛ اگر مقصد نداریم، لینک را حذف یا غیرفعال و شفاف کن.
  • آدرس را داخل <address> قرار بده.

17. Accessibility Checklist

  • lang="fa" و dir="rtl".
  • aria-label برای nav و دکمه‌های مهم.
  • aria-expanded برای منوی موبایل.
  • Escape برای بستن منو اگر منوی overlay دارد.
  • focus-visible قابل مشاهده.
  • alt مناسب برای تصاویر مهم؛ تصاویر تزئینی alt="" و aria-hidden="true".
  • preloader نباید focus بگیرد؛ برای محتوای اصلی می‌توان موقتاً inert استفاده کرد.
  • smooth scroll با prefers-reduced-motion هماهنگ شود.

18. Performance

  • استاتیک و سبک نگه دار.
  • فونت‌ها با preconnect/link بهتر لود شوند.
  • تصاویر بهینه، نام تمیز و مسیر پایدار داشته باشند.
  • ویدیوهای غیرضروری حذف شوند.
  • Console نباید خطای 404 برای asset آماده‌نشده داشته باشد.
  • تست محلی بهتر است با localhost یا Live Server باشد، نه صرفاً file://.

19. تست و ارزیابی

  • Console را بررسی کن.
  • Lighthouse: Performance، Accessibility، Best Practices، SEO.
  • موبایل را با DevTools تست کن.
  • dark/light را برای تمام سکشن‌ها، دکمه‌ها و loader بررسی کن.
  • منوی موبایل، لینک‌ها و tel/wa.me را تست کن.
  • متن‌های placeholder را قبل از تحویل حذف کن.

20. الگوی کار با AI Agent

  • taskها را کوچک و مرحله‌ای بده.
  • همزمان نگویید «شروع نکن» و «شروع کن».
  • صریح بگو پروژه HTML/CSS/Vanilla JS است و مهاجرت به React انجام نشود.
  • اگر component آماده React داده شد، فقط از سبک آن الهام بگیرد.
  • قبل از تغییرات، فایل‌های فعلی خوانده شوند.
  • بعد از هر مرحله گزارش بدهد چه فایل‌هایی تغییر کردند.
  • Auto-approve commands با احتیاط؛ دستورهای حذف/نصب نیازمند دقت‌اند.
  • اگر agent وارد loop شد، task جدید کوتاه‌تر و محدودتر بده.

21. Prompt Templateهای کوتاه

اسکلت اولیه

یک سایت شرکتی فارسی RTL برای شرکت مهندسی بساز. فقط HTML/CSS/Vanilla JS. بدون React/Tailwind/npm. سکشن‌ها: Header, Hero, About, Services, Process, Trust, Contact, Footer.

اصلاح تایپوگرافی

تایپوگرافی فارسی سایت را بررسی و اصلاح کن: font fallback، h1، line-height، دکمه‌ها و منوها. ساختار HTML را بی‌دلیل تغییر نده.

یکپارچه‌سازی دکمه‌ها

سیستم CTA را یکپارچه کن: primary نارنجی، secondary glass/outline، focus-visible، hover، active و حداقل ارتفاع 44px.

حذف ویدیو آماده‌نشده

اگر video یا asset آماده‌نشده باعث 404 می‌شود، آن را از UI فعال حذف کن و فقط برنامه آینده را در README ثبت کن.

اضافه کردن preloader

یک preloader سبک معماری با SVG inline و line drawing اضافه کن. مدت 1.2 تا 2 ثانیه، حذف پس از window load، fail-safe، سازگار با dark/light و prefers-reduced-motion.

تست و cleanup نهایی

پروژه را برای Console errors، dark/light، موبایل، لینک‌ها، accessibility و نبودن placeholder بررسی کن. فقط HTML/CSS/Vanilla JS.

22. خروجی نهایی مورد انتظار

  • سایت باید بدون dependency اضافه اجرا شود.
  • ساختار فایل ساده و قابل نگهداری باشد.
  • تم و loader در dark/light خوب دیده شوند.
  • متن visible قابل ارائه به مشتری باشد.
  • README تصمیم‌های آینده مثل ویدیو یا مهاجرت احتمالی را شفاف ثبت کند.
  • هیچ feature جعلی یا لینک بی‌مقصد به عنوان قابلیت واقعی نمایش داده نشود.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.