giuseppe-trisciuoglio/developer-kit

Comprehensive developer toolkit providing reusable skills for Java/Spring Boot, TypeScript/NestJS/React/Next.js, Python, PHP, AWS CloudFormation, AI/RAG, DevOps, and more.

Quality

82%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Risky

Do not use without reviewing

Validation failed for skills in this tile

One or more skills have errors that need to be fixed before they can move to Implementation and Discovery review.

Bud Build Configuration Reference

Name: giuseppe-trisciuoglio/developer-kit
Rating: 82.6470588235294 (1 reviews)
Author: giuseppe-trisciuoglio

Complete reference for configuring Bud (Sage's build tool based on Vite).

Configuration File

bud.config.js - Main configuration file in theme root.

Basic Configuration

import config from '@roots/bud'

export default async (app) => {
  app
    .entry({
      app: ['./resources/scripts/main.js', './resources/styles/main.scss'],
      editor: ['./resources/scripts/editor.js', './resources/styles/editor.scss'],
    })
    .publicPath('/wp-content/themes/my-theme/public/')
}

Entry Points

Define multiple entry points for different contexts:

app.entry({
  // Frontend
  app: ['@scripts/main', '@styles/main'],

  // Editor (Gutenberg)
  editor: ['@scripts/editor', '@styles/editor'],

  // Custom admin
  admin: ['@scripts/admin', '@styles/admin'],
})

Asset Management

Copy Assets

app.assets('images', 'fonts')

Copy files from resources/ to public/:

resources/images/logo.png → public/images/logo.png
resources/fonts/inter.woff2 → public/fonts/inter.woff2

Custom Paths

app.assets(['images', 'fonts', 'icons'])

Runtime

Enable runtime manifest for dynamic asset loading:

app.runtime()

Creates public/manifest.json with asset mappings.

Tailwind CSS

Enable Tailwind

import tailwindcss from '@roots/bud-tailwindcss'

app.use(tailwindcss)

Configuration

tailwind.config.js:

export default {
  content: [
    './resources/views/**/*.blade.php',
    './resources/scripts/**/*.js',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#1e40af',
        secondary: '#7c3aed',
      },
    },
  },
}

Sass Configuration

Options

app.tailwind({
  options: {
    includePaths: ['node_modules'],
  },
})

Aliases

Create import aliases:

app.alias({
  '@': 'resources',
  '@scripts': 'resources/scripts',
  '@styles': 'resources/styles',
  '@components': 'resources/views/components',
})

Usage in JavaScript:

import Button from '@/components/button'

Minification

Control minification per environment:

app.minimize(true) // Always minimize
app.minimize(false) // Never minimize
app.minimize(!app.isDevelopment) // Only in production

Source Maps

app.js({ sourcemaps: true })

Dev Server

Proxy Configuration

app.proxy('http://localhost:3000')

Watch Paths

app.watch([
  'resources/views/**/*.blade.php',
  'app/**/*.php',
])

Server Options

app.server({
  host: 'localhost',
  port: 3000,
  hmr: true,
})

PostCSS

Plugins

import postcssPresetEnv from 'postcss-preset-env'

app.postcss.set('plugins', [
  postcssPresetEnv({ stage: 1 }),
])

Dependencies

External Dependencies

app.provide({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
})

Vendor Splitting

app.vendor('jquery', 'lodash')

Optimization

Split Chunks

app.splitChunks(false) // Disable
app.splitChunks({
  strategy: 'default', // or 'single', 'all'
})

Lazy Loading

app.optimization.moduleChunks(true)

Environment

Detection

app.isDevelopment // true in dev mode
app.isProduction  // true in production

Conditional Config

if (app.isProduction) {
  app.minimize()
}

if (app.isDevelopment) {
  app.devtool('eval-cheap-module-source-map')
}

Commands Reference

# Development
npm run dev           # Start dev server with HMR
npm run dev -- --watch  # Watch mode without server

# Production
npm run build         # Build for production
npm run build -- --minify  # Build with extra minification

# Utilities
npm run clean         # Clean build directory
npm run check         # Check configuration

Complete Example

import config from '@roots/bud'
import tailwindcss from '@roots/bud-tailwindcss'

export default async (app) => {
  app
    // Entry points
    .entry({
      app: ['@scripts/main', '@styles/main'],
      editor: ['@scripts/editor', '@styles/editor'],
    })
    // Public path
    .publicPath('/wp-content/themes/my-theme/public')
    // Runtime manifest
    .runtime()
    // Asset copying
    .assets('images', 'fonts')
    // Tailwind
    .use(tailwindcss)
    // Aliases
    .alias({
      '@': 'resources',
      '@scripts': 'resources/scripts',
      '@styles': 'resources/styles',
    })
    // Minification
    .minimize(!app.isDevelopment)
    // Source maps
    .js({ sourcemaps: app.isDevelopment })
    // Dev server
    .proxy('http://localhost:3000')
    .watch([
      'resources/views/**/*.blade.php',
      'app/**/*.php',
    ])
}

Troubleshooting

HMR Not Working

Check proxy URL matches WordPress URL:

app.proxy('http://localhost:3000') // Must match WP_URL

Assets 404

Ensure public path is correct:

app.publicPath('/wp-content/themes/my-theme/public/')

Tailwind Classes Not Generated

Check content paths in tailwind.config.js:

content: [
  './resources/views/**/*.blade.php', // Include Blade files
]

plugins

developer-kit-aws

developer-kit-core

developer-kit-java

developer-kit-php

skills

aws-lambda-php-integration

wordpress

wordpress-sage-theme

references

developer-kit-python

developer-kit-tools

developer-kit-typescript

README.md

tile.json