Claude Code Plugins

Community-maintained marketplace

Feedback

asset-builder

@dreamworks2050/retro-login
0
0

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

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name asset-builder
description Manage 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