القائمة
Portfolio bento grid with A4 CV, zinc surfaces, and Syne display typography
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/sofianbll/My-Bentofolio --skill bentofolioيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| schemaVersion | 1 |
| name | bentofolio |
| description | Portfolio bento grid with A4 CV, zinc surfaces, and Syne display typography |
cell variants (hero, photo, skills, contact, formation, interests, projects)#f0f0f3, white cards #ffffff, text #111113, muted #6b6b76, borders #dcdce0#6366f1 for interactive states, category badges, and active elementsSyne (display/headings), SF Pro Display (body), JetBrains Mono (code/technical)Cell({ variant, glow, className, children }) — Bento grid card with optional mouse-follow glowhero, photo, skills, contact, formation, interests, projectsIcon({ name, size }) — Inline SVG icons (lucide-style), 40+ iconsBadge({ label, color }) — Colored labelChip({ label, variant }) — Outline/solid pillTechTag({ label, tech }) — Category-colored tech pill using .t-{tech} CSS classSectionTitle({ title }) — Section headingCatGlyph({ cat, size }) — Category icon with colorCatPill({ cat }) — Category badge with icon + labelCatPills({ project, max }) — Multi-category pills for a projectHomeView — Bento grid with hero, photo, skills, contact, formation, interests, projects previewProjectsView — Filterable project gallery with category chipsProjectDetailView — Full project detail page with case studyCvView — A4 CV with project selection, download/printContactView — Contact form + info cardAdminView — Mini-CMS dashboard (password: bento)--cat-dev, --cat-webdesign, --cat-3d, --cat-animation, --cat-logo, --cat-tooling, --cat-tools, --cat-devops, --cat-ai.t-laravel, .t-vue, .t-react, .t-tailwind, .t-docker, etc. — 20+ tech-specific accent classesauto-fill / minmax[data-theme="dark"] selector in app/styles.cssconfig.json (single source of truth)app/config-runtime.js (preview iframe, postMessage validation)id, name, categories[], featured, techs[], role, period, duration, description, caseStudy, highlights[], demoUrl, repoUrl, image/api/admin/save write directly to config.jsonbun run build embeds config.json into the production bundleIcon component