asset-builder

dreamworks2050's avatarfrom dreamworks2050

Manage CSS/JS building with npm/wp-scripts. Use when working on login page styles or scripts.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 29, 2025
[Developer Tools]

When & Why to Use This Skill

The Asset Builder skill is designed to automate and streamline the management of CSS and JavaScript assets specifically for WordPress login pages. By integrating npm and wp-scripts, it handles the entire frontend lifecycle—from development watching and linting to production-ready minification—ensuring that custom login interfaces are high-performing, well-structured, and follow WordPress best practices.

Use Cases

  • Customizing the WordPress login page UI: Use specific CSS selectors and variables to create a branded authentication experience that matches the site's identity.
  • Automating asset compilation: Leverage wp-scripts to transform modern JavaScript and SCSS/CSS into optimized, minified files for production deployment.
  • Streamlining local development: Utilize the 'watch' command to automatically rebuild assets in real-time as files are edited, speeding up the design iteration process.
  • Ensuring code quality: Run automated linting for both JavaScript and CSS to maintain clean, error-free codebases and adhere to industry standards.
  • Standardizing asset enqueuing: Implement the correct WordPress hooks (login_enqueue_scripts) to ensure styles and scripts are loaded efficiently and only where needed.
nameasset-builder
descriptionManage CSS/JS building with npm/wp-scripts. Use when working on login page styles or scripts.

Asset Builder

Instructions

When working with CSS/JS assets for the login page:

  1. Source files location: Check src/ or project root
  2. Build commands: Use npm scripts from package.json
  3. Output location: dist/assets/
  4. Enqueue hook: Use login_enqueue_scripts

Build Commands

Command Purpose
npm run start Watch mode - rebuild on file changes
npm run build Production build - minified assets
npm run lint:js Lint JavaScript
npm run lint:css Lint CSS

Enqueue on Login Page

add_action('login_enqueue_scripts', 'retrologin_enqueue_assets');
function retrologin_enqueue_assets(): void {
    wp_enqueue_style(
        'retrologin-login',
        plugins_url('dist/assets/login.css', __FILE__)
    );
    wp_enqueue_script(
        'retrologin-login',
        plugins_url('dist/assets/login.js', __FILE__),
        ['wp-api-fetch'],
        '0.1.0',
        true
    );
}

Login Page CSS Selectors

Element Selector
Page wrapper .login
Login form #loginform
Logo .login h1 a
Messages .login .message
Submit button .wp-submit-button

Guidelines

  • Keep login assets minimal for performance
  • Login page doesn't load theme styles
  • Use CSS variables for retro theming
  • Test assets in browser after building