القائمة
WHEN users express dissatisfaction with visual appearance or behavior; use Playwright MCP to capture screenshots and collaborate on UI fixes with a structured feedback loop.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
WHEN scraping iOS/macOS App Store data (apps, reviews, ratings, search); NOT for installing or testing apps; retrieves structured JSON data using iTunes/App Store APIs with curl and jq formatting
Comprehensive guide for implementing on-device AI models on iOS using Foundation Models and MLX Swift frameworks. Use WHEN building iOS apps with (1) Local LLM inference, (2) Vision Language Models (VLMs), (3) Text embeddings, (4) Image generation, (5) Tool/function calling, (6) Multi-turn conversations, (7) Custom model integration, or (8) Structured generation.
WHEN building ChatGPT apps using the OpenAI Apps SDK and MCP; create conversational, composable experiences with proper UX, UI, state management, and server patterns.
WHEN building SwiftUI views, managing state, setting up shared services, or making architectural decisions; NOT for UIKit or legacy patterns; provides pure SwiftUI data flow without ViewModels using @State, @Binding, @Observable, and @Environment.
WHEN building design systems or component libraries with Tailwind CSS; covers design tokens, CVA patterns and dark mode.
WHEN building React components/pages/apps; enforces scalable architecture, state management, API layer, performance patterns.
| name | eyes |
| description | WHEN users express dissatisfaction with visual appearance or behavior; use Playwright MCP to capture screenshots and collaborate on UI fixes with a structured feedback loop. |
Use Playwright MCP to capture screenshots and collaborate with users on visual refinements. Always confirm before making changes.
Capture current state — Use Playwright MCP browser_take_screenshot to capture the current page or element to better understand the users questions or requirements.
Gather specific feedback — Ask what needs adjustment: "Looking at this screenshot, what specifically would you like changed?"
Propose changes clearly — Describe intended modifications with specifics:
Confirm before implementing — Use AskUserQuestion to get explicit approval. Never modify code without confirmation.
Verify with comparison — After changes, capture a new screenshot to confirm the fix has been made.
Use these Playwright MCP tools for the visual feedback loop:
browser_navigate — Navigate to a URLbrowser_take_screenshot — Take a screenshot of the current pagebrowser_snapshot — Capture accessibility snapshot of the current page (useful for understanding structure)browser_click — Perform click on a web pagebrowser_hover — Hover over element on pagebrowser_wait_for — Wait for text appearance/disappearance or specified durationbrowser_console_messages — Returns all console messages (useful for debugging)browser_resize — Resize the browser window (useful for responsive testing)browser_install — Install the browser specified in the configWhen implementing visual changes, load these skills for guidance:
web:css — CSS architecture, spacing, units, and selector patternsweb:web-design — Visual hierarchy, typography, color, and component polishAfter implementing changes: