Nebula

Nebula provides a template repository for @drupal-canvas/create to scaffold a new codebase for working with Drupal Canvas Code Components. The codebase serves as a development environment fully set up with tooling and examples for AI-assisted development workflows.

Getting started

Instead of cloning this repository, create a new project interactively:

npx @drupal-canvas/create@latest

AI-assisted development

Agent skills are located in .agents/skills/.

• nebula-* skills provide conventions and workflows specific for this repository.
• canvas-* skills are generic Canvas Code Component component guidance installed from drupal-canvas/skills.

Setup

No setup is required for the following coding agents; they read directly from .agents/skills/: Amp, Codex, Gemini CLI, GitHub Copilot, Kimi Code CLI, OpenCode. (This list can become outdated quickly; by the time you read this, additional coding agents may already standardize on this directory.)

If your coding agent does not standardize on this directory (for example, Cursor or Claude Code), manually symlink the relevant skill from .agents/skills/:

# For Claude Code
ln -s .agents/skills/<skill-name> .claude/skills/<skill-name>

# For Cursor
ln -s .agents/skills/<skill-name> .cursor/skills/<skill-name>

Adding new skills

Install new skills from skills.sh. For example:

npx skills add vercel-labs/agent-skills

Updating skills

Update the Drupal Canvas skills by re-adding and selecting all of them:

npx skills add drupal-canvas/skills

Once vercel-labs/skills#337 is resolved, you'll be able to use the npx skills check and npx skills update to check for and apply updates more efficiently.

Features

• @drupal-canvas/create installed
  • .env.example file with instructions specific to this codebase
• @drupal-canvas/eslint-config configured
  • Recommended rules are added on top of the required validation for the components to work in Drupal Canvas
• Storybook for developing and presenting the components
  • Viewports configured to match the viewport sizes Drupal Canvas uses
• Compiling with SWC through @vitejs/plugin-react-swc (Drupal Canvas uses @swc/wasm-web)
• Tailwind CSS v4 for styling
• Prettier with plugins configured
  • prettier-plugin-tailwindcss
  • @ianvs/prettier-plugin-sort-imports
• Pre-commit hook with Husky for linting and formatting staged files using lint-staged
• GitHub Actions workflows:
  • Static code checks
  • Validating PR titles against the Conventional Commits specification (delete .github/workflows/lint-pr.yml if you don't want this)
• Example components

Commands

Command	Description
npx canvas [command] [options]	Runs Drupal Canvas CLI commands (npx canvas lists available commands)
npm run dev	Starts Storybook's development server
npm run storybook	Alias for dev command
npm run build-storybook	Creates a static Storybook build
npm run code:check	Runs all code checks
npm run code:check:prettier	Checks code formatting with Prettier
npm run code:check:eslint	Checks code with ESLint
npm run code:fix	Runs all code fixes
npm run code:fix:prettier	Fixes code formatting with Prettier
npm run code:fix:eslint	Fixes code with ESLint