القائمة
UI visual design principles and patterns. Use when designing interfaces, choosing colors, typography, icons, and creating visual hierarchy.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | ui-design |
| description | UI visual design principles and patterns. Use when designing interfaces, choosing colors, typography, icons, and creating visual hierarchy. |
Visual design principles for creating beautiful, consistent user interfaces.
Primary → Brand identity, main CTAs
Secondary → Supporting elements
Accent → Highlights, notifications
Neutral → Text, backgrounds, borders
Semantic → Success, Warning, Error, Info
blue-50 → #eff6ff → Lightest background
blue-100 → #dbeafe → Hover states
blue-200 → #bfdbfe → Borders
blue-300 → #93c5fd → Disabled
blue-400 → #60a5fa → Icons
blue-500 → #3b82f6 → Primary (base)
blue-600 → #2563eb → Primary hover
blue-700 → #1d4ed8 → Primary active
blue-800 → #1e40af → Dark mode primary
blue-900 → #1e3a8a → Darkest
| Level | Normal Text | Large Text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
✅ Good: Dark text on light background
#1f2937 on #ffffff → 16:1
❌ Bad: Low contrast
#9ca3af on #ffffff → 2.5:1
Display → 48-72px → Hero sections
H1 → 36-48px → Page titles
H2 → 24-30px → Section headers
H3 → 20-24px → Subsections
H4 → 16-18px → Card titles
Body → 14-16px → Paragraph text
Caption → 12px → Labels, hints
Headings: Inter, SF Pro, Geist Sans
Body: Inter, System UI, Roboto
Code: JetBrains Mono, Fira Code
Headings: 1.1 - 1.3
Body text: 1.5 - 1.7
UI labels: 1.2 - 1.4
Regular (400) → Body text
Medium (500) → Emphasis, labels
Semibold (600) → Headings, buttons
Bold (700) → Strong emphasis
Large + Bold → Most important
Medium + Medium → Secondary
Small + Regular → Tertiary
Related items → 8-16px apart
Separate groups → 24-32px apart
Sections → 48-64px apart
Primary color → Call to action
Dark text → Important content
Gray text → Secondary info
Light gray → Disabled/placeholder
/* Level 0: Flat */
shadow-none
/* Level 1: Raised (cards, dropdowns) */
shadow-sm: 0 1px 2px rgba(0,0,0,0.05)
/* Level 2: Floating (popovers, tooltips) */
shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)
/* Level 3: Overlay (modals) */
shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)
/* Level 4: Modal */
shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04)
None → 0 → Sharp edges (tables)
Small → 4px → Inputs, buttons
Medium → 8px → Cards, modals
Large → 12px → Large cards
XL → 16px → Containers
Full → 9999px → Pills, avatars
12px → Inline, badges
16px → Body text, inputs
20px → Buttons, navigation
24px → Headers, emphasis
32px → Feature icons
48px → Empty states
Category palette (distinct):
Blue → #3b82f6
Green → #22c55e
Orange → #f97316
Purple → #a855f7
Pink → #ec4899
Sequential palette (progression):
Light → Medium → Dark
Semantic:
Success → Green
Warning → Yellow/Orange
Error → Red
Info → Blue
RESTful API design best practices. Use when designing endpoints, request/response schemas, error handling, and API versioning.
Perform thorough code reviews with security, performance, and quality checks. Use when reviewing PRs, auditing code changes, or finding potential bugs.
Database design and optimization. Use for schema design, queries, migrations, indexing, and performance tuning.
Systematic debugging methodology for finding and fixing bugs. Use when investigating issues, tracing errors, or fixing production problems.
Docker and containerization best practices. Use for Dockerfile creation, docker-compose, multi-stage builds, and container optimization.
Technical documentation best practices. Use for writing READMEs, API docs, code comments, and project documentation.