ما هي وظيفة مهارة Lena؟

تقوم Lena بكتابة مكونات جاهزة للإنتاج في React وVue 3 وAngular — من أول prompt، مع تضمين إمكانية الوصول، والأداء، وسهولة الصيانة. قم بتحميلها مرة واحدة في Claude Projects واحصل على مطور واجهات أمامية مُعد مسبقًا دون الحاجة لشرح السياق في بداية كل جلسة.

كيف أقوم بتثبيت ملف هذه المهارة؟

قم بتنزيل ملف .md، والصق المحتوى الكامل في تعليمات Claude Projects، أضف سياق عملك، وابدأ جلستك الأولى. تعمل مع Claude وChatGPT أو أي نظام دردشة AI يقبل prompts النظام.

مع أي أدوات AI تعمل هذه المهارة؟

تعمل مع Claude (موصى به)، وChatGPT، وأي نظام دردشة AI يقبل prompts النظام. تقدم Claude Projects أفضل النتائج — حيث تم تحسين المهارة لقدرات Claude على اتباع التعليمات.

ما الذي يتضمنه هذا التنزيل؟

ملف مهارة واحد بصيغة .md يتم تسليمه فور الشراء. يحتوي على تكوين الدور الكامل، وسياق الخبرة، وقواعد السلوك. لا يتطلب اشتراكًا — هو ملكك بشكل دائم. يعمل مع Claude وChatGPT أو أي AI دردشة.

ما الفرق بين استخدام Claude مع وبدون مهارة Lena؟

بدون ملف مهارة، يبدأ Claude كل جلسة كمساعد عام. مع تحميل Lena، يطبق Claude خبرة ومنهجية مطور الواجهات الأمامية من الرسالة الأولى — دون الحاجة لإعادة الشرح، وجودة متسقة في كل مرة.

مهارة مطور الواجهة الأمامية لـ Claude و ChatGPT

Name: لينا — مطورة الواجهة الأمامية مهارة AI
Brand: KissMySkills
SKU: frontend-developer-skill
Price: 19.0 USD
Availability: InStock
Rating: 4.84 (25 reviews)

لينا — مطورة الواجهة الأمامية مهارة AI

$19.00

لينا — مطورة الواجهة الأمامية مهارة AI

$19.00

⚡ Instant download ◆ Claude & ChatGPT ∞ Keep forever

Instant download · 30-day money-back guarantee. Pay once, keep forever — no subscription. Refund policy

Ship production-ready components from the first prompt — React, Vue, or Angular with full TypeScript.

Components with the right state pattern and architecture
Figma-to-code, pixel-perfect and responsive
Core Web Vitals: LCP, INP, CLS optimised
WCAG 2.1 AA accessibility and full test coverage

Frontend developers and teams who want fast and right, not one or the other.A senior frontend contractor bills $90+/hr — this is one file, yours forever.

// what's inside

أضف Lena إلى Claude واحصل على مطور واجهات أمامية كبير يكتب مكونات جاهزة للإنتاج من أول موجه — React، Vue 3، و Angular مع TypeScript كامل، تحويل Figma إلى كود، وواجهات تمر في Core Web Vitals دون أي قلق من تدقيق Lighthouse.

لا مكون بدون بنية. تحدد Lena نمط إدارة الحالة المناسب، وأدوات البناء، ونهج الوصول قبل كتابة أي عنصر — لأن الشحن السريع والشحن الصحيح ليسا متعارضين.

ما ستحصل عليه

→ React (hooks، context، suspense)، Vue 3 (composition API)، Angular 15+ — كتابة TypeScript كاملة في كل مكان
→ إدارة الحالة باستخدام Redux Toolkit، Zustand، Pinia، أو NgRx — متوافق مع تقنيتك، وليس افتراضيًا
→ تحويل Figma/Sketch إلى كود متجاوب بدقة بكسل — باستخدام Tailwind، CSS Modules، أو Styled Components
→ تكوين خط أنابيب البناء Vite، Webpack 5، Turbopack — تقسيم الكود، إزالة الشيفرة غير المستخدمة، تحسين القطع
→ تحسين Core Web Vitals — LCP، INP، CLS مع تدقيقات Lighthouse واستراتيجية مراقبة المستخدم الحقيقي
→ الامتثال لمعايير WCAG 2.1 AA — HTML دلالي، أدوار ARIA، التنقل عبر لوحة المفاتيح، اختبار قارئ الشاشة
→ الاختبار باستخدام Jest/Vitest + React Testing Library، Playwright/Cypress E2E، ووثائق مكونات Storybook

📄 claude-frontend-developer.md

تثبيت في أقل من دقيقتين

يعمل مع Claude Sonnet 4 و Claude Code

كيفية التثبيت

قم بتنزيل ملف .md → افتح Claude → الصق محتوى الملف في موجه النظام أو تعليمات المشروع → ابدأ في البناء. هذا كل شيء.

claude-مطور-الواجهة-الأمامية.md

# Lena — Frontend Developer AI Skill

You are Lena, a senior frontend developer. Production-ready components from the first prompt.

## What you do
- React, Vue 3 and Angular with full TypeScript
- Figma-to-code, state management matched to your stack
- Core Web Vitals, WCAG 2.1 AA, and full test coverage

## How you work
1. Choose architecture and tooling before writing an element
2. Ship fast and ship right — they aren't opposites
3. Build accessibility and tests in, not bolted on

Excerpt from the actual file you'll download.

// try it

prompt

$Turn this Figma dashboard into a production-ready React + TypeScript component.

Lena returns: a state-management and tooling decision for your stack → pixel-perfect responsive React/TypeScript code with Tailwind or CSS Modules → WCAG 2.1 AA accessibility (semantic HTML, ARIA, keyboard nav) → Core Web Vitals optimisation plus Jest/Vitest and Playwright tests.

// how to install Under 2 minutes

Four steps. Any AI chat.

01
Download the file
After checkout, the download link lands in your inbox. Save the file anywhere on your device.
02
Open your AI chat
Claude, ChatGPT, Gemini, Grok, or Copilot — whichever one you already use.
03
Paste the file contents
Drop it into the system prompt, Project instructions, or custom instructions field.
04
Start working
Your AI is now configured as a specialist. Ask it anything inside its domain.