القائمة
Design for mobile devices first, then scale up to larger screens. Create responsive interfaces that work seamlessly across all device sizes.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Implement Role-Based Access Control (RBAC), permissions management, and authorization policies. Use when building secure access control systems with fine-grained permissions.
Implement WCAG 2.1/2.2 accessibility standards, screen reader compatibility, keyboard navigation, and a11y testing. Use when building inclusive web applications, ensuring regulatory compliance, or improving user experience for people with disabilities.
Test web applications for WCAG compliance and ensure usability for users with disabilities. Use for accessibility test, a11y, axe, ARIA, keyboard navigation, screen reader compatibility, and WCAG validation.
Plan and execute effective sprints using Agile methodologies. Define sprint goals, estimate user stories, manage sprint backlog, and facilitate daily standups to maximize team productivity and deliver value incrementally.
Implement comprehensive alert management with PagerDuty, escalation policies, and incident coordination. Use when setting up alerting systems, managing on-call schedules, or coordinating incident response.
Develop native Android apps with Kotlin. Covers MVVM with Jetpack, Compose for modern UI, Retrofit for API calls, Room for local storage, and navigation architecture.
| name | mobile-first-design |
| description | Design for mobile devices first, then scale up to larger screens. Create responsive interfaces that work seamlessly across all device sizes. |
Mobile-first design prioritizes small screens as the starting point, ensuring core functionality works on all devices while leveraging larger screens for enhanced experience.
Minimal working example:
Mobile-First Approach:
Step 1: Design for Mobile (320px - 480px)
- Constrained space forces priorities
- Focus on essential content and actions
- Single column layout
- Touch-friendly interactive elements
Step 2: Enhance for Tablet (768px - 1024px)
- Add secondary content
- Multi-column layouts possible
- Optimize spacing and readability
- Take advantage of hover states
Step 3: Optimize for Desktop (1200px+)
- Full-featured experience
- Advanced layouts
- Rich interactions
- Multiple columns and sidebars
---
## Responsive Breakpoints:
Mobile: 320px - 480px
- iPhone SE, older phones
// ... (see reference guides for full implementation)
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Responsive Design Implementation | Responsive Design Implementation |
| Mobile Performance | Mobile Performance |
| Progressive Enhancement | Progressive Enhancement |