wordpress-theme-to-emdash
$
npx mdskill add emdash-cms/emdash/wordpress-theme-to-emdashPort WordPress themes to EmDash in six phases. **Read the phase file before starting each phase.**
SKILL.md
.github/skills/wordpress-theme-to-emdashView on GitHub ↗
--- name: wordpress-theme-to-emdash description: Port WordPress themes to EmDash CMS. Use when asked to convert, migrate, or port a WordPress theme to EmDash, or when creating an EmDash site that should match an existing WordPress site's design. Handles design extraction, template conversion, and EmDash-specific features like menus, taxonomies, and widgets. --- # WordPress Theme to EmDash Port WordPress themes to EmDash in six phases. **Read the phase file before starting each phase.** ## Critical Rules 1. **Copy scaffold first** - Start every theme by copying `scaffold/` from this skill 2. **Take screenshots of demo** - Identify the demo URL and capture all page types using agent-browser before starting work 3. **No hard-coded content** - Use `getSiteSettings()` for title/tagline, `getMenu()` for navigation 4. **Server-rendered pages** - Never use `getStaticPaths()` for EmDash content 5. **Astro 6** - Use `ClientRouter` not `ViewTransitions`, Zod 4 syntax, Node 22+ 6. **Use emdash Image component** - For all images, import Image from "emdash/ui" ## Phases | Phase | File | Summary | | ----- | ----------------------- | ----------------------------------------------- | | 1 | `phases/1-discovery.md` | Download theme, screenshot demo, capture images | | 2 | `phases/2-design.md` | Extract CSS variables, fonts, colors | | 3 | `phases/3-templates.md` | Convert PHP templates to Astro | | 4 | `phases/4-dynamic.md` | Site settings, menus, taxonomies, widgets | | 5 | `phases/5-seed.md` | Create seed file with demo content | | 6 | `phases/6-verify.md` | Screenshot, compare, iterate, build | ## Checklist ### Setup - [ ] Copy `scaffold/` to new theme directory. Unless otherwise specified by the user, make this a subdirectory of `themes/` and name it after the WordPress theme (e.g., `themes/twentytwentyfour/`). - [ ] Rename folder, update `package.json` - [ ] Verify build: `pnpm build` ### Phase 1: Discovery - [ ] Theme source downloaded - [ ] Demo site identified - [ ] `discovery/` folder created with `screenshots/`, `images/`, `notes.md` - [ ] All page types screenshotted - [ ] Sample images downloaded ### Phase 2: Design - [ ] CSS variables in `global.css` - [ ] Fonts loading - [ ] Colors match demo ### Phase 3: Templates - [ ] Homepage, single post, archive, category, tag, page, 404 - [ ] Components extracted (PostCard, etc.) ### Phase 4: Dynamic - [ ] Site settings (title, tagline, logo from CMS) - [ ] Navigation menus (from CMS, not hard-coded) - [ ] Taxonomies - [ ] Widget areas (if applicable) ### Phase 5: Seed - [ ] Seed file created with demo images at `.emdash/seed.json` (or wired up via `package.json#emdash.seed`) ### Phase 6: Verify - [ ] Dev server applied seed cleanly on first request (no validation errors in logs) - [ ] Output screenshots captured - [ ] Visual comparison done - [ ] Build succeeds: `pnpm build` - [ ] LICENSE file downloaded (GPL-2.0 in most cases) - [ ] README credits original theme ## Reference Documents - `references/astro-essentials.md` - Astro 6 patterns - `references/template-patterns.md` - PHP → Astro conversion - `references/concept-mapping.md` - WP → EmDash concepts - `references/emdash-api.md` - Full API reference - `references/design-extraction.md` - CSS extraction techniques
More from emdash-cms/emdash
- agent-browserBrowser automation for testing and verification. Use when you need to interact with web UIs, verify visual changes, fill forms, or capture screenshots.
- building-emdash-siteBuild and customize EmDash CMS sites on Astro. Use when creating pages, defining collections, writing seed files, querying content, rendering Portable Text, setting up menus/taxonomies/widgets, configuring deployment, or any task involving an EmDash-powered Astro site. Assumes basic Astro knowledge but provides all EmDash-specific patterns.
- creating-pluginsCreate EmDash CMS plugins with hooks, storage, settings, admin UI, API routes, and Portable Text block types. Use this skill when asked to build, scaffold, or implement an EmDash plugin, or when creating plugin features like custom block types, admin pages, or content hooks.
- diagnoseTrace from a reproduced symptom to the source code that causes it. Identify the specific file and approximate line, then rate confidence honestly.
- emdash-cliUse the EmDash CLI to manage content, schema, media, and more. Use this skill when you need to interact with a running EmDash instance from the command line — creating content, managing collections, uploading media, generating types, or scripting CMS operations.
- repro-adminReproduce an EmDash admin UI bug. Boots a demo with bgproc, drives the admin with agent-browser using the dev-bypass session, and captures the reproduction as screenshots plus a written transcript.
- repro-apiReproduce an EmDash bug that lives below the browser layer -- REST handlers, CLI, MCP, migrations, schema registry, or build tooling. No agent-browser. Prefer a failing vitest test in the affected package.
- repro-publicReproduce a bug in the public-facing rendered site (not the admin). Boots a demo with bgproc, drives the public routes with agent-browser, and captures the reproduction as screenshots plus a written transcript.
- verifyDecide whether the diagnosed behaviour is actually a bug or whether the code is doing what it was designed to do. Gate the fix stage.
- wordpress-plugin-to-emdashPort a WordPress plugin to EmDash CMS. Use this skill when asked to migrate, convert, or port a WordPress plugin, theme functionality, or custom post type to EmDash. Provides concept mapping and implementation patterns.