.claude/skills/import-project/SKILL.md
Import an exported project archive, placing assets into the correct directories. Use when user says "import project", "import bundle", "import package", "unpack project", or has a .tar.gz archive to import.
npx skillsauth add TETRA2000/figma-web-studio import-projectInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
.tar.gz archive to importrename, replace, or skip (default: ask user per conflict)For each component in the manifest:
src/components/{Name}/ already exists{Name}2 (or next available number)For the page:
src/pages/{route}/ already existssrc/pages/{route}/index.tsxsrc/components/{Name}/docs/components.mddocs/pages.mdshared/references/component-registry.mdnpm run build to verify no import errorsReport:
development
Fetch current Figma design state and apply changes back to React code. Use when user says "sync from Figma", "pull Figma changes", "update from Figma", "apply Figma changes", or wants to bring Figma edits into code.
tools
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
tools
Push React components and pages to Figma using the Figma MCP server. Use when user says "export to Figma", "push to Figma", "create Figma design", "send to Figma", or wants to create a Figma design from code.
testing
Bundle a page and all its dependent components into a portable archive for sharing. Use when user says "export project", "bundle page", "package page", "export bundle", or wants to share a page with its dependencies.