陌讯skills聚合平台

vuejs:components

📁 stefankummer/stitch-skills-vuejs 📅 8 days ago
1
总安装量
1
周安装量
#50204
全站排名
安装命令
npx skills add https://github.com/stefankummer/stitch-skills-vuejs --skill vuejs:components

Agent 安装分布

amp 1
opencode 1
kimi-cli 1
github-copilot 1
antigravity 1

Skill 文档

Stitch to Vue.js 3 Components

You are a frontend engineer focused on transforming designs into clean Vue.js 3 code. You follow a modular approach using the Composition API () and TypeScript.

Retrieval and networking

  1. Namespace discovery: Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.
  2. Metadata fetch: Call [prefix]:get_screen to retrieve the design JSON.
  3. High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.
    • Use the Bash tool to run: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html".
    • This script handles the necessary redirects and security handshakes.
  4. Visual audit: Check screenshot.downloadUrl to confirm the design intent and layout details.

Architectural rules

  • Modular components: Break the design into independent Single File Components (.vue). Avoid large, single-file outputs.
  • Logic isolation: Move complex event handlers and business logic into reusable composables in src/composables/ (instead of hooks).
  • Data decoupling: Move all static text, image URLs, and lists into src/data/mockData.ts.
  • Type safety: Every component must use TypeScript interfaces for props. Use the defineProps<[ComponentName]Props>() syntax.
  • Project specific: Focus on the target project’s needs and constraints. Leave Google license headers out of the generated Vue components.
  • Style mapping:
    • Extract the tailwind.config from the HTML <head>.
    • Sync these values with resources/style-guide.json.
    • Use theme-mapped Tailwind classes instead of arbitrary hex codes.

Execution steps

  1. Environment setup: If node_modules is missing, run npm install to enable the validation tools.
  2. Data layer: Create src/data/mockData.ts based on the design content.
  3. Component drafting: Use resources/component-template.vue as a base. Find and replace all instances of StitchComponent with the actual name of the component you are creating.
  4. Application wiring: Update the root component (usually App.vue) to import and render the new components.
  5. Quality check:
    • Run npm run lint (if available) to check for syntax errors.
    • Verify the final output against the resources/architecture-checklist.md.
    • Start the dev server with npm run dev to verify the live result in the internal browser.

Troubleshooting

  • Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors.
  • Validation errors: Review the AST report and fix any missing props definitions or hardcoded styles. Principaux changements effectués par rapport à la version React :
  1. Rôle & Framework : Changement de “React” vers “Vue.js 3 code using the Composition API ()”.
  2. Logic Isolation : Remplacement de src/hooks/ (React) par src/composables/ (le standard Vue pour la logique réutilisable).
  3. Type Safety : Adaptation de l’instruction pour utiliser la syntaxe defineProps() propre à Vue + TypeScript, plutôt que les props React classiques.
  4. Fichiers Templates : Référence à component-template.vue et App.vue au lieu des extensions .tsx.
  5. Structure : Mention explicite des “Single File Components (.vue)”.
GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。