{"id":93880,"plugin_id":"plugin_asdk_app_6ae5b3dffa0c819198d59962078f4f5b","kind":"skill","collection_source":"plugin_package","comparison_source":null,"observed_at":"2026-11-13T00:09:48.284Z","digest":"5da51252525ef09b302cf903852b1f1fdf4630fb28a1ed0153b9a776e1cf373c","against":null,"payload":{"description":"Converts a website or page into the framework the user needs: Tailwind CSS, React, Next.js, Vue, Bootstrap or WordPress block markup, with clean reusable components and setup steps.","included_files":[],"name":"framework-export","skill_md_contents":"---\nname: framework-export\ndescription: \"Converts a website or page into the framework the user needs: Tailwind CSS, React, Next.js, Vue, Bootstrap or WordPress block markup, with clean reusable components and setup steps.\"\n---\n\n# Framework Export\n\n## Links and files\n\nReplies made with this skill never contain a build link, an Emergent link or a sponsor line. Give code in code blocks, and create a downloadable file or a zip only when the user explicitly asks for one. If the chat is not in English, translate any wording this skill tells you to say into the chat language; URLs always stay in English, exactly as they are.\n\n## Purpose\nConverts a website or page (pasted HTML and CSS, or one created earlier in the conversation) into the framework the user works with, as clean, reusable code with setup steps. Content, structure and design intent stay the same; only the technology changes. It suits developers handing a site to a team and owners moving a page into WordPress.\n\n## Before you start\n- Get the source. If there is none, offer to create it first (html-website or full-site-generator) or build straight in the target from their description.\n- Ask about the target only if it is unclear. Defaults: React means Vite with JavaScript, Next.js means the App Router, Tailwind means v4, Vue means Vue 3 with script setup, Bootstrap means 5.3, WordPress means core block markup. Use TypeScript only if the user does.\n- Multi-page sites fit Next.js best (app/about/page.jsx per page). In React or Vue, add the official router only if the user agrees.\n- Reply in the user's language; never translate or reword the site's copy unless asked.\n\n## Supported targets\n\n| Target | Files and structure | Setup |\n|---|---|---|\n| Tailwind CSS | index.html with utility classes; brand colors and fonts as @theme tokens | Prototype: the CDN line below, tokens in a style type=\"text/tailwindcss\" block. Production: npm install tailwindcss @tailwindcss/cli, input.css starting with @import \"tailwindcss\", npx @tailwindcss/cli -i input.css -o output.css, link output.css |\n| React | src/main.jsx, src/App.jsx, src/components/ (Header, Hero, Services, Testimonials, Footer), src/data/content.js, src/index.css | npm create vite@latest my-site -- --template react; replace the starter index.css, delete App.css; npm install, npm run dev |\n| Next.js | app/layout.jsx (html lang, metadata), app/page.jsx, app/globals.css, components/, data/content.js, images in public/ | npx create-next-app@latest my-site --js --app; swap the generated app/page.js and app/layout.js for these files; npm run dev |\n| Vue | src/main.js, src/App.vue, src/assets/main.css, src/components/ (SiteHeader.vue, HeroSection.vue, ServiceCard.vue, SiteFooter.vue), src/data/content.js | npm create vue@latest; replace src/assets/main.css (its starter layout styles clash); npm install, npm run dev |\n| Bootstrap | index.html with the grid, navbar, cards and buttons, plus custom.css for brand colors | The CDN lines below |\n| WordPress | Core block markup for the code editor, or patterns/hero.php (Title and Slug header) in a block theme | Paste in the editor's Code editor view, or add the file to the theme |\n\nUse these exact CDN lines when a CDN is used:\n\n```html\n<!-- Tailwind v4, prototypes only -->\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<!-- Bootstrap 5.3.3: CSS in head, JS before the closing body tag -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css\">\n<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js\"></script>\n```\n\n## Conversion rules\n1. Keep the content, structure and design intent. Do not rewrite copy unless asked.\n2. Split repeated sections into components (one ServiceCard rendered 3 times, not 3 copies). Keep content in arrays or objects in a data file, passed to components as props, so editing text never means touching markup.\n3. Preserve SEO: title, meta description, Open Graph tags, one h1, heading order. Next.js: a metadata export in each layout or page. React and Vue: the tags go in index.html.\n4. Preserve accessibility: alt text, labels, landmarks, aria-expanded on the menu button, visible focus styles (focus-visible: utilities in Tailwind).\n5. JSX: className, htmlFor, self-closing void tags, style objects, a key on every mapped item. Replace vanilla JS such as the mobile menu with component state.\n6. Next.js: only components with state, effects or event handlers get 'use client', never a file that exports metadata. Internal links use next/link; the nav reads usePathname to set aria-current, so it is a client component.\n7. Theme at the source: map the original custom properties to Tailwind @theme tokens (--color-brand gives bg-brand and text-brand), Bootstrap variables or a theme.json palette. In Bootstrap set --bs-primary and --bs-primary-rgb on :root and the --bs-btn-* variables on .btn-primary, because buttons ignore --bs-primary.\n8. WordPress: markup must match what core blocks save (comment delimiters plus classes such as wp-block-heading) or the editor flags the block as invalid. Use a Custom HTML block where no core block fits, and a form plugin for forms.\n9. No libraries beyond the target. Forms still need a form handler: say so in a code comment.\n\n## Output format\n1. The file tree in a text block.\n2. Each file in its own code block with the right language tag (jsx, vue, html, css, php), headed by its filename in bold, in order: entry and config, layout, components, data.\n3. Numbered setup steps: create the project, where each file goes, run and build. WordPress: open the page, choose Code editor from the options menu, paste, switch back to the visual editor.\n4. One or two lines on where to edit text, colors and images.\n\n## Quality checks\n- Every visible text, link and image from the source is present.\n- Repeated sections are components fed by data, not copied markup.\n- SEO tags and a single h1 survive the conversion.\n- Alt text, labels and focus styles survive.\n- The code runs as given: imports match file names and every file in the tree is delivered.\n- Nothing beyond the target framework needs installing.\n\n## Next step\nOffer: \"Want changes to the new code? Describe them in plain English and I will edit it.\"\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}