The open-source SDK for building plugins anywhere. WordPress today; more platforms next. Built so humans and AI agents can ship plugins that look native, behave correctly, and pass review.
Every plugin-host ecosystem — WordPress, Shopify, Figma, VSCode, Slack, Chrome — makes you re-learn the same three things: how to make your plugin look native, how to keep it secure, and how to keep an AI agent from generating the wrong shape of code.
Plugin SDK is the answer: one SDK, with platform adapters that emit native-looking output, platform-correct security patterns, and agent-readable skill files. WordPress is the first adapter — it gets the full design system, runtime helpers, plugin scaffold, and 7 focused agent skills. Other platforms are next.
plugin-sdk/
├── packages/
│ ├── cli/ → @plugin-sdk/cli — the cross-platform scaffolder (new)
│ ├── wp-tokens/ → @plugin-sdk/wp-tokens
│ ├── wp-core-css/ → @plugin-sdk/wp-core-css
│ ├── wp-react/ → @plugin-sdk/wp-react
│ └── wp-composer/ → plugin-sdk/wp (Composer)
├── boilerplates/
│ └── wordpress/ ← Ready-to-clone WordPress plugin scaffold
├── platforms/
│ └── wordpress/
│ ├── AGENTS.md ← WordPress-specific agent instructions
│ └── skills/ ← Focused expertise: security · database · enqueue · …
├── apps/
│ ├── site/ ← wp-admincss.com (will migrate to plugin-sdk.com)
│ └── videos/ ← Remotion promo videos
└── package.json ← npm workspaces root
<link rel="stylesheet" href="https://cdn.wp-admincss.com/css/latest.css">
<div class="wrap">
<h1 class="wp-heading-inline">My Plugin</h1>
<a href="?page=add-new" class="page-title-action">Add New</a>
<hr class="wp-header-end">
<div class="notice notice-success is-dismissible">
<p><strong>Settings saved.</strong></p>
</div>
<p class="submit">
<button class="button button-primary">Save Changes</button>
</p>
</div>Pin to a version in production: https://cdn.wp-admincss.com/css/v0.1.0/wp-admin.css.
npx @plugin-sdk/cli@next create "My Plugin"Interactive prompts ask for the slug, namespace, constant prefix, author, and distribution channel. For a fully non-interactive run:
npx @plugin-sdk/cli@next create my-plugin \
--platform=wordpress \
--channel=wp.org \
--yesThe channel decides which CI workflows and helper scripts ship with the scaffold:
--channel= |
Updates from… | release.yml? |
readme.txt + submission-prep? |
PUC code? |
|---|---|---|---|---|
wp.org (default) |
WordPress.org SVN | no | yes | none |
github |
GitHub releases (Plugin Update Checker) | yes | no | always-on |
dual |
Both — wp.org for the directory, GH for early access | yes | yes | marker-gated |
Every scaffold is a complete working plugin with:
- Manifest-driven runtime —
plugin-sdk.jsondeclares the settings page, REST routes, and custom tables; onePlugin::fromManifest()call wires every WordPress hook with capability checks, nonces, sanitisation, and JSON-schema body validation built in. - Build pipeline —
bin/build.shproduces a wp.org-clean dist + zip viarsyncand.distignore.phpcs.xml.dist+composer run lintmirror what wp.org reviewers run. - CI workflows —
.github/workflows/ci.ymlruns lint + Plugin Check on every push. Forgithub/dualchannels,.github/workflows/release.ymlauto-bumps the version (commit message tokens[major]/[minor]/[skip-release]control it), pushes the bump back tomain, builds the dist, runs Plugin Check, and publishes a GitHub release with both zips. - Submission prep (
wp.org/dual) —npm run prepwalks the same checks a wp.org reviewer will run and prints the SVN trunk → tag commands for first submission and subsequent releases. - Slug research —
npm run slug-researchqueries the wp.org API + scans for trademark collisions before you commit to a slug (which can't be renamed after wp.org approval). - Reference WordPress code — secure settings page, custom-table repository (using the WP 6.2+
%iidentifier placeholder), REST controller, lifecycle hooks, PSR-4 autoload, i18n setup, scoped asset enqueue. Lint-clean against WPCS + PHPCompatibilityWP on a fresh scaffold.
- Pick your platform. WordPress today:
https://cdn.wp-admincss.com/wordpress/AGENTS.md. Other platforms coming. - Load skills as needed. Available at
https://cdn.wp-admincss.com/wordpress/skills/<name>.md. The current set:security.md— required for any state-changing action.database.md/data-modeling.md—$wpdbpatterns + deciding where to store data.enqueue.md— adding admin CSS/JS.i18n.md— translation patterns.plugin-manifest.md— the declarativeplugin-sdk.jsonreference.plugin-structure.md— file layout + autoloading.publishing.md— Plugin Check rules + slug research +readme.txtformat.submission-prep.md— the wp.org submission flow (npm run prep, SVN trunk → tag).release-pipeline.md— the GitHub release flow (auto-bump on merge, PUC, dual-channel).
- Scaffold via the CLI —
npx @plugin-sdk/cli@next create "<name>"— or use the boilerplate directly atboilerplates/wordpress/. - Browse the visual catalog at wp-admincss.com/components and wp-admincss.com/layouts.
CSS custom properties mirroring WP admin's design system. Override-able per WP color scheme via the native .admin-color-* body classes.
@import "@plugin-sdk/wp-tokens";
.my-plugin-card {
border-left: 3px solid var(--wpadmin-primary);
padding: var(--wpadmin-space-4);
color: var(--wpadmin-text);
}The WordPress admin CSS bundle (common, forms, list-tables, dashboard, etc.) plus a small extensions.css layer for modern patterns WP core doesn't ship (status badges, stat cards, toggle switches, empty states, skeleton loaders, WP-style pointers, help tips). Dashicons included by default.
<link rel="stylesheet" href="https://cdn.wp-admincss.com/css/latest.css">React components that render real WordPress admin class names. No styled-components, no runtime CSS-in-JS. Pair with wp-core-css for styles.
npm install @plugin-sdk/wp-react @plugin-sdk/wp-core-cssimport { Wrap, PageHeader, Notice, Button } from '@plugin-sdk/wp-react';
<Wrap>
<PageHeader title="My Plugin" action={{ label: 'Add New', href: '?page=new' }} />
<Notice variant="success" dismissible><p><strong>Settings saved.</strong></p></Notice>
<Button variant="primary">Save Changes</Button>
</Wrap>PHP render helpers for plugins that render admin pages server-side.
composer require plugin-sdk/wpuse PluginSDK\WP\Components;
use PluginSDK\WP\Assets;
add_action('admin_enqueue_scripts', [Assets::class, 'enqueue_cdn']);
echo Components::wrap(
Components::page_header('My Plugin', ['action' => ['label' => 'Add New', 'href' => '?page=new']]) .
Components::notice_success('Settings saved.', ['dismissible' => true]) .
Components::button('Save Changes', ['variant' => 'primary'])
);Browse every primitive at wp-admincss.com/components and pre-assembled full plugin pages at wp-admincss.com/layouts. Each component has a live preview, the HTML to copy, and an AI prompt you can hand straight to your coding agent.
Hosted at cdn.wp-admincss.com (migrating to cdn.plugin-sdk.com later):
| URL | Content |
|---|---|
https://cdn.wp-admincss.com/css/latest.css |
Latest CSS bundle (rolling) |
https://cdn.wp-admincss.com/css/v0.1.0/wp-admin.css |
Pinned version |
https://cdn.wp-admincss.com/AGENTS.md |
Master agent instructions (WordPress) |
https://cdn.wp-admincss.com/skills/<name>.md |
Individual skill files |
Pin a version for production.
Tokens respond automatically to WP's nine built-in color schemes. Add the WP body class — or apply it to any ancestor element for isolated theming.
<body class="admin-color-midnight">
<!-- All tokens now use Midnight scheme values -->
</body>Schemes: Default, Blue, Coffee, Ectoplasm, Midnight, Ocean, Sunrise, Light, Modern.
Override CSS custom properties in your plugin's stylesheet:
.my-plugin-page {
--wpadmin-primary: #7c3aed;
--wpadmin-primary-dark: #6d28d9;
--wpadmin-radius: 8px;
}Scope to a wrapper class so the rebrand only affects your plugin's screen — the rest of WP admin stays consistent.
npm install # installs workspaces
npm run dev # starts the site dev server
npm run build # builds the production site + CDN
npm run build:site # site only (apps/site/dist/)
npm run build:cdn # CDN only (cdn/)
npm test # runs unit + smoke tests across all packagesThe project ships as two Cloudflare Pages projects:
| Project | Source dir | Custom domains |
|---|---|---|
wp-admincss-site |
apps/site/dist/ |
wp-admincss.com, www.wp-admincss.com |
wp-admincss-cdn |
cdn/ |
cdn.wp-admincss.com |
npm run build
wrangler pages deploy apps/site/dist --project-name=wp-admincss-site --branch=main
wrangler pages deploy cdn --project-name=wp-admincss-cdn --branch=mainSplit license:
- Apache 2.0 — repo root,
packages/cli/,apps/site/,platforms/wordpress/AGENTS.md, andplatforms/wordpress/skills/. These are tools and docs — never distributed inside a plugin. See LICENSE and NOTICE. - Apache 2.0 OR GPLv2-or-later (your choice) —
packages/wp-composer/,packages/wp-tokens/,packages/wp-react/. These get vendored INSIDE distributed plugins, so they are dual-licensed: pick GPLv2-or-later when shipping to the WordPress.org directory, Apache 2.0 anywhere that suits you better. Each package carriesLICENSE(Apache) andLICENSE-GPL2. - GPLv2-or-later —
packages/wp-core-css/(bundles WordPress core admin CSS, which is GPL) andboilerplates/wordpress/(WordPress plugin scaffold). Seepackages/wp-core-css/LICENSE,packages/wp-core-css/NOTICE, andboilerplates/wordpress/LICENSE.
Why the dual license: Apache 2.0 is GPLv3-compatible but not GPLv2-compatible, and the WordPress.org directory requires GPLv2-or-later compatibility for everything a plugin ships. Under the dual license a plugin author simply elects the GPL branch for the vendored packages and the whole zip is cleanly GPLv2-or-later.
Built by Artificial Poets.