راهنما

نصب، انتخاب و استفاده

هر اسکیل تیست‌فولیو یک پوشهٔ مستقل با فایل SKILL.md است. دستیار کدنویسی پیش از ساختن رابط کاربری آن را می‌خواند و از توکن‌ها، قواعد چیدمان، مشخصات کامپوننت‌ها و چک‌لیست همان سبک پیروی می‌کند.

۱. نصب

یکی از روش‌های زیر را انتخاب کنید. نام هر اسکیل همان نام پوشهٔ آن است (مثلاً switchboard).

/plugin marketplace add tastefolio/tastefolio.github.io
/plugin install switchboard@tastefolio

npx skills add tastefolio/tastefolio.github.io --skill switchboard

curl -L https://tastefolio.github.io/downloads/switchboard.zip -o switchboard.zip
unzip switchboard.zip -d .claude/skills/

پوشه را جایی بگذارید که دستیار بتواند بخواند و در AGENTS.md یا قوانین ابزار به آن ارجاع دهید:
"Follow skills/switchboard/SKILL.md for every UI change."

فقط برای یک پروژه: پوشه را در .claude/skills/<name> داخل همان پروژه بگذارید و کامیت کنید تا هم‌تیمی‌ها هم داشته باشند.
برای همهٔ پروژه‌ها: پوشه را در ~/.claude/skills/<name> بگذارید.
همه با هم: /plugin install tastefolio-all@tastefolio همهٔ سبک‌ها را نصب می‌کند؛ اما در هر پروژه فقط یکی را به کار ببرید.

۲. انتخاب سبک

از نوع محصول شروع کنید، نه از رنگ. رنگ برند در همهٔ سبک‌ها قابل تغییر است؛ چیزی که سبک‌ها را از هم جدا می‌کند منطق چیدمان، تراکم اطلاعات، تایپوگرافی، ناوبری و رفتار تعامل‌هاست.

سبک	بهترین کاربرد	دسته	حالت / تراکم
Switchboard	ابزارهای حریم خصوصی، امنیت و فیلترینگ، SaaS و کنسول‌هایی با تنظیمات زیاد	محصول و SaaS	روشن · متعادل
Hearth	محصولات شبکه، اینترنت اشیا و زیرساخت، پلتفرم‌های توسعه‌دهنده‌ای که می‌خواهند انسانی به نظر برسند	محصول و SaaS	روشن · فشرده
Atelier	صفحه‌های معرفی و لانچ که باید پریمیوم باشند، ابزارهای خلاق، استودیوها و آژانس‌ها	برند و سبک زندگی	روشن · دلباز
Stratus	پلتفرم‌های ابری، لجستیک و B2B با محصولات متعدد، پورتال‌ها و کنسول‌های سازمانی فارسی و عربی	ابر و زیرساخت	روشن · متعادل
Ultraviolet	محصولات GPU، ابر و زیرساخت هوش مصنوعی، پلتفرم‌های توسعه‌دهنده و CLI با سایت معرفی	ابر و زیرساخت	تیره · متعادل
Tier	هاست، دامنه، VPN و اشتراک‌های SaaS، طرح‌های اینترنت، اپراتور و بیمه	فروشگاه و مارکت‌پلیس	روشن · متعادل
Datasheet	فروشگاه‌های قطعات الکترونیک، صنعتی و تجهیزات آزمایشگاهی، کاتالوگ‌های B2B با هزاران کالا و مشخصات	فروشگاه و مارکت‌پلیس	روشن · فشرده
Sideload	سایت‌های دانلود نرم‌افزار، فونت، قالب و منابع، وبلاگ‌های آموزشی و پایگاه دانش با ستون کناری	محتوا و رسانه	روشن · فشرده
Shelf	فروشگاه اپ، بازی و رسانه، کاتالوگ‌های مصرفی که در موبایل مرور می‌شوند	فروشگاه و مارکت‌پلیس	تیره · متعادل
Broadsheet	سایت‌های خبری، مجله‌ها و ناشران متن بلند، گزارش‌ها، پرتال‌های پژوهشی و گزارش سالانه	محتوا و رسانه	روشن · فشرده
Stamp	پلتفرم‌های آموزشی، خلاقانه و سرگرمی، SaaS مستقل و ابزارهای مخاطب جوان	محصول و SaaS	روشن · دلباز
Raster	موزه، گالری، جشنواره و برنامه‌های فرهنگی، استودیوهای معماری، طراحی و تایپ	محتوا و رسانه	روشن · متعادل
Teletype	CLI، ابزار بیلد، CI/CD و پلتفرم توسعه، کنسول API، پایگاه داده و زیرساخت	توسعه‌دهنده و داده	تیره · فشرده
Kashi	رستوران، چایخانه، هتل و پذیرایی، موزه، جشنواره و نهادهای فرهنگی	برند و سبک زندگی	روشن · دلباز
Ticker	کارگزاری، بورس و اپ معاملاتی، بانکداری، کیف پول و ابزار خزانه	توسعه‌دهنده و داده	تیره · فشرده
Clay	اپ‌های سلامت، مدیتیشن، خواب و تندرستی، ابزار عادت، یادداشت روزانه و رشد فردی	محصول و SaaS	روشن · دلباز
Maison	خانه‌های مد، عطر، جواهر و زیبایی، مبلمان ممتاز، اشیا و گالری‌های طراحی	فروشگاه و مارکت‌پلیس	روشن · دلباز
Bento	صفحهٔ معرفی سخت‌افزار و اپلیکیشن، مرور امکانات و تغییرات SaaS	محصول و SaaS	روشن · متعادل
Aisle	فروشگاه‌های اینترنتی همه‌چیز و بازارگاه‌ها، فروشگاه کالای دیجیتال، خانه، پوشاک و آرایشی	فروشگاه و مارکت‌پلیس	روشن · فشرده
Syllabus	آکادمی‌های آنلاین و بازارگاه دوره، بوت‌کمپ، کلاس خصوصی و آموزشگاه زبان	محتوا و رسانه	روشن · متعادل
Brief	استودیوهای طراحی، وب و برندینگ، فریلنسرها و آژانس‌های کوچک با نمونه‌کار	برند و سبک زندگی	روشن · متعادل
Lucent	اپ‌های موسیقی، پادکست و کتاب صوتی، پخش‌کننده‌ها و ابزارهای خلاقانه	محصول و SaaS	تیره · متعادل
Clinic	درمانگاه، بیمارستان و دندان‌پزشکی، بازارگاه نوبت‌دهی پزشک و ویزیت آنلاین	محصول و SaaS	روشن · متعادل
Linework	پلتفرم‌های توسعه‌دهنده، API و SDK، کنسول زیرساخت، میزبانی و مشاهده‌پذیری	توسعه‌دهنده و داده	روشن · فشرده
Estate	سامانه‌های آگهی ملک، آژانس‌های املاک و مشاوران	فروشگاه و مارکت‌پلیس	روشن · متعادل
Margin	جستار، مجله و نشریهٔ ادبی، خبرنامه و نوشتهٔ اشتراکی	محتوا و رسانه	روشن · دلباز
Dot	معرفی و فروش سخت‌افزار، اپ همراه خانهٔ هوشمند، پوشیدنی و اینترنت اشیا	برند و سبک زندگی	روشن · متعادل
Passage	دفترهای مشاورهٔ مهاجرت، ویزا و اقامت، مؤسسه‌های پذیرش و تحصیل در خارج	محصول و SaaS	روشن · متعادل
Rack	ارائه‌دهندگان سرور ابری، مجازی و اختصاصی، ثبت دامنه، DNS و CDN	ابر و زیرساخت	تیره · متعادل
Sprocket	اپ‌های اجتماعی عکس و ویدئوی کوتاه، استودیو و آمار برای سازندگان محتوا	محتوا و رسانه	روشن · متعادل

۳. استفاده

سبک را در درخواست نام ببرید یا در CLAUDE.md ثبت کنید تا در همهٔ گفتگوها رعایت شود:

# CLAUDE.md
## Design
Use the Tastefolio "switchboard" skill for every UI change.
Brand color: #0f766e
Languages: fa (RTL, default) and en (LTR)
Stack: Next.js + Tailwind v4 + shadcn/ui

نمونهٔ درخواست‌ها:

با سبک switchboard یک صفحهٔ فرود برای اپ رزرو کلاس بساز: هیرو، ویژگی‌ها، قیمت‌ها، سؤال‌های متداول و فرم ثبت‌نام.

برای همین محصول یک داشبورد کاربر بساز: خلاصهٔ آمار، جدول رزروها با فیلتر، تنظیمات حساب.

اسکیل‌ها برای هر دو نوع خروجی نوشته شده‌اند: سایت عمومی (لندینگ، قیمت‌ها، بلاگ، فروشگاه) و محصول (داشبورد، پنل کاربری، تنظیمات، فرم‌های طولانی).

۴. شخصی‌سازی بدون از دست دادن سبک

رنگ برند: فقط --brand را عوض کنید؛ --brand-soft و --brand-strong با color-mix() از آن ساخته می‌شوند. هر اسکیل محدودهٔ مجاز رنگ برند را (مثلاً حداقل کنتراست) گفته است. در صفحهٔ هر اسکیل می‌توانید دمو را با رنگ برند دیگری ببینید.
محتوا و نام برند: آزادانه تغییر کند؛ قواعد سبک به محتوای دموها وابسته نیست.
حالت تیره: با <html data-theme="dark">. سبک‌های تیره‌محور حالت روشن هم دارند و برعکس.
فونت: اگر مجبور به تعویض فونت هستید، از جایگزین‌های همان بخش در SKILL.md استفاده کنید.

۵. فارسی و راست‌به‌چپ

<html lang="fa" dir="rtl"> را تنظیم کنید؛ همهٔ کیت‌ها با ویژگی‌های منطقی CSS (مثل margin-inline-start) نوشته شده‌اند و خودبه‌خود آینه می‌شوند.
فارسی در همهٔ سبک‌ها فقط با وزیرمتن نوشته می‌شود؛ هر سبک وزن، اندازه و ارتفاع خط را برای فارسی تنظیم می‌کند.
روی متن فارسی هیچ‌وقت letter-spacing نگذارید؛ اتصال حروف را می‌شکند. ایتالیک هم نداریم؛ برای تأکید از وزن یا رنگ استفاده کنید.
اعداد را با Intl.NumberFormat('fa-IR') به رقم فارسی نمایش دهید و تاریخ را با تقویم شمسی (Intl.DateTimeFormat('fa-IR')).
آیکن‌های جهت‌دار (فلش، شِورون) را آینه کنید؛ آیکن‌های غیرجهت‌دار (جست‌وجو، ساعت) را نه.
از نیم‌فاصله در متن استفاده کنید: «می‌شود»، «داشبوردها».

۶. React، Tailwind و shadcn/ui

فایل references/adapters.md در هر اسکیل بلوک‌های آمادهٔ Tailwind نسخهٔ ۳ و ۴ و نگاشت متغیرهای shadcn/ui را دارد. kit.css پیاده‌سازی مرجع است: در پروژه‌های React آن را به کامپوننت تبدیل کنید و نام توکن‌ها را نگه دارید. استفاده از shadcn آزاد است، به شرط اعمال بخش «Component library overrides» در هر اسکیل؛ وگرنه خروجی شبیه پیش‌فرض shadcn می‌شود، نه شبیه آن سبک.

۷. افزودن سبک تازه

skills/<name>/
  SKILL.md              # frontmatter: name, description
  meta.json             # gallery metadata (en + fa)
  assets/tokens.css     # light, dark, fa overrides
  assets/kit.css        # reference components
  assets/kit.js         # synced from shared/kit.js
  references/           # adapters.md (generated) + patterns
  examples/site.html
  examples/dashboard.html

npm install
npm run sync      # copy runtime, regenerate adapters + marketplace
npm run check     # validate every skill
npm run shots     # real screenshots of every demo
npm run build     # gallery → dist/
npm run serve     # preview dist on :4174

پس از push به شاخهٔ main، گیت‌هاب اکشنز همهٔ اسکرین‌شات‌ها را از نو می‌گیرد، گالری را می‌سازد، لینک‌ها را بررسی می‌کند و روی GitHub Pages منتشر می‌کند.