A3 build system reference — Embroider, Vite, Babel, TypeScript, route splitting, PWA support, and build configuration
From a3-pluginnpx claudepluginhub trusted-american/marketplace --plugin a3-pluginThis skill uses the workspace's default tool permissions.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Implements structured self-debugging workflow for AI agent failures: capture errors, diagnose patterns like loops or context overflow, apply contained recoveries, and generate introspection reports.
| Tool | Purpose |
|---|---|
| Vite 7 | Dev server & bundler |
| Embroider 4 | Ember-to-Vite bridge |
| Babel | JavaScript/TypeScript transformation |
| TypeScript 5 | Type checking |
| Tailwind via @tailwindcss/vite | CSS processing |
| VitePWA | Progressive Web App support |
// vite.config.mjs
import { defineConfig } from 'vite';
import { embroider } from '@embroider/vite';
import tailwindcss from '@tailwindcss/vite';
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
plugins: [
embroider(),
tailwindcss(),
VitePWA({ /* PWA config */ }),
],
});
Embroider is the modern build pipeline that converts Ember apps to standard Vite/webpack builds.
// ember-cli-build.js
const app = new EmberApp(defaults, {
// Embroider configuration
});
return require('@embroider/compat').compatBuild(app, {
splitAtRoutes: ['admin', 'authenticated', 'login'],
});
This means:
/admin/* routes load their own JS bundle/a3/* (authenticated) routes load their own JS bundle/login routes load their own JS bundle// tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "bundler",
"strict": true,
"noEmit": true,
"declaration": true,
"declarationDir": "declarations",
"experimentalDecorators": true,
"emitDecoratorMetadata": false
},
"include": ["app/**/*", "types/**/*", "tests/**/*"]
}
strict: true — Full strict modeexperimentalDecorators: true — Required for Ember decoratorsmoduleResolution: "bundler" — Modern module resolution// babel.config.cjs
module.exports = {
plugins: [
['@babel/plugin-transform-typescript', { allowDeclareFields: true }],
'@babel/plugin-transform-runtime',
'decorator-transforms',
'babel-plugin-ember-template-compilation',
],
};
Via vite-plugin-pwa, A3 can work as a Progressive Web App:
// eslint.config.mjs
import ember from 'eslint-plugin-ember';
import typescript from 'typescript-eslint';
export default [
...ember.configs['recommended'],
...typescript.configs['recommended'],
{ rules: { /* custom rules */ } },
];
// .prettierrc.mjs
export default {
singleQuote: true,
trailingComma: 'all',
printWidth: 100,
};
// .stylelintrc.cjs
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-tailwindcss',
],
};
// .template-lintrc.mjs
export default {
extends: 'recommended',
rules: { /* custom template rules */ },
};
| Command | Purpose |
|---|---|
ember serve / vite dev | Start dev server |
ember test | Run tests |
ember build --environment production | Production build |
firebase emulators:start | Start Firebase emulator |
firebase deploy --only functions | Deploy Cloud Functions |
firebase deploy --only firestore:rules | Deploy Firestore rules |