菜单
Visual hierarchy, z-index, shadows, animations ve white space kuralları.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Guide for conducting comprehensive accessibility audits of code to identify WCAG compliance issues and barriers to inclusive design. This skill should be used when reviewing accessibility, ARIA implementation, keyboard navigation, or screen reader compatibility.
Transform clarified user requests into structured delegation prompts optimized for specialist agents (cto-architect, strategic-cto-mentor, cv-ml-architect). Use after clarification is complete, before routing to specialist agents. Ensures agents receive complete context for effective work.
AGENTS.md dosyaları oluşturma, monorepo yapılandırma ve agent instruction yönetimi rehberi.
p5.js ile generative art, flow fields ve interactive visuals oluşturma rehberi.
API tasarımı, GraphQL schema, OpenAPI spec, versioning. ⚠️ Tasarım aşaması için kullan. Uygulama/security için → backend-api.
ADR template, database selection, capacity planning ve scalability.
| name | design_patterns |
| description | Visual hierarchy, z-index, shadows, animations ve white space kuralları. |
Visual hierarchy, layering ve animation kuralları.
arch-patterns| Bu Skill | arch-patterns |
|---|---|
| UI/UX tasarım | Sistem mimarisi |
| Z-index, shadows | Microservices, CQRS |
| Animation, spacing | Database seçimi |
Kural: UI tasarımı → bu skill, Sistem tasarımı →
arch-patterns
-1 - Behind content
0 - Base layer
10 - Dropdown menus
20 - Sticky headers
30 - Modal backdrop
40 - Modal content
50 - Tooltips
100 - Toast notifications
shadow-xs: 0 1px 2px rgba(0,0,0,0.05)
shadow-sm: 0 1px 3px rgba(0,0,0,0.1)
shadow-md: 0 4px 6px rgba(0,0,0,0.1)
shadow-lg: 0 10px 15px rgba(0,0,0,0.1)
shadow-xl: 0 20px 25px rgba(0,0,0,0.15)
75ms - Instant (very subtle)
150ms - Fast (hover states)
200ms - Normal (default)
300ms - Moderate (dropdown, modal)
500ms - Slow (page transitions)
| Easing | Kullanım |
|---|---|
| ease-out | En yaygın (hover, click) |
| ease-in-out | Modal, dropdown |
| ease-in | Çıkış animasyonları |
| Tip | Spacing |
|---|---|
| Tight | 8-12px (data tables) |
| Normal | 16-24px (default) |
| Relaxed | 32-48px (marketing) |
| Spacious | 64px+ (premium) |
:focus-visible {
outline: 2px solid var(--primary-500);
outline-offset: 2px;
}
design-tokens - Spacing, typographydesign-responsive - Breakpoints, fluidDesign Patterns v1.1 - Enhanced
Kaynak: Refactoring UI (Visual Hierarchy)
8px grid sistemine göre yerleştir.shadow ve z-index ile ayır.| Aşama | Doğrulama |
|---|---|
| 1 | Sayfada nereye bakılacağı (Focal Point) net mi? |
| 2 | Focus ring klavye ile gezinirken görünüyor mu? |
| 3 | Animasyonlar performansı (FPS) düşürüyor mu? |