name	wpuf-frontend-dev
description	Add or modify WPUF frontend code (jQuery, vanilla JS, Vue legacy, Tailwind). Use when creating components, modifying build configuration, or working with frontend assets.

WPUF Frontend Development

This skill provides guidance for developing WP User Frontend frontend code.

Framework Policy

New UI must use vanilla JS or jQuery. Vue is legacy — only touch existing Vue code for bug fixes. Do not create new Vue components or entry points.

Tech Stack

Technology	Usage	Files
jQuery	Frontend forms, form builder, general interactivity	`assets/js/`
Vue 3.4	Legacy only — existing admin pages (subscriptions, forms list, AI builder, account)	`.vue` files, Vite entry points
Tailwind CSS 3.3.5	Styling with scoped preflight	`tailwind.config.js`
Less	Legacy admin/frontend styles	`assets/less/`
Vite 5.1	Bundler for Vue entry points (5 entries)	`vite.config.mjs`
Grunt	Legacy tasks (Less, i18n, release)	`Gruntfile.js`

Build System

Vite (Primary — Vue Components)

5 entry points defined in vite.config.mjs:

Entry	Source	Output
`subscriptions`	`./assets/js/subscriptions.js`	`assets/js/subscriptions.min.js`
`frontend-subscriptions`	`./assets/js/frontend-subscriptions.js`	`assets/js/frontend-subscriptions.min.js`
`forms-list`	`./assets/js/forms-list.js`	`assets/js/forms-list.min.js`
`account`	`./assets/js/account.js`	`assets/js/account.min.js`
`ai-form-builder`	`./assets/js/ai-form-builder.js`	`assets/js/ai-form-builder.min.js`

Build commands:

npm run build                        # Full build (all modules + user-directory + CSS)
npm run build:forms-list             # Single: ENTRY=forms-list vite build
npm run build:subscriptions          # Single: ENTRY=subscriptions vite build
npm run build:frontend-subscriptions # Single: ENTRY=frontend-subscriptions vite build
npm run build:ai-form-builder        # Single: ENTRY=ai-form-builder vite build
npm run build:account                # Single: ENTRY=account vite build
npm run build:user-directory         # Build user directory module (Webpack)
npm run dev:user-directory           # Dev watch mode for user directory module

Vite output config:

JS: assets/js/[name].min.js (IIFE format, global name WPUF)
CSS: assets/css/[name].min.css
Source maps enabled

Grunt (Legacy Tasks)

grunt less:front      # Compile frontend Less
grunt less:admin      # Compile admin Less
grunt tailwind        # Generate Tailwind CSS
grunt tailwind-minify # Minify Tailwind output
grunt watch           # Watch for file changes
grunt makepot         # Generate .pot translation file
grunt release         # Full release build
npm run release       # Alias for grunt release

CSS Build

npm run build:css     # grunt tailwind && grunt tailwind-minify

Vue 3 Components (Legacy)

Vue 3.4 exists for legacy admin pages only. Do not create new Vue components.

Key Libraries

vue-router 4.3 — Client-side routing
@vueform/multiselect 2.6 — Multi-select inputs
@vuepic/vue-datepicker 8.2 — Date pickers
@headlessui/vue 1.7 — Accessible UI primitives
@heroicons/vue 2.1 — Icon set

Source Structure

src/
├── admin/           # Admin page components
├── components/      # Shared components
├── css/             # Source CSS
└── router/          # Vue Router config

assets/js/
├── subscriptions.js          # Vue entry: admin subscriptions
├── frontend-subscriptions.js # Vue entry: frontend packs page
├── forms-list.js             # Vue entry: forms listing
├── account.js                # Vue entry: user account
└── ai-form-builder.js        # Vue entry: AI form builder

jQuery (Legacy)

jQuery is still heavily used for:

Frontend post forms (frontend-form.js)
Form builder UI (wpuf-form-builder.js)
File uploads (wpuf-upload.js)
Validation (jquery.validate)

These are not built via Vite/Webpack — they live directly in assets/js/.

Tailwind CSS

Config: tailwind.config.js

Key Settings

Prefix: wpuf- — All Tailwind classes are prefixed to prevent conflicts
Preflight: Scoped via tailwindcss-scoped-preflight — only applies inside specific containers
Plugins: @tailwindcss/forms (class strategy), daisyui
Primary color: emerald[600]

Scoped Containers

Tailwind preflight styles only apply inside these selectors:

.wpuf_packs
#wpuf-subscription-page
#wpuf-form-builder
#wpuf-profile-forms-list-table-view
#wpuf-post-forms-list-table-view
#wpuf-ai-form-builder
.wpuf-ai-form-wrapper
.swal2-container
.wpuf-account-container
.wpuf-form-template-modal

Usage

<!-- All Tailwind classes must use wpuf- prefix -->
<div class="wpuf-bg-primary wpuf-text-white wpuf-p-4">
    <button class="wpuf-btn wpuf-btn-primary">Submit</button>
</div>

Localization / Translation (JavaScript)

Vue Components

Use @wordpress/i18n via import:

import { __, _n, sprintf } from '@wordpress/i18n';

const label = __( 'Save changes', 'wp-user-frontend' );

Localized Data (PHP -> JS)

Server-side data is passed via wp_localize_script():

wpuf_admin_script — Admin-side data (nonce, URLs, version, Pro status)
wpufAIFormBuilder — AI form builder config (endpoints, templates, i18n)

Key Rules

Text domain: Always use 'wp-user-frontend' (not 'wpuf')
Never concatenate translated strings — use sprintf() with placeholders
Always add translator comments for strings with placeholders

Asset Registration

Scripts and styles are registered in includes/Assets.php. When adding new assets:

Register the script/style in Assets.php
Enqueue in the appropriate admin/frontend hook
Use wp_set_script_translations() for translation support

Key Reference Files

vite.config.mjs — Vite configuration (5 entry points)
tailwind.config.js — Tailwind with wpuf- prefix and scoped preflight
postcss.config.js — PostCSS configuration
Gruntfile.js — Legacy tasks (Less, i18n, release)
package.json — All build scripts and dependencies
includes/Assets.php — Script/style registration
includes/Admin.php — Admin script enqueuing

name	wpuf-frontend-dev
description	Add or modify WPUF frontend code (jQuery, vanilla JS, Vue legacy, Tailwind). Use when creating components, modifying build configuration, or working with frontend assets.