Claude-skill-registry asset-builder

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

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/asset-builder" ~/.claude/skills/majiayu000-claude-skill-registry-asset-builder && rm -rf "$T"

manifest: skills/data/asset-builder/SKILL.md

Asset Builder

Instructions

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

Source files location: Check
```
src/
```
or project root
Build commands: Use npm scripts from package.json
Output location:
```
dist/assets/
```
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