asset-builder

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

16 stars

Best use case

asset-builder is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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

Teams using asset-builder should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/asset-builder/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/tools/asset-builder/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/asset-builder/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How asset-builder Compares

Feature / Agentasset-builderStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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

```php
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

Related Skills

browser-extension-builder

16
from diegosouzapw/awesome-omni-skill

Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization ...

arduino-project-builder

16
from diegosouzapw/awesome-omni-skill

Build complete, production-ready Arduino projects (environmental monitors, robot controllers, IoT devices, automation systems). Assembles multi-component systems combining sensors, actuators, communication protocols, state machines, data logging, and power management. Supports Arduino UNO, ESP32, and Raspberry Pi Pico with board-specific optimizations. Use this skill when users request complete Arduino applications, not just code snippets.

anthropic-mcp-builder

16
from diegosouzapw/awesome-omni-skill

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

anthropic-dev-tools-mcp-builder

16
from diegosouzapw/awesome-omni-skill

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

analysis-spec-builder

16
from diegosouzapw/awesome-omni-skill

Build and iteratively refine physics analysis specifications using analysis-specification-template.md. Use when the user asks to create or update an analysis spec, requests plots/histograms for a dataset, or describes a quick analysis task that should be formalized into a specification document.

alerting-dashboard-builder

16
from diegosouzapw/awesome-omni-skill

Creates SLO-based alerts and operational dashboards with key charts, alert thresholds, and runbook links. Use for "alerting", "dashboards", "SLO", or "monitoring".

ai-rules-adapter-builder

16
from diegosouzapw/awesome-omni-skill

Add rules or skills adapters for a new AI tool and wire config, CLI, completion, and tests.

agnosticv:catalog-builder

16
from diegosouzapw/awesome-omni-skill

This skill should be used when the user asks to "create a catalog", "build a common.yaml", "add a new RHDP lab", "set up a new catalog item", "create an AgnosticV catalog", "build a dev.yaml", "add a catalog entry", or "create a new lab catalog for RHDP".

adb-builder

16
from diegosouzapw/awesome-omni-skill

No description provided.

acc-create-test-builder

16
from diegosouzapw/awesome-omni-skill

Generates Test Data Builder and Object Mother patterns for PHP 8.5. Creates fluent builders with sensible defaults and factory methods for test data creation.

acc-create-builder

16
from diegosouzapw/awesome-omni-skill

Generates Builder pattern for PHP 8.5. Creates step-by-step object construction with fluent interface and validation. Includes unit tests.

asset-management

16
from diegosouzapw/awesome-omni-skill

Complete asset management feature for Polkadot dApps using the Assets pallet. Use when user needs fungible token/asset functionality including creating custom tokens, minting tokens to accounts, transferring tokens between accounts, destroying tokens, viewing portfolios, or managing token metadata. Generates production-ready code (~2,200 lines across 15 files) with full lifecycle support (create→mint→transfer→destroy), real-time fee estimation, transaction tracking, and user-friendly error messages. Works with template infrastructure (WalletContext, ConnectionContext, TransactionContext, balance utilities, shared components). Load when user mentions assets, tokens, fungible tokens, token creation, minting, portfolio, or asset pallet.