name: setup-opendesign description: Use when ./opendesign/index.html does not exist in the current project. Initialises the OpenDesign output folder structure, copies the viewer, and writes an empty manifest.
You are setting up the OpenDesign output environment for this project for the first time. Complete all steps below in order, then announce completion.
Steps
-
Download
viewer.htmlfrom GitHub.Fetch the file from:
https://raw.githubusercontent.com/manalkaff/opendesign/main/skills/opendesign/viewer.htmlWrite the response body directly to
./opendesign/index.html(create./opendesign/first if it does not exist). If the fetch fails, tell the user:Could not download the OpenDesign viewer. Check your internet connection and try again, or manually copy
viewer.htmlfrom the opendesign plugin to./opendesign/index.html. -
Create output folders if they do not already exist:
./opendesign/mockups/./opendesign/design-systems/
-
Write
./opendesign/manifest.jsonif it does not already exist:{ "generated": "<current ISO 8601 timestamp>", "sections": [ { "id": "mockups", "label": "Mockups", "groups": [] }, { "id": "design-systems", "label": "Design Systems", "groups": [] } ] } -
Announce to the user:
OpenDesign is set up. Open
./opendesign/index.htmlin your browser to view mockups. If previews don't load, serve the folder withpython -m http.server 8080and openhttp://localhost:8080/opendesign/.
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.