github/penpot-mcp
1
0
Fork 0
mirror of https://github.com/penpot/penpot-mcp.git synced 2026-04-25 11:18:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Apply prettier to .yml files

Browse Source
This commit is contained in:
Dominik Jain 2025-11-05 13:46:57 +01:00
parent 26c9adbd76
commit 6fe80bb99c
3 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.prettierignore
View File

@ -1,4 +1,7 @@
*.md *.md
*.yml
*.json *.json
python-scripts/ python-scripts/
.serena/
# auto-generated files
mcp-server/data/api_types.yml

8
.prettierrc
View File

@ -1,5 +1,13 @@
{ {
"tabWidth": 4, "tabWidth": 4,
"overrides": [
{
"files": "*.yml",
"options": {
"tabWidth": 2
}
}
],
"useTabs": false, "useTabs": false,
"semi": true, "semi": true,
"singleQuote": false, "singleQuote": false,

12
mcp-server/data/prompts.yml
View File

@ -4,7 +4,7 @@
initial_instructions: | initial_instructions: |
You have access to Penpot tools in order to interact with a Penpot design project directly. You have access to Penpot tools in order to interact with a Penpot design project directly.
As a precondition, the user must connect the Penpot design project to the MCP server using the Penpot MCP Plugin. As a precondition, the user must connect the Penpot design project to the MCP server using the Penpot MCP Plugin.
IMPORTANT: When transferring styles from a Penpot design to code, make sure that you strictly adhere to the design. IMPORTANT: When transferring styles from a Penpot design to code, make sure that you strictly adhere to the design.
NEVER make assumptions about missing values and don't get overly creative (e.g. don't pick your own colours and stick to NEVER make assumptions about missing values and don't get overly creative (e.g. don't pick your own colours and stick to
non-creative defaults such as white/black if you are lacking information). non-creative defaults such as white/black if you are lacking information).
@ -17,7 +17,7 @@ initial_instructions: |
A Page is frequently structured into boards. A `Board` is a high-level grouping element. A Page is frequently structured into boards. A `Board` is a high-level grouping element.
A `Group` is a more low-level grouping element used to organize low-level shapes into a logical unit. A `Group` is a more low-level grouping element used to organize low-level shapes into a logical unit.
Actual low-level shape types are `Rectangle`, `Path`, `Text`, `Ellipse`, `Image`, `Boolean`, and `SvgRaw`. Actual low-level shape types are `Rectangle`, `Path`, `Text`, `Ellipse`, `Image`, `Boolean`, and `SvgRaw`.
One of your key tools is the `execute_code` tool, which allows you to run JavaScript code using the Penpot Plugin API One of your key tools is the `execute_code` tool, which allows you to run JavaScript code using the Penpot Plugin API
directly in the connected project. directly in the connected project.
@ -25,7 +25,7 @@ initial_instructions: |
To execute code correctly, you need to understand the Penpot Plugin API. You can retrieve API documentation via To execute code correctly, you need to understand the Penpot Plugin API. You can retrieve API documentation via
the `penpot_api_info` tool. the `penpot_api_info` tool.
This is the full list of types/interfaces in the Penpot API: $api_types This is the full list of types/interfaces in the Penpot API: $api_types
A key object to use in your code is the `penpot` object (which is of type `Penpot`): A key object to use in your code is the `penpot` object (which is of type `Penpot`):
@ -34,14 +34,14 @@ initial_instructions: |
* `penpot.root` provides the root shape of the currently active page. * `penpot.root` provides the root shape of the currently active page.
* Generation of CSS content for elements via `penpot.generateStyle` * Generation of CSS content for elements via `penpot.generateStyle`
* Generation of HTML/SVG content for elements via `penpot.generateMarkup` * Generation of HTML/SVG content for elements via `penpot.generateMarkup`
For example, to generate CSS for the currently selected elements, you can execute this: For example, to generate CSS for the currently selected elements, you can execute this:
return penpot.generateStyle(penpot.selection, { type: "css", withChildren: true }); return penpot.generateStyle(penpot.selection, { type: "css", withChildren: true });
Things to be aware of: Things to be aware of:
* The `Shape` type is a union type. `ShapeBase` is a base type most shapes build upon. * The `Shape` type is a union type. `ShapeBase` is a base type most shapes build upon.
Any given shape contains information on the concrete type via its `type` field. Any given shape contains information on the concrete type via its `type` field.
Another useful object is the `penpotUtils` object (which is not part of the official API). It provides: Another useful object is the `penpotUtils` object (which is not part of the official API). It provides:
* getPages(): { id: string; name: string }[] * getPages(): { id: string; name: string }[]
* getPageById(id: string): Page | null * getPageById(id: string): Page | null
@ -53,5 +53,5 @@ initial_instructions: |
* findShape(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape | null * findShape(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape | null
If no root is provided, search globally (in all pages). If no root is provided, search globally (in all pages).
* findShapes(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape[] * findShapes(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape[]
You have hereby read the 'Penpot High-Level Overview' and need not use a tool to read it again. You have hereby read the 'Penpot High-Level Overview' and need not use a tool to read it again.