All skills

Interface Motion

WPCraft

Flawlessly transform any WordPress site into an agency-grade, motion-engineered web experience using Full Site Editing (FSE) block themes (like Frost) while preserving 100% visual CMS editability in the WordPress Site Editor. Use when asked to deeply customize WordPress without bloat, build or clone artistic websites (like shwn.design) into WordPress, implement WebGL/Canvas physics, SVG gooey morphing navigations, custom theme.json design tokens, dynamic typography switchers, squircle Bento grids, and Web Audio synthesis via WP-CLI and the WordPress REST API.

What this skill adds

WPCraft equips coding agents and developers to transform any standard WordPress installation into an ultra-premium, agency-grade web application without sacrificing native CMS capabilities. It bridges the gap between high-end creative frontend engineering (WebGL/Canvas physics, SVG filter morphing, squircle Bento grids, Web Audio synthesis) and native WordPress Full Site Editing (FSE) block architecture.

1. The Inviolable Prime Directive: 100% CMS Preservation

  • The fatal failure mode of traditional "custom" WordPress development is hardcoding templates into static PHP files that break the WordPress Site Editor (wp-admin/site-editor.php), leaving non-technical content editors stranded.
  • WPCraft enforces the **Sacred Invariant of CMS Preservation**:
  • **Gutenberg-Native Block Grammar**: Every section, component, hero headline, and grid item must be registered or wrapped using standard WordPress block markup (<!-- wp:group -->, <!-- wp:heading -->, <!-- wp:paragraph -->, <!-- wp:html -->).
  • **Template Part Decoupling**: Structural chrome lives exclusively in template parts (parts/header.html, parts/footer.html), while page layout lives in block templates (templates/home.html, templates/index.html).
  • **Full Site Editor Parity**: A site administrator opening /wp-admin/site-editor.php must be able to visually click, type, reorder, and save every textual and structural component without breaking underlying motion or physics scripts.
  • **Theme Safety & Isolation**: When activating an FSE theme (such as wpengine/frost), never delete existing client themes (e.g., astra). Retain legacy themes in an inactive state to enable instantaneous rollback if required.

2. Architectural Blueprint: Why Pure FSE Block Themes (Frost)

  • Traditional WordPress themes load bloated jQuery scripts, render-blocking CSS frameworks, and complex PHP template hierarchies. WPCraft standardizes on lightweight, pure FSE block themes (exemplified by **Frost**):
  • **Zero PHP Render Overhead**: Templates are pure HTML files containing Gutenberg block comments. The server outputs raw HTML with sub-50ms Time to First Byte (TTFB).
  • **Design Token Purity**: Spacing, fluid typography clamps, and palettes are governed cleanly by theme.json and REST-accessible Global Styles.
  • **Client-Side Module Independence**: Motion physics and audio engines execute as lightweight, zero-dependency vanilla ES modules, enqueued cleanly without framework bloat.
  • ---

3. The 5 Core Engineering Systems

  • ### System 1: Interactive Canvas & WebGL2 Physics
  • High-craft websites (e.g. shwn.design) feature interactive natural physics (sunlit water caustics, ripple wave propagation, fish flocking).
  • **Dual-Engine Architecture**: Implement high-performance WebGL2 shader pipelines with half-float texture ping-pong for caustics and wave diffusion, coupled with an automatic 2D Canvas fallback for constrained mobile or software-rendered viewports.
  • **Procedural Inverse Kinematics (IK)**: Multi-segment spine joints follow swimming sine oscillation trails, giving organic creatures lifelike swimming dynamics.
  • **Interactive Disturbance & Flocking**: Listen for pointer/touch coordinates (pointermove, pointerdown) to propagate ripple waves and scare boids away with acceleration bursts and tail-flick ripples.
  • ### System 2: Liquid / Gooey SVG Floating Navigations

4. Design Tokens & Global Styles Protocol

  • Never hardcode arbitrary CSS colors into templates. Manage visual tokens through WordPress Global Styles:
  • **Query Existing Styles**: Inspect active tokens via GET /wp/v2/global-styles/themes/frost or the custom styles post GET /wp/v2/global-styles/{id}.
  • **Inject Design Tokens**: Update the global styles post via POST /wp/v2/global-styles/{id}:
  • json
  • {
  • "settings": {

Default agent prompt

Use $wpcraft to transform this WordPress site into an agency-grade, motion-engineered experience with FSE block themes, canvas physics, and 100% visual CMS preservation.