{"id":51820505,"url":"https://github.com/vuanhtung10/angular-vibe-kit","last_synced_at":"2026-07-24T14:00:36.652Z","repository":{"id":362271836,"uuid":"1258137623","full_name":"vuanhtung10/angular-vibe-kit","owner":"vuanhtung10","description":null,"archived":false,"fork":false,"pushed_at":"2026-07-02T06:05:46.000Z","size":104,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-02T07:15:26.544Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vuanhtung10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-03T09:59:16.000Z","updated_at":"2026-07-02T05:21:05.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/vuanhtung10/angular-vibe-kit","commit_stats":null,"previous_names":["vuanhtung10/angular-vibe-kit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vuanhtung10/angular-vibe-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuanhtung10%2Fangular-vibe-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuanhtung10%2Fangular-vibe-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuanhtung10%2Fangular-vibe-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuanhtung10%2Fangular-vibe-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vuanhtung10","download_url":"https://codeload.github.com/vuanhtung10/angular-vibe-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuanhtung10%2Fangular-vibe-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35844578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-24T02:00:07.870Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-22T05:00:25.531Z","updated_at":"2026-07-24T14:00:36.632Z","avatar_url":"https://github.com/vuanhtung10.png","language":"JavaScript","funding_links":[],"categories":["Development Utilities"],"sub_categories":["AI"],"readme":"# angular-vibe-kit\n\nBootstrap a **Vibe Coding workflow** into any Angular project: a `CLAUDE.md`, a set\nof project docs, and Claude Code slash-commands — with **best-practice rules matched\nto your Angular version**.\n\nJoin an existing Angular project, run one command, and your AI assistant gains a\npersistent memory of how *this* codebase works.\n\n---\n\n## Why\n\nAI coding tools have no memory between sessions. Without a project context file they\nre-guess your conventions every time — wrong component patterns, wrong API shapes,\nwrong state management. This kit generates that context **from your actual codebase**,\nand keeps the AI honest with version-correct Angular rules (v14 → v19).\n\nIt also handles the real-world case: **the project isn't fully best-practice yet.**\nThe kit adds correct rules for *new* code without forcing risky refactors on legacy\nmodules (Strangler Fig). And when the project wraps its UI library in `shared/components/`,\nthe kit teaches the AI to always use the wrapper, not the raw library import.\n\n---\n\n## Install\n\nRun inside the root of your Angular project:\n\n```bash\nnpx @tungvivas/angular-vibe-kit\n```\n\nThe installer (no AI, fully deterministic):\n\n1. Reads `./package.json` → detects your Angular version\n2. Copies slash-commands → `./.claude/commands/`\n3. Copies the **version-matched** best-practice file → `./.claude/angular-practices/`\n4. Installs **skills** → `./.claude/skills/` (auto-applied by Claude — no command needed)\n5. Installs **references** → `./.claude/references/` (shared review checklist + test spec)\n6. Installs **agents** → `./.claude/agents/` (Angular subagents, isolated context)\n7. Writes **settings.json** → `./.claude/settings.json` (allowlist + build-verify hook)\n8. Copies doc templates → `./docs/` and `./CLAUDE.md`, rules → `./.claude/rules/`\n9. Tells you to run `/init` in Claude Code\n\n\u003e Requires Node.js 16+ (only for the installer — your project stays pure Angular).\n\n### Options\n| Flag | Effect |\n|------|--------|\n| `--version \u003cn\u003e` | Override detected version (e.g. `--version 17`) |\n| `--force` | Overwrite files that already exist |\n| `--dry-run` | Show what would happen, write nothing |\n| `-h, --help` | Help |\n\n---\n\n## Use\n\nAfter install, open the project in **Claude Code**:\n\n```\n/init            ← scan codebase, ask to confirm uncertain bits, generate docs\n```\n\n`/init` generates, one file at a time (you review each):\n`CLAUDE.md` → `docs/api-contracts/` (index + one file per feature) → `docs/ARCHITECTURE.md` →\n`docs/PROJECT-RULES.md` → `docs/PROJECT-STATUS.md` → `docs/DESIGN_SYSTEM.md` →\n`docs/decisions/`.\n\nThen every working session:\n\n| Command | When | Does |\n|---------|------|------|\n| `/start` | Start of session | Read docs, summarize progress, wait |\n| `/convert-srs` | Non-MD SRS source (PDF/DOCX/PPTX/XLSX/ảnh) | Wraps `markitdown` → split multi-module → index `docs/srs/` |\n| `/plan` | Large feature, before coding | Clarify → approaches → design → write task-by-task plan to `docs/plans/` |\n| `/new-feature` | New module — code only | Scaffold → implement. Tests/docs/review run separately via `/write-tests` / `/write-context` / `/write-api-contracts` / `/update-status` / `/review-pr` |\n| `/write-tests` | Code without tests | Service spec + component test |\n| `/write-context` | New/complex module | Create `CONTEXT.md` snapshot |\n| `/write-api-contracts` | New endpoints, contract drift | Sync `docs/api-contracts/\u003cfeature\u003e.md` + Domains index from the feature's service code |\n| `/review-pr` | Before commit | Angular review checklist → 🔴/🟡/🟢 |\n| `/update-status` | End of session | Update `PROJECT-STATUS.md` + commit |\n| `/dev-cycle` | Whole feature | Gated end-to-end orchestrator |\n\n**Recommended flow for a sizeable feature:** `/convert-srs` (only if your SRS arrives as a\nnon-Markdown file — PDF/DOCX/PPT/XLSX/ảnh/audio/YouTube/ZIP/EPub) → `/plan` → review the plan doc → `/dev-cycle` (or\n`/new-feature`). `/plan` clarifies the requirement, weighs 2-3 approaches, and writes a reviewed,\ntask-by-task plan to `docs/plans/`; both `/dev-cycle` and `/new-feature` **auto-detect that plan**\nand follow its File Map and interfaces instead of re-deriving structure on the fly. Use\n`/dev-cycle` for the full gated pipeline (implement → test → review → wrap-up), `/new-feature` for\ncode-only when you want to drive tests/docs/review manually. Small features can skip `/plan` and\ngo straight into `/dev-cycle` / `/new-feature`. The `/plan` workflow is adapted from\n[obra/superpowers](https://github.com/obra/superpowers) (MIT).\n\nIf your requirements come in a non-Markdown format — Word `.docx`, PowerPoint, Excel, PDF spec,\nscreenshot, audio, YouTube transcript, EPub, ZIP — convert to Markdown **first** using\n[Microsoft Markitdown](https://github.com/microsoft/markitdown) (preferred over `pandoc` for\nPDF/PPTX/XLSX/image-OCR; LLM-token-optimized output). Either run\n[`/convert-srs`](commands/convert-srs.md) (the kit's wrapper — it auto-splits multi-module sources\nand indexes `docs/srs/`) or call markitdown directly:\n\n```bash\n# one-time install on your dev machine (NOT in package.json — the Angular project stays pure Node)\nwinget install astral-sh.uv \u0026\u0026 uv tool install \"markitdown[all]\"\n\nmarkitdown ./specs/order-management.pdf -o docs/srs/order-management.md\n```\n\nThen split out just the module you're building and save it under\n`docs/srs/\u003cmodule-name\u003e.md` (created by the installer — see `docs/srs/README.md`), and point\n`/plan` at that file instead of pasting the whole SRS.\n\n---\n\n## Commands vs skills vs agents\n\nThe kit installs all three — they differ in **who triggers them** and **where they run**:\n\n| | Command (`/start`, `/review-pr`) | Skill (`angular-practices`) | Agent (`angular-reviewer`) |\n|---|---|---|---|\n| **Who triggers it** | **You** type `/name` deliberately | **Claude** activates it when context matches | **You** (or Claude) dispatch by name |\n| **Runs in** | Your main conversation | Your main conversation | An **isolated** context (parallel/background) |\n| **Best for** | A workflow you run at a point in time | Knowledge that should apply *whenever* relevant | Heavy/parallel work without bloating the main thread |\n| **Lives in** | `.claude/commands/` | `.claude/skills/\u003cname\u003e/SKILL.md` | `.claude/agents/\u003cname\u003e.md` |\n\nSo `/review-pr` stays a command (you choose when to review); `angular-practices` is a\nskill (idioms auto-apply the moment you write a component, even in free-form chat); and\n`angular-reviewer` is an agent (it reviews in a separate context, so you can keep coding while\nit runs). The skill is a thin pointer to your `.claude/angular-practices/\u003cversion\u003e.md` profile,\nso there is a single source of truth (no duplication) — and the agents point to the skills too.\n\n**No duplication between a command and its agent twin.** `/review-pr` and `angular-reviewer` both\napply the *same* `.claude/references/review-checklist.md`; `/write-tests` and `angular-test-writer`\nboth apply `.claude/references/test-spec.md`. The command runs it **inline**; the agent runs it in an\n**isolated** context. Pick by weight:\n\n| Situation | Reach for |\n|-----------|-----------|\n| Quick check, small diff, want to see the reasoning inline | the **command** (`/review-pr`, `/write-tests`) |\n| Large diff / whole feature, or you want to keep coding while it runs | the **agent** (`angular-reviewer`, `angular-test-writer`) |\n| Multi-phase feature build with gates | the **orchestrator** (`/dev-cycle`, `/new-feature`) — it dispatches the agents at the test \u0026 review phases |\n| Knowledge that should apply *whenever* you write code | the **skill** (auto — no trigger) |\n\nSix skills ship today:\n- **angular-practices** — points to your version-matched profile; auto-applies when\n  writing/reviewing/refactoring Angular code.\n- **clarify-request** — normalizes vague prompts (\"fix bug A\", \"thêm trường X\") into a standard\n  brief: fills context from your docs/code first, batch-asks only what's missing, then routes to\n  the right command/agent (`/plan`, `angular-debugger`, `/review-pr`, or a direct edit).\n- **component-wrapper-priority** — carries the decision tree for using your project's shared\n  wrapper components instead of raw UI-library imports; auto-applies before a raw library import.\n- **explain** — explains code / concepts / flows / decisions; reads your `docs/` + rules so the\n  explanation matches *this* project (version/UI library/state/folder layout — nothing hardcoded).\n- **git-commit** — generates conventional commit messages following your `## Commit Convention`\n  in `project-rules.md` (prefix, language, and scope are per-project, filled by `/init`).\n- **srs-ingest** — detects when you have a non-Markdown SRS source (PDF, DOCX, PPTX, XLSX, image\n  with text, audio, YouTube URL) and points you at `/convert-srs` — it never edits `docs/srs/`\n  itself, only routes you to the command that does the conversion.\n\n## Agents (parallel / isolated context)\n\nEight Angular-specialized subagents run in their own context window — dispatch them by name, and\nthey can run in the **background** while you keep working. They all read your skills + profile +\n`docs/` first, so their output matches *this* project's conventions, version idioms, and wrapper rules.\n\n| Agent | Use for | How to call |\n|-------|---------|-------------|\n| **angular-reviewer** | Review changes before commit (read-only) | *\"use angular-reviewer on my changes\"* |\n| **angular-build-fixer** | TypeScript/`ng build` errors (strict templates, imports) | *\"use angular-build-fixer to fix this build\"* |\n| **angular-debugger** | Runtime errors — DI, change detection, RxJS leaks, routing | *\"use angular-debugger to trace this NG0100\"* |\n| **angular-test-writer** | Write a feature's test suite + coverage | *\"run angular-test-writer in the background for OrderComponent\"* |\n| **angular-a11y-auditor** | WCAG 2.2 AA audit — keyboard, screen reader, contrast, ARIA (read-only) | *\"use angular-a11y-auditor on the checkout page\"* |\n| **angular-onboarding** | Understand an unfamiliar codebase — map + trace paths (read-only) | *\"use angular-onboarding to explain this repo\"* |\n| **angular-ui-designer** | Design/extend the design system — tokens, states, responsive specs | *\"use angular-ui-designer for the settings panel\"* |\n| **angular-git-workflow** | Atomic conventional commits, branching, rebase/merge, recovery | *\"use angular-git-workflow to clean up my branch\"* |\n\nThere is no slash syntax — agents are invoked in plain language (Claude dispatches them). They\ncomplement, not replace, your own global agents and Claude Code's native worktree support.\n\n## Automation (settings \u0026 hooks)\n\nThe installer writes a `.claude/settings.json` so vibe coding flows with fewer interruptions:\n\n- **Permission allowlist** — pre-approves `ng`, `npm`, `npx`, `pnpm`, `yarn`, and read-only git\n  (`status`, `diff`, `log`, `show`) so Claude isn't constantly asking permission. State-changing git\n  (`commit`, `push`) is deliberately **not** allowed — you approve those.\n- **Build-verify Stop hook** — after each turn it runs a fast type-check, but **only when `.ts` or\n  `.html` files changed since `HEAD`** — so a question-only turn skips it entirely:\n\n  ```\n  git diff --quiet HEAD -- '*.ts' '*.html' || npx tsc --noEmit\n  ```\n\n  It uses your project's `typecheck` script if you have one. A type error is shown to Claude\n  (non-blocking) so it can fix it before you commit — without trapping the session. Want full\n  template checking? Swap `npx tsc --noEmit` for `ng build` (slower). **To disable:** delete the\n  `hooks` block from `settings.json`.\n\nIf the project already has a `.claude/settings.json`, the installer **skips it** (won't overwrite your\nsettings) — merge the allowlist/hook in manually, or re-run with `--force`.\n\n---\n\n## Version-matched best practices\n\nThe installer copies exactly one profile based on your `@angular/core`:\n\n| Angular | Profile | Key idioms |\n|---------|---------|-----------|\n| 14–15 | `v14-15.md` | NgModule, `*ngIf/*ngFor`, constructor DI, RxJS + `BehaviorSubject` |\n| 16 | `v16.md` | `inject()`, required inputs, `takeUntilDestroyed`, Signals (preview) |\n| 17 | `v17.md` | Standalone default, `@if/@for/@switch`, `@defer`, Signals stable |\n| 18–19 | `v18-19.md` | Signal inputs/outputs, `linkedSignal`/`resource`, zoneless (experimental) |\n\nThese files cover **framework idioms only** (syntax, DI, components, RxJS/Signals).\nProject-specific choices — folder layout, state-management, naming — are inferred\nfrom your code and written into `docs/PROJECT-RULES.md`.\n\n---\n\n## Coexistence (joining a not-yet-standard project)\n\n`/init` classifies what it finds as `standard`, `below-standard`, or `uncertain`,\nthen writes a **Coexistence Strategy** into `PROJECT-RULES.md`:\n\n- Patterns you already do right → kept as required rules.\n- Sub-standard patterns → correct rule applied to **new code only**.\n- Legacy modules → listed as **do-not-touch** (no refactor unless asked).\n\nAnything uncertain becomes a question — the kit never silently rewrites your rules.\n\n---\n\n## Component Wrapping (generic UI convention)\n\nThe kit enforces a generic priority rule for UI components:\n\n1. **Wrapper in `shared/components/`** (or `ui/`, `common/`, etc.) — used if it exists for the need\n2. **UI library direct** — used only if no wrapper exists; warning logged\n3. **Custom build** — only when the library has no equivalent\n\nWhen you run `/init`, it scans your codebase for wrapper components (sub-folders\nof `shared/components/` that import a known UI library) and writes a\n**Wrapped Components** table into `docs/DESIGN_SYSTEM.md`. From then on:\n- the **component-wrapper-priority** skill auto-applies the rule whenever you write UI code\n- `/new-feature` consults that table when generating UI code\n- `/review-pr` **and** the `angular-reviewer` agent flag a wrapper-bypass as 🔴 BLOCKER in new code\n- `/write-context` captures the WHY behind any library-direct decisions\n\nWorks for any UI library — PrimeNG, Material, ng-zorro, ng-bootstrap, custom.\n\n---\n\n## What gets created in your project\n\n```\nyour-angular-app/\n├── CLAUDE.md                       # generated/filled by /init\n├── .claude/\n│   ├── commands/                   # 11 slash-commands (copied by installer)\n│   │   ├── init.md  start.md  plan.md  new-feature.md  review-pr.md\n│   │   ├── write-tests.md  write-context.md  write-api-contracts.md\n│   │   ├── update-status.md  dev-cycle.md  convert-srs.md\n│   │   └── # convert-srs.md wraps `markitdown` (PDF/DOCX/PPTX/XLSX/ảnh) → `docs/srs/`\n│   ├── angular-practices/          # 1 version-matched profile (copied)\n│   │   └── v17.md\n│   ├── references/                 # shared SoT — both commands \u0026 agents read these\n│   │   ├── review-checklist.md     #   → /review-pr + angular-reviewer\n│   │   ├── test-spec.md            #   → /write-tests + angular-test-writer\n│   │   ├── feature-structure.md    #   → /new-feature + /dev-cycle (folder tree, order, coding rules)\n│   │   └── plan-spec.md            #   → /plan writes it; /dev-cycle + /new-feature consume it\n│   ├── skills/                     # auto-applied by Claude (no command needed)\n│   │   ├── angular-practices/      #   → version idioms; triggers when writing Angular code\n│   │   │   └── SKILL.md\n│   │   ├── clarify-request/        #   → normalizes vague prompts into a standard brief + routes\n│   │   │   └── SKILL.md\n│   │   ├── component-wrapper-priority/  # → enforces shared wrappers over raw library imports\n│   │   │   └── SKILL.md\n│   │   ├── explain/               #   → explains code/concepts/flows in your project's language\n│   │   │   ├── SKILL.md\n│   │   │   └── templates/vi.md\n│   │   ├── git-commit/            #   → conventional commits per your Commit Convention\n│   │   │   ├── SKILL.md\n│   │   │   └── references/conventions.md\n│   │   └── srs-ingest/            #   → detects non-MD SRS mentions, points at /convert-srs\n│   │       └── SKILL.md\n│   ├── agents/                     # 8 Angular subagents (isolated context, run in parallel)\n│   │   ├── angular-reviewer.md  angular-build-fixer.md  angular-debugger.md\n│   │   ├── angular-test-writer.md  angular-a11y-auditor.md  angular-onboarding.md\n│   │   └── angular-ui-designer.md  angular-git-workflow.md\n│   ├── settings.json               # allowlist (fewer prompts) + build-verify Stop hook\n│   └── rules/\n│       └── project-rules.md        # auto-loaded every session (filled by /init)\n└── docs/\n    ├── ARCHITECTURE.md  DESIGN_SYSTEM.md                     # filled by /init\n    ├── api-contracts/               # filled by /init — README.md index + one file per feature\n    │   ├── README.md                #   base URL, response envelope, auth, domains index\n    │   └── \u003cfeature\u003e.md             #   one per feature (endpoints + DTOs)\n    ├── PROJECT-STATUS.md                                     # filled by /init\n    ├── decisions/                                            # filled by /init\n    ├── srs/                         # created by installer — drop your split SRS excerpts here\n    └── plans/                       # created by /plan — one plan doc per feature\n```\n\n---\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuanhtung10%2Fangular-vibe-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvuanhtung10%2Fangular-vibe-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuanhtung10%2Fangular-vibe-kit/lists"}