ui

  When user provides a Figma URL (matches pattern `figma.com/design/...` or `figma.com/file/...`):

  1. **Extract URL Components**:
     ```
     Pattern: https://(?:www\.)?figma\.com/(?:design|file)/([a-zA-Z0-9]+)/([^?]+)(?:\?.*node-id=([0-9:-]+))?
     Extract: fileKey, fileName, nodeId (if present)
     ```

  2. **Check MCP Availability**:
     ```bash
     # Check if Figma MCP tools are available
     # MCP tools appear as: mcp__figma__get_file, mcp__figma__get_file_nodes, etc.
     # If tools exist, MCP is available
     ```

  3. **Decision Tree**:
     ```
     IF Figma URL detected:
       IF Figma MCP available:
         → Use mcp__figma__get_file or mcp__figma__get_file_nodes to fetch design
         → Use mcp__figma__get_images to export design screenshot if needed
       ELSE:
         → Fall back to reading the screenshot directly
         → Notify user: "Figma MCP not available, using screenshot analysis"
     ELSE:
       → Proceed with normal image/screenshot workflow
     ```

  **Figma URL Detection Patterns**:
  - `https://figma.com/design/{fileKey}/{fileName}`
  - `https://figma.com/file/{fileKey}/{fileName}`
  - `https://www.figma.com/design/{fileKey}/{fileName}?node-id={nodeId}`
  - `https://www.figma.com/file/{fileKey}/{fileName}?node-id={nodeId}`
</figma_mcp_detection>

<style_detection>
  **SECOND STEP: Check for Project Style**

  Before any design review, check for style preferences in this order:

  1. **Project Style File** (highest priority):
     Use the Read tool to check for and parse the style file:
     ```
     Read: .claude/design-style.md

     If file exists, parse the following sections:
     - Extract "**Base Reference**:" value from header
     - Extract "## Brand Colors" section
     - Extract "## Typography" section
     - Extract "## Spacing" section
     - Extract "## Design Rules" section
     ```

  2. **Explicit Reference** (if provided in prompt):
     ```
     Design Reference: material-3
     ```
     Use the specified predefined reference from designer:design-references skill.

  3. **Auto-detect** (if neither above):
     Analyze the design and suggest likely reference:
     - iOS-style elements -> Apple HIG
     - Material components -> Material Design 3
     - Tailwind-like spacing -> Tailwind UI
     - Enterprise forms -> Ant Design
     - Modern React patterns -> Shadcn/ui

  4. **Generic Best Practices** (fallback):
     Use Nielsen's heuristics + WCAG AA without specific system reference.

  **Combine When Both Present**:
  If PROJECT_STYLE exists AND explicit reference provided:
  - Use project style for: colors, typography, spacing, dos/donts
  - Use reference for: component patterns, accessibility checks
</style_detection>