Full-stack-skills stitch-mcp-get-screen

Retrieve full details of a specific Stitch screen including HTML code, screenshot URL, and metadata. Use when you need to export screen code, analyze generated HTML structure, or feed screen data into a framework conversion skill. Requires projectId and screenId as numeric IDs.

install

source · Clone the upstream repo

git clone https://github.com/partme-ai/full-stack-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/partme-ai/full-stack-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/stitch-skills/stitch-mcp-get-screen" ~/.claude/skills/partme-ai-full-stack-skills-stitch-mcp-get-screen && rm -rf "$T"

manifest: skills/stitch-skills/stitch-mcp-get-screen/SKILL.md

Get Screen Details

CRITICAL PREREQUISITE: You must ONLY use this skill when the user EXPLICITLY mentions "Stitch".

Retrieves the full details of a specific screen, including its HTML code and high-res screenshot.

Use Case

Invoke this skill when the user wants to "export" the code, view the full design details, or when the Agent needs to analyze the generated HTML structure.

Input Parameters

The skill expects you to extract the following information from the user request:

```
projectId
```
(required): The project ID. Format: Pure ID (e.g.,
```
37803...
```
), no
```
projects/
```
prefix.
```
screenId
```
(required): The screen ID. Format: Pure ID (e.g.,
```
88805...
```
), no
```
screens/
```
prefix.

CRITICAL: When

projectId

and

screenId

are both available, call

stitch-mcp-get-screen

directly. Do NOT call

stitch-mcp-get-project

Resource Path Parsing

If the user provides a resource path or URL, use the following rules to extract

projectId

and

screenId

Format:

web application/stitch/projects/{projectId}/screens/{screenId}

Logic: Extract
```
projectId
```
and
```
screenId
```
directly from the path segments.

Example:

web application/stitch/projects/3492931393329678076/screens/2e22a9fb99ba49ddb6ce8907a1e74d60

projectId="3492931393329678076"

screenId="2e22a9fb99ba49ddb6ce8907a1e74d60"

Format:

projects/{projectId}/screens/{screenId}

Logic: Extract
```
projectId
```
and
```
screenId
```
from the path segments.

Agent flow:

Recognize the user input matches one of the above formats.
Extract
```
projectId
```
and
```
screenId
```
.

Call

get_screen

with

{"projectId": "<extracted projectId>", "screenId": "<extracted screenId>"}

Use the returned
```
htmlCode.downloadUrl
```
,
```
screenshot.downloadUrl
```
, and metadata for design-to-code (e.g. stitch-design-md or a framework conversion skill).

Output Schema

Returns a

Screen

object:

htmlCode
: The actual HTML/CSS code of the UI.
screenshot
: High-resolution image URL.
figmaExport
: Figma file asset.
```
width
```
,
```
height
```
,
```
deviceType
```
.

Intent Recognition & Framework Conversion

After retrieving the screen details (HTML code), check if the user's request implies converting the design to a specific frontend framework.

Logic:

Identify Framework: Look for specific keywords in user input (e.g., "uView", "uViewPro", "Vue", "React", "Flutter").
Locate Skill: Search for and read the corresponding skill definition file to understand the "Design Contract" or conversion rules.
- uViewPro / uni-app: If user mentions "uView", "uViewPro" or "UniApp", you MUST load and reference the complete context from the
```
stitch-uviewpro-components
```
  skill to ensure accurate code generation.
  - References: Read
```
skills/stitch-uviewpro-components/references/
```
    (especially
```
contract.md
```
    and
```
tailwind-to-uviewpro.md
```
    ) for core mapping rules.
  - API: Read
```
skills/stitch-uviewpro-components/api/component-api.md
```
    for component props and event definitions.
  - Examples: Read
```
skills/stitch-uviewpro-components/examples/usage.md
```
    for correct implementation patterns.
  - Resources: Read
```
skills/stitch-uviewpro-components/resources/architecture-checklist.md
```
    for design compliance.
- uView (Standard): If user mentions "uView" (without "Pro") or "uView 2.0", load
```
stitch-uview-components
```
  .
  - Context: Read
```
references/
```
    (contract, tailwind-to-uview),
```
api/component-api.md
```
    ,
```
examples/usage.md
```
    ,
```
resources/architecture-checklist.md
```
    from
```
stitch-uview-components
```
    .
- Element Plus: If user mentions "Element Plus", "Element", "Vue Desktop", load
```
stitch-vue-element-components
```
  .
  - Context: Read
```
references/
```
    (contract, tailwind-to-element-plus),
```
api/component-api.md
```
    ,
```
examples/usage.md
```
    ,
```
resources/architecture-checklist.md
```
    from
```
stitch-vue-element-components
```
    .
- Vant UI: If user mentions "Vant", "Vue Mobile", load
```
stitch-vue-vant-components
```
  .
  - Context: Read
```
references/
```
    (contract, tailwind-to-vant),
```
api/component-api.md
```
    ,
```
examples/usage.md
```
    ,
```
resources/architecture-checklist.md
```
    from
```
stitch-vue-vant-components
```
    .
- Layui Vue: If user mentions "Layui", load
```
stitch-vue-layui-components
```
  .
  - Context: Read
```
references/
```
    (contract, tailwind-to-layui),
```
api/component-api.md
```
    ,
```
examples/usage.md
```
    ,
```
resources/architecture-checklist.md
```
    from
```
stitch-vue-layui-components
```
    .
- Bootstrap Vue: If user mentions "Bootstrap", load
```
stitch-vue-bootstrap-components
```
  .
  - Context: Read
```
references/
```
    (contract, tailwind-to-bootstrap),
```
api/component-api.md
```
    ,
```
examples/usage.md
```
    ,
```
resources/architecture-checklist.md
```
    from
```
stitch-vue-bootstrap-components
```
    .
- React / Tailwind: If user mentions "React" (standard), load
```
stitch-react-components
```
  .
  - Context: Read
```
references/tailwind-to-react.md
```
    ,
```
examples/usage.md
```
    ,
```
resources/architecture-checklist.md
```
    from
```
stitch-react-components
```
    .
- Shadcn UI: If user mentions "Shadcn", "Next.js", "Radix", load
```
stitch-shadcn-ui
```
  .
  - Context: Read
```
references/tailwind-to-shadcn.md
```
    ,
```
examples/usage.md
```
    from
```
stitch-shadcn-ui
```
    .
- Other Frameworks: Search for matching
```
stitch-*-components
```
  skills and load their respective
```
api
```
  ,
```
examples
```
  , and
```
references
```
  directories.
Apply Constraints: Use the rules defined in that framework's skill (e.g., component mappings, slot usage, unit conversion) to transform the raw HTML from Stitch into the target framework code.

Example Flow:

User: "Get screen X and convert to uViewPro code."
Agent:
1. Call
```
get_screen
```
  to get HTML.
2. Detect intent: "uViewPro".
3. Load Context: Read
```
contract.md
```
  ,
```
component-api.md
```
  ,
```
usage.md
```
  , and
```
architecture-checklist.md
```
  from
```
stitch-uviewpro-components
```
  .
4. Generate code by applying uViewPro rules to the Stitch HTML.

Usage Example

User Input: "Give me the code for the login screen we just made."

Agent Action:

Identify target screen.

Call

get_screen

tool with arguments

{"projectId": "37803...", "screenId": "88805..."}

References

Examples