基于 SOC 职业分类
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/salmandev/arabic-skills-library --skill rtl-css-skill命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | rtl-css-skill |
| name_ar | مهارة تصميم RTL |
| description | Generate RTL-compatible CSS for Arabic web interfaces |
| description_ar | توليد أوراق أنماط CSS متوافقة مع اتجاه اليمين لليسار لواجهات الويب العربية |
| category | developer |
| language | bilingual |
| dialect | msa |
| rtl | true |
| platform_claude | true |
| platform_gpt | true |
| platform_qwen | true |
| platform_jais | true |
| platform_falcon | true |
| platform_allam | true |
| compliance | [] |
| version | 1.0.0 |
| author | salman-shaikh |
| contributor_volunteer | true |
English: Generate CSS stylesheets and components that properly support right-to-left (RTL) layouts for Arabic web applications. Includes logical properties, mirroring techniques, and best practices for bilingual websites.
العربية: توليد أوراق أنماط CSS ومكونات تدعم بشكل صحيح تخطيطات من اليمين لليسار (RTL) لتطبيقات الويب العربية. تتضمن الخصائص المنطقية وتقنيات عكس الاتجاه وأفضل الممارسات للمواقع ثنائية اللغة.
English: Use this skill when you need to:
العربية: استخدم هذه المهارة عندما تحتاج إلى:
You are an expert frontend developer specializing in RTL/CSS internationalization. When generating RTL CSS:
Use CSS Logical Properties: Replace physical properties with logical equivalents
margin-left → margin-inline-startmargin-right → margin-inline-endpadding-left → padding-inline-startpadding-right → padding-inline-endleft → inset-inline-startright → inset-inline-endtext-align: left → text-align: starttext-align: right → text-align: endImplement Direction Switching: Create CSS that respects the dir attribute
html[dir="rtl"] { ... }
html[dir="ltr"] { ... }
Mirror UI Components: Flip directional elements
Typography Considerations:
أنت مطور واجهات أمامية خبير متخصص في تدويل CSS/RTL. عند توليد CSS لـ RTL:
١. استخدم الخصائص المنطقية لـ CSS: استبدل الخصائص الفيزيائية بمكافئات منطقية
margin-left → margin-inline-startmargin-right → margin-inline-endpadding-left → padding-inline-startpadding-right → padding-inline-endleft → inset-inline-startright → inset-inline-endtext-align: left → text-align: starttext-align: right → text-align: end٢. طبّق تبديل الاتجاه: أنشئ CSS يحترم سمة dir
html[dir="rtl"] { ... }
html[dir="ltr"] { ... }
٣. اعكس مكونات واجهة المستخدم: اقلب العناصر الاتجاهية
٤. اعتبارات الطباعة:
/* ===================================
RTL-Aware CSS for Arabic Interfaces
=================================== */
/* Base Direction Setup | إعداد الاتجاه الأساسي */
html {
direction: ltr;
text-align: start;
}
html[dir="rtl"] {
direction: rtl;
text-align: right;
}
/* Typography | الطباعة */
:root {
--font-family-arabic: 'Tajawal', 'Cairo', 'Almarai', 'IBM Plex Sans Arabic', sans-serif;
--font-size-arabic: 16px;
--line-height-arabic: 1.7;
}
html[lang="ar"] {
font-family: var(--font-family-arabic);
font-size: var(--font-size-arabic);
line-height: var(--line-height-arabic);
}
/* Navigation Example | مثال التنقل */
.nav {
display: flex;
justify-content: space-between;
padding-inline-start: 20px;
padding-inline-end: 20px;
}
.nav-item {
margin-inline-end: 16px;
}
.nav-item:last-child {
margin-inline-end: 0;
}
/* Icon Mirroring | عكس الأيقونات */
.icon-arrow {
transform: scaleX(1);
}
html[dir="rtl"] .icon-arrow {
transform: scaleX(-1);
}
/* Card Component | مكون البطاقة */
.card {
border-radius: 8px;
padding: 20px;
text-align: start;
}
.card-icon {
float: inline-start;
margin-inline-end: 16px;
}
/* Form Inputs | حقول النموذج */
.input-group {
display: flex;
flex-direction: row;
}
.input-group input {
border-inline-start: 1px solid #ccc;
border-inline-end: none;
}
html[dir="rtl"] .input-group input {
border-inline-start: none;
border-inline-end: 1px solid #ccc;
}
/* Buttons with Icons | أزرار مع أيقونات */
.btn-with-icon {
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-with-icon .icon {
order: 0;
}
html[dir="rtl"] .btn-with-icon .icon {
order: 0; /* Flexbox handles RTL automatically */
}
/* Tables | الجداول */
table {
direction: inherit;
}
th, td {
text-align: start;
padding-inline-start: 12px;
padding-inline-end: 12px;
}
/* Modal/Dialog | النوافذ المنبثقة */
.modal {
position: fixed;
inset-inline-start: 50%;
transform: translateX(-50%);
}
html[dir="rtl"] .modal {
transform: translateX(50%);
}
/* Close Button | زر الإغلاق */
.modal-close {
position: absolute;
top: 16px;
inset-inline-end: 16px;
}
/* Dropdown Menu | قائمة منسدلة */
.dropdown-menu {
position: absolute;
inset-inline-start: 0;
text-align: start;
}
/* Tooltip | تلميح */
.tooltip {
position: absolute;
inset-inline-start: 50%;
transform: translateX(-50%);
}
/* Breadcrumbs | مسار التنقل */
.breadcrumb {
display: flex;
flex-direction: row;
}
.breadcrumb-item::after {
content: '/';
margin-inline-start: 8px;
margin-inline-end: 8px;
}
html[dir="rtl"] .breadcrumb-item::after {
content: '/'; /* Keep same or use Arabic » */
}
/* Pagination | ترقيم الصفحات */
.pagination {
display: flex;
flex-direction: row;
}
.pagination-item {
margin-inline-end: 4px;
}
/* Sidebar | الشريط الجانبي */
.sidebar {
float: inline-start;
margin-inline-end: 20px;
}
.main-content {
margin-inline-start: 0;
margin-inline-end: 0;
}
/* Alerts/Notifications | التنبيهات */
.alert {
display: flex;
align-items: flex-start;
text-align: start;
}
.alert-icon {
margin-inline-end: 12px;
}
.alert-close {
margin-inline-start: auto;
}
/* Progress Bar | شريط التقدم */
.progress-bar {
direction: ltr; /* Numbers progress LTR even in RTL */
}
/* Slider/Range | شريط التمرير */
input[type="range"] {
direction: ltr; /* Consistent behavior */
}
/* Lists | القوائم */
ul, ol {
padding-inline-start: 24px;
padding-inline-end: 0;
}
html[dir="rtl"] ul,
html[dir="rtl"] ol {
padding-inline-start: 0;
padding-inline-end: 24px;
}
/* Blockquote | اقتباس */
blockquote {
border-inline-start: 4px solid #ccc;
padding-inline-start: 16px;
margin-inline-start: 0;
margin-inline-end: 0;
}
html[dir="rtl"] blockquote {
border-inline-start: none;
border-inline-end: 4px solid #ccc;
padding-inline-start: 0;
padding-inline-end: 16px;
}
/* Responsive Considerations | اعتبارات متجاوبة */
@media (max-width: 768px) {
.sidebar {
float: none;
margin-inline-end: 0;
}
.nav {
flex-direction: column;
}
.nav-item {
margin-inline-end: 0;
margin-block-end: 8px;
}
}
Input:
Create RTL-aware CSS for a horizontal navigation bar with logo on the right (LTR) / left (RTL) and menu items.
Expected Output:
Input:
Generate CSS for a bilingual form with labels and inputs that works in both LTR and RTL.
Expected Output: