Presets are pre-configured Hugsy configurations that you can extend and customize. They provide a quick way to set up common development environments.

Using Presets

To use a preset, add the extends field to your.hugsyrc.json file:

{
  "extends": "@hugsylabs/hugsy-compiler/presets/strict"
}

Available Built-in Presets

@hugsylabs/hugsy-compiler/presets/development

Full-featured development environment with permissive settings

@hugsylabs/hugsy-compiler/presets/recommended

Balanced configuration for most projects with reasonable defaults

@hugsylabs/hugsy-compiler/presets/strict

Maximum security and restrictions for sensitive environments

@hugsylabs/hugsy-compiler/presets/showcase

Demonstrates all capabilities and features of Hugsy

Multiple Presets

You can extend multiple presets. They are applied in order, with later presets overriding earlier ones:

{
  "extends": [
    "@hugsylabs/hugsy-compiler/presets/base",
    "@company/hugsy-preset-frontend"
  ]
}

Preset Resolution Order

  1. Base presets are loaded first (in order)
  2. Each preset's configuration is merged
  3. Your local configuration overrides preset values
  4. Plugins are applied last

Overriding Preset Values

You can override specific values from a preset by defining them in your configuration:

{
  "extends": "@hugsylabs/hugsy-compiler/presets/strict",
  "permissions": {
    "allow": [
      "Write(**/*.test.js)",
      "Bash(npm run dev)"
    ]
  },
  "env": {
    "NODE_ENV": "development"
  }
}

In this example, the additional permissions and environment variables are merged with the security preset's configuration.

Creating Custom Presets

You can create and share your own presets as npm packages. A preset is simply a JSON configuration file:

{
  "name": "@company/hugsy-preset-frontend",
  "version": "1.0.0",
  "description": "Company frontend development preset",
  "permissions": {
    "allow": [
      "Read(**)",
      "Write(**/*.{js,jsx,ts,tsx})",
      "Write(**/*.{css,scss,sass})",
      "Write(**/*.{json,md})",
      "Bash(npm *)",
      "Bash(yarn *)",
      "Bash(pnpm *)",
      "Bash(git *)"
    ],
    "deny": [
      "Write(**/node_modules/**)",
      "Write(**/.git/**)",
      "Write(**/build/**)",
      "Write(**/dist/**)",
      "Bash(rm -rf *)",
      "Bash(sudo *)"
    ]
  },
  "env": {
    "NODE_ENV": "development",
    "PRESET": "frontend"
  },
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Write(**/*.{js,jsx,ts,tsx})",
        "command": "echo 'Code file modified'"
      }
    ]
  },
  "commands": {
    "presets": ["@hugsylabs/hugsy-compiler/presets/slash-commands-common"],
    "commands": {
      "build": {
        "description": "Build the frontend application",
        "content": "Run: npm run build"
      }
    }
  }
}

Publishing a Preset

  1. Create an npm package with your preset configuration
  2. Export the configuration as index.json
  3. Add hugsy-preset keyword to package.json
  4. Publish to npm registry
  5. Users can now extend your preset using its package name

Preset vs Plugin

When to use what?

Use a Preset when:

  • You want a complete configuration template
  • You're setting up standard environments (dev, staging, prod)
  • You want to share configurations across projects
  • You need static configuration values

Use a Plugin when:

  • You need dynamic configuration based on conditions
  • You want to transform existing configurations
  • You need to add computed values or logic
  • You want to react to other plugins or presets

Best Practices

  • Start with a built-in preset and customize as needed
  • Create team/organization presets for consistency
  • Document what your preset includes and why
  • Version your presets properly for compatibility
  • Test presets across different project types