TETRA2000
10 verified skills
export-project
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.
testing
create-component
Generate React components with Tailwind CSS classes and Storybook stories from a natural language description. Use when user says "create component", "make a component", "build a component", "new component", or describes a UI element they want to create.
development
export-html
Export individual pages as self-contained HTML files with all CSS and JavaScript inlined. Use when user says "export HTML", "export page", "build HTML", "static export", "export as HTML", or wants a standalone HTML file.
development
brainstorm
Explore design ideas for pages and components using existing assets as building blocks. Use when user says "brainstorm", "explore ideas", "design ideas", "suggest designs", "what could I build", or wants to think through design options.
development
export-to-figma
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.
tools
import-project
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.
testing
playwright-cli
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
sync-from-figma
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.
development
.claude/skills/duplicate-page
--- name: duplicate-page description: "[EXPERIMENTAL] Duplicate an existing web page by capturing it through Figma as a structured design intermediary and generating high-fidelity React + Tailwind components. This skill is experimental — it does not fit reliably into the project workflow and may produce inconsistent results. Use when user says "duplicate page", "clone page", "copy page", "replicate page", "recreate page", "make a copy of this site", provides a URL they want to reproduce as a Rea
development
create-page
Generate web pages composed from existing components following directory-based routing conventions. Use when user says "create page", "make a page", "new page", "build a page", or describes a web page they want to create.
development