القائمة
User interface design, user experience optimization, accessibility compliance, design systems
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/fabioc-aloha/ai-wallpaper-generator --skill uiux-designيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | UI/UX Design |
| description | User interface design, user experience optimization, accessibility compliance, design systems |
Domain: User interface design, user experience optimization, accessibility compliance, design systems
Applicable To: Web applications, VS Code extensions, mobile apps, desktop software
Skill Type: Systematic design audit, accessibility validation, design system implementation
Visual Hierarchy
Spacing System
Color & Contrast
Touch Targets
Perceivable
Operable
Understandable
Robust
CSS Variables Pattern
:root {
/* Typography Scale */
--font-xs: 11px; /* Minimum legal size */
--font-sm: 12px; /* Secondary text */
--font-md: 14px; /* Body text (VS Code default) */
--font-lg: 16px; /* Headings, emphasis */
--font-xl: 18px; /* Large headings */
/* Spacing Scale (8px base) */
--spacing-xs: 4px; /* Tight spacing */
--spacing-sm: 8px; /* Default gap */
--spacing-md: 16px; /* Section padding */
--spacing-lg: 24px; /* Card padding */
--spacing-xl: 32px; /* Page margins */
/* Theme-aware Colors */
--text-primary: var(--vscode-foreground);
--text-secondary: var(--vscode-descriptionForeground);
--bg-primary: var(--vscode-editor-background);
--bg-secondary: var(--vscode-sideBar-background);
--border-color: var(--vscode-panel-border);
--accent: var(--vscode-button-background);
}
Phase 1: Visual Assessment
Typography Audit
Spacing Audit
Color Audit
Touch Target Audit
Phase 2: Accessibility Assessment
Keyboard Navigation Test
Screen Reader Test
Semantic HTML Audit
<div> buttons with <button> or role="button"<nav>, <article>, <aside>, <section> for structureColor-Blind Safety Test
Phase 3: Design System Implementation
Extract Design Tokens
Create CSS Variables
:root or component scope--font-body, not --font-14px)var(--vscode-foreground), not hardcoded hex)Apply Design Tokens
font-size: 14px → font-size: var(--font-md)margin: 16px → margin: var(--spacing-md)Document Design System
Focus Indicators
/* VS Code-aware focus styling */
:focus-visible {
outline: 2px solid var(--vscode-focusBorder);
outline-offset: 2px;
border-radius: 4px;
}
/* Remove outline for mouse users */
:focus:not(:focus-visible) {
outline: none;
}
Color-Blind Safe Status Indicators
/* Status dots with icons via ::after */
.status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
position: relative;
}
.status-dot.success {
background: #4caf50; /* Green */
}
.status-dot.success::after {
content: '✓'; /* Checkmark icon */
position: absolute;
color: white;
font-size: 10px;
font-weight: bold;
top: -1px;
left: 1px;
}
.status-dot.warning {
background: #ff9800; /* Orange */
}
.status-dot.warning::after {
content: '⚠'; /* Warning icon */
position: absolute;
color: white;
font-size: 10px;
top: -2px;
left: 0px;
}
.status-dot.error {
background: ;
}
{
: ;
: absolute;
: white;
: ;
: bold;
: -;
: ;
}
ARIA Progressbar
<!-- Accessible progress bar -->
<div role="progressbar"
aria-valuenow="65"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Task completion">
<div class="progress-fill" style="width: 65%"></div>
</div>
Accessible Buttons
<!-- Semantic button with ARIA -->
<button type="button"
tabindex="0"
aria-label="Generate architecture diagram"
class="action-button">
Generate Diagram
</button>
<!-- Div styled as button (use sparingly) -->
<div role="button"
tabindex="0"
aria-label="Close panel"
class="close-button"
onclick="handleClick()"
onkeypress="if(event.key==='Enter'||event.key===' ')handleClick()">
×
</div>
Card Layout with Semantic HTML
<article class="card" role="article">
<header>
<h3>Skill Name</h3>
</header>
<div class="card-body">
<p>Description text...</p>
</div>
<footer>
<button aria-label="Activate skill">Activate</button>
</footer>
</article>
Step 1: Audit Current State
# Extract all font-size declarations
grep -r "font-size:" src/ | grep -oP "\d+px" | sort -u
# Extract all spacing values (margin, padding)
grep -r -E "(margin|padding):" src/ | grep -oP "\d+px" | sort -u
# Count unique colors
grep -r -E "(color|background):" src/ | grep -oP "#[0-9a-fA-F]{3,6}" | sort -u
Step 2: Calculate Base Unit
Spacing values found: 4px, 8px, 12px, 16px, 20px, 24px, 32px
GCD = 4px → Base unit = 4px
Scale: 1×, 2×, 3×, 4×, 5×, 6×, 8× (0.25rem, 0.5rem, 0.75rem, 1rem, 1.25rem, 1.5rem, 2rem)
Step 3: Create Token System
// Design tokens as JavaScript object
const tokens = {
typography: {
xs: '11px', // Legal minimum
sm: '12px', // Secondary
md: '14px', // Body
lg: '16px', // Heading
xl: '18px' // Large heading
},
spacing: {
xs: '4px',
sm: '8px',
md: '16px',
lg: '24px',
xl: '32px'
},
colors: {
primary: 'var(--vscode-button-background)',
secondary: 'var(--vscode-button-secondaryBackground)',
text: 'var(--vscode-foreground)',
textMuted: 'var(--vscode-descriptionForeground)',
border: 'var(--vscode-panel-border)',
success: '#4caf50',
warning: '#ff9800',
error: '#f44336'
}
};
Step 4: Generate CSS Variables
:root {
/* Typography */
--font-xs: 11px;
--font-sm: 12px;
--font-md: 14px;
--font-lg: 16px;
--font-xl: 18px;
/* Spacing */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
/* Colors (theme-aware) */
--color-primary: var(--vscode-button-background);
--color-text: var(--vscode-foreground);
--color-border: var(--vscode-panel-border);
--color-success: #4caf50;
--color-warning: #ff9800;
--color-error: #f44336;
}
Step 5: Apply Design Tokens
/* Before: Hardcoded values */
.button {
font-size: 14px;
padding: 8px 16px;
background: #007acc;
color: #ffffff;
}
/* After: Design tokens */
.button {
font-size: var(--font-md);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-primary);
color: var(--color-text);
}
Manual Testing Checklist
Automated Testing Tools
Validation Scripts
// Check for minimum font sizes
const elements = document.querySelectorAll('*');
elements.forEach(el => {
const fontSize = parseFloat(window.getComputedStyle(el).fontSize);
if (fontSize < 11 && fontSize > 0) {
console.warn('Font too small:', el, fontSize + 'px');
}
});
// Check for touch target sizes
const interactive = document.querySelectorAll('button, a, input, [role="button"]');
interactive.forEach(el => {
const rect = el.getBoundingClientRect();
if (rect.width < 44 || rect.height < 44) {
console.warn('Touch target too small:', el, rect.width + '×' + rect.height + 'px');
}
});
// Check for missing ARIA labels
const buttons = document.querySelectorAll('button, [role="button"]');
buttons.forEach( {
(!btn..() && !btn.()) {
.(, btn);
}
});
Official Documentation
Key Success Criteria
Material Design 3
Apple Human Interface Guidelines
Microsoft Fluent Design
VS Code Design Guidelines
--vscode-*)Accessibility Testing
Color-Blindness Simulators
Design Token Tools
Screen Readers
Accessible Component Patterns
<!-- Modal Dialog -->
<div role="dialog"
aria-labelledby="dialog-title"
aria-describedby="dialog-desc"
aria-modal="true">
<h2 id="dialog-title">Confirm Action</h2>
<p id="dialog-desc">Are you sure you want to proceed?</p>
<button aria-label="Confirm">OK</button>
<button aria-label="Cancel">Cancel</button>
</div>
<!-- Tab Panel -->
<div role="tablist" aria-label="Settings tabs">
<button role="tab" aria-selected="true" aria-controls="panel-1">General</button>
<button role="tab" aria-selected="false" =>Advanced
General settings...
Advanced settings...
Search
Result 1
Result 2
Direct Dependencies
Complementary Skills
Typography Mistakes
Spacing Mistakes
Accessibility Mistakes
<div> instead of <button> for clickable elementsaria-label on icon-only buttonsDesign Token Mistakes
--blue-500) instead of semantic (--color-primary)CSS Variables Performance
:root scope for global tokenscalc() operations with variablesAccessibility Tree Performance
v1.0.0 (2026-02-15)