Semmet Basic — Angular Code Generation (No Accessibility)

Offline Angular component/directive/block generation, following only the official Angular style guide — no ARIA, no keyboard/focus management, no generated CSS.

Semmet Basic generates real, working Angular components, headless directives, and composition blocks — powered by the semmet-angular-basic schematics collection, embedded directly in the extension. No semmet-angular-basic install, no npx, no network access needed in your project: the schematics engine and templates ship inside the extension itself, so it works even when the npm registry is blocked.

This is a fork of Semmet, which generates fully accessible Angular components (ARIA, keyboard, focus). Use Semmet Basic when you want the same component vocabulary with plain, minimal code and no accessibility contract to preserve — the consuming app owns any accessibility requirements it has, in full.

Generate a component

1. Open an Angular workspace (a folder with angular.json).
2. Command Palette (Cmd+Shift+P / Ctrl+Shift+P) → Semmet Basic: Generate Angular Component.
3. Pick a schematic — components grouped into generic components, financial/banking components, and composition blocks — type a name, and confirm the file preview.
4. Every generation runs a dry-run preview first; nothing is written until you confirm, and Semmet Basic never overwrites an existing file silently.

Generated classes are plain BEM, derived from the name you pick — e.g. a component named botao-voltar gets classes like .botao-voltar and .botao-voltar__icon. No CSS ships with generated components — style hooks only. There's no shared library-wide class name and no Semmet branding anywhere in the generated code — it reads like it was written by hand.

Requires Workspace Trust; generation is disabled in untrusted workspaces.

Generate a project setup

Command Palette → Semmet Basic: Generate Angular Project Setup covers the 8 "architectural" schematics that edit existing project files instead of only creating new ones: feature, api-resource, interceptor, e2e, ci, docker, deploy, ng-add. Files that would be edited get a real side-by-side diff, not just a filename list. e2e never installs Playwright automatically — it generates the harness files and tells you to run the install yourself.

AI agent workflow

Run Semmet Basic: Add AI Instructions to Workspace to write an AGENTS.md file into the current project with the full Figma-to-Semmet workflow (component inventory prompt, pattern-mapping table, variant-naming convention) and the live schematic catalog, so an AI coding agent can plan and generate matching components without guessing which schematic to use.

For agents with terminal access but no VS Code integration, the same engine is also callable directly as a standalone CLI shipped inside the installed extension:

node "<path-to-installed-extension>/dist/cli.js" button save-button --project=my-app --yes

Omit --yes to preview the files that would be created without writing them.

License

MIT