Agent skill
asset-builder
Manage CSS/JS building with npm/wp-scripts. Use when working on login page styles or scripts.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?