vibes-plug 2.11.0 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (181) hide show
  1. package/.claude/rules/vibes-plug-core.md +5 -0
  2. package/.cursor/rules/vibes-plug-core.mdc +8 -3
  3. package/.cursorrules +9 -3
  4. package/AGENTS.md +25 -4
  5. package/CHANGELOG.md +151 -0
  6. package/CLAUDE.md +15 -8
  7. package/README.md +216 -641
  8. package/bin/vibes.mjs +1104 -0
  9. package/index.js +1 -1
  10. package/package.json +11 -3
  11. package/plugin.json +4 -3
  12. package/scripts/check-anti-slop.js +53 -0
  13. package/scripts/check-anti-slop.mjs +53 -0
  14. package/scripts/generate_swarm_gif.py +2 -2
  15. package/scripts/install.js +3 -1
  16. package/scripts/update_skills.js +1 -1
  17. package/scripts/update_skills.mjs +86 -0
  18. package/scripts/validate-skills.mjs +111 -0
  19. package/skills/accessibility-testing-expert/SKILL.md +117 -116
  20. package/skills/affective-computing-emotion-ai/SKILL.md +83 -0
  21. package/skills/agentic-coding-workflow-expert/SKILL.md +297 -0
  22. package/skills/agentic-memory-architect/SKILL.md +52 -0
  23. package/skills/agentic-micro-economy-architect/SKILL.md +92 -0
  24. package/skills/ai-llm-integration-expert/SKILL.md +330 -187
  25. package/skills/ai-media-generation-expert/SKILL.md +173 -172
  26. package/skills/ai-prompt-engineering-expert/SKILL.md +170 -50
  27. package/skills/ai-safety-governance-expert/SKILL.md +223 -0
  28. package/skills/angular-expert/SKILL.md +149 -148
  29. package/skills/anti-slop/SKILL.md +134 -0
  30. package/skills/api-design-expert/SKILL.md +4 -3
  31. package/skills/api-gateway-proxy-expert/SKILL.md +3 -2
  32. package/skills/app-analyzer-optimizer/SKILL.md +4 -3
  33. package/skills/apple-ecosystem-expert/SKILL.md +6 -5
  34. package/skills/astro-framework-expert/SKILL.md +201 -200
  35. package/skills/async-queue-temporal-expert/SKILL.md +218 -240
  36. package/skills/authentication-identity-expert/SKILL.md +79 -184
  37. package/skills/autonomous-red-teamer/SKILL.md +338 -203
  38. package/skills/autonomous-tdd-debugger/SKILL.md +6 -5
  39. package/skills/biome-linter-formatter-expert/SKILL.md +90 -89
  40. package/skills/blockchain-web3-expert/SKILL.md +116 -115
  41. package/skills/brainstorming/SKILL.md +392 -377
  42. package/skills/browser-automation-expert/SKILL.md +260 -222
  43. package/skills/bun-runtime-expert/SKILL.md +5 -4
  44. package/skills/chatbot-messaging-expert/SKILL.md +115 -114
  45. package/skills/ci-cd-devops-architect/SKILL.md +3 -2
  46. package/skills/cloud-hosting-expert/SKILL.md +5 -4
  47. package/skills/coderabbit/SKILL.md +5 -4
  48. package/skills/compliance-gdpr-privacy-expert/SKILL.md +3 -2
  49. package/skills/composable-mach-architect/SKILL.md +338 -0
  50. package/skills/cron-scheduler-expert/SKILL.md +5 -4
  51. package/skills/data-pipeline-etl-expert/SKILL.md +3 -2
  52. package/skills/data-telemetry-expert/SKILL.md +5 -4
  53. package/skills/data-visualization-expert/SKILL.md +155 -154
  54. package/skills/database-orm-expert/SKILL.md +102 -240
  55. package/skills/deep-research-analyst/SKILL.md +182 -0
  56. package/skills/dependency-upgrade-migrator/SKILL.md +11 -10
  57. package/skills/design-system-architect/SKILL.md +34 -3
  58. package/skills/desktop-electron-expert/SKILL.md +129 -128
  59. package/skills/documentation-site-expert/SKILL.md +60 -59
  60. package/skills/doku-mcp-server/SKILL.md +5 -4
  61. package/skills/doku-payment-gateway/SKILL.md +250 -232
  62. package/skills/domain-driven-design-expert/SKILL.md +3 -2
  63. package/skills/e2e-testing-expert/SKILL.md +5 -4
  64. package/skills/ecommerce-expert/SKILL.md +88 -87
  65. package/skills/email-notification-expert/SKILL.md +35 -7
  66. package/skills/ephemeral-generative-ui-architect/SKILL.md +88 -0
  67. package/skills/error-resilience-expert/SKILL.md +26 -4
  68. package/skills/event-driven-architect/SKILL.md +5 -4
  69. package/skills/feature-flag-analytics-expert/SKILL.md +3 -2
  70. package/skills/file-upload-media-expert/SKILL.md +5 -4
  71. package/skills/firebase-security-expert/SKILL.md +5 -4
  72. package/skills/form-validation-expert/SKILL.md +7 -6
  73. package/skills/frontier-ai-models-expert/SKILL.md +116 -0
  74. package/skills/fullstack-expert/SKILL.md +68 -144
  75. package/skills/gemini-agent-booster/SKILL.md +248 -172
  76. package/skills/geospatial-maps-expert/SKILL.md +81 -80
  77. package/skills/global-a11y-i18n-expert/SKILL.md +5 -4
  78. package/skills/glsl-shader-expert/SKILL.md +155 -71
  79. package/skills/go-programming-expert/SKILL.md +5 -4
  80. package/skills/graph-rag-knowledge-expert/SKILL.md +201 -159
  81. package/skills/graphql-apollo-expert/SKILL.md +5 -4
  82. package/skills/headless-cms-expert/SKILL.md +182 -181
  83. package/skills/hig/SKILL.md +5 -4
  84. package/skills/js-backend-expert/SKILL.md +219 -218
  85. package/skills/legacy-code-translator/SKILL.md +6 -5
  86. package/skills/llm-finops-router/SKILL.md +52 -0
  87. package/skills/local-slm-edge-ai-expert/SKILL.md +168 -167
  88. package/skills/logging-error-tracking-expert/SKILL.md +5 -4
  89. package/skills/mcp-server-architect/SKILL.md +316 -294
  90. package/skills/micro-frontend-architect/SKILL.md +5 -4
  91. package/skills/mobile-expo-expert/SKILL.md +5 -4
  92. package/skills/modern-css-native-expert/SKILL.md +190 -189
  93. package/skills/monorepo-architect/SKILL.md +5 -4
  94. package/skills/mpa-orchestrator/SKILL.md +41 -4
  95. package/skills/multi-agent-orchestration/SKILL.md +388 -254
  96. package/skills/mvc-expert/SKILL.md +5 -4
  97. package/skills/n8n-automation-expert/SKILL.md +90 -89
  98. package/skills/nextjs-app-router-expert/SKILL.md +3 -2
  99. package/skills/openapi-swagger-codegen-expert/SKILL.md +4 -3
  100. package/skills/payment-gateway-expert/SKILL.md +131 -128
  101. package/skills/pdf-document-generation-expert/SKILL.md +92 -91
  102. package/skills/performance-web-vitals/SKILL.md +5 -4
  103. package/skills/post-quantum-crypto-migrator/SKILL.md +3 -2
  104. package/skills/prd-architect/SKILL.md +85 -109
  105. package/skills/proactive-background-watcher/SKILL.md +5 -4
  106. package/skills/production-ready-hardener/SKILL.md +25 -27
  107. package/skills/pwa-offline-first-expert/SKILL.md +227 -185
  108. package/skills/pydantic-ai-expert/SKILL.md +162 -0
  109. package/skills/python-programming-expert/SKILL.md +5 -4
  110. package/skills/rate-limit-abuse-prevention/SKILL.md +5 -4
  111. package/skills/realtime-collaboration-expert/SKILL.md +3 -2
  112. package/skills/rich-text-editor-expert/SKILL.md +178 -177
  113. package/skills/rust-programming-expert/SKILL.md +5 -4
  114. package/skills/saas-architect/SKILL.md +155 -0
  115. package/skills/saas-billing/SKILL.md +394 -382
  116. package/skills/saas-multi-tenant/SKILL.md +7 -6
  117. package/skills/scalability-clean-code/SKILL.md +5 -4
  118. package/skills/search-engine-expert/SKILL.md +90 -89
  119. package/skills/self-healing-cloud-orchestrator/SKILL.md +3 -2
  120. package/skills/senior-frontend/SKILL.md +21 -18
  121. package/skills/senior-frontend/scripts/frontend_scaffolder.py +1 -1
  122. package/skills/seo/SKILL.md +4 -4
  123. package/skills/session-memory-manager/SKILL.md +129 -0
  124. package/skills/solidjs-expert/SKILL.md +81 -80
  125. package/skills/spa-orchestrator/SKILL.md +5 -4
  126. package/skills/sse-websocket-streaming-expert/SKILL.md +3 -2
  127. package/skills/state-management-expert/SKILL.md +5 -4
  128. package/skills/supabase-security-expert/SKILL.md +5 -4
  129. package/skills/svelte-sveltekit-expert/SKILL.md +92 -91
  130. package/skills/svg-animation-motion-expert/SKILL.md +3 -2
  131. package/skills/synthetic-data-finetuning-expert/SKILL.md +156 -0
  132. package/skills/tailwind-expert/SKILL.md +62 -5
  133. package/skills/tanstack-query-expert/SKILL.md +5 -4
  134. package/skills/tauri-expert/SKILL.md +5 -4
  135. package/skills/typescript-expert/SKILL.md +5 -4
  136. package/skills/ui-ux-pro-max/SKILL.md +7 -4
  137. package/skills/vector-db-rag-expert/SKILL.md +209 -208
  138. package/skills/vercel-ai-sdk-expert/SKILL.md +226 -0
  139. package/skills/voice-ai-realtime-agent/SKILL.md +243 -202
  140. package/skills/vue-frontend-expert/SKILL.md +5 -4
  141. package/skills/wasm-edge-computing-expert/SKILL.md +3 -2
  142. package/skills/web-3d-graphics-expert/SKILL.md +259 -82
  143. package/skills/web-game-engine-expert/SKILL.md +278 -50
  144. package/skills/web-scraper/SKILL.md +158 -157
  145. package/skills/website-design-cloner/SKILL.md +5 -4
  146. package/skills/webxr-ar-vr-expert/SKILL.md +105 -65
  147. package/skills/wordpress-headless-expert/SKILL.md +145 -144
  148. package/skills/zero-tech-debt-auditor/SKILL.md +115 -0
  149. package/skills/zero-to-prod-orchestrator/SKILL.md +281 -227
  150. package/skills/zero-trust-secret-vault/SKILL.md +3 -2
  151. package/BLUEPRINT.md +0 -309
  152. package/skills/ai-cost-token-optimizer/SKILL.md +0 -82
  153. package/skills/ai-evals-benchmark-expert/SKILL.md +0 -188
  154. package/skills/asisten-ramah/SKILL.md +0 -47
  155. package/skills/auto-doc-updater/SKILL.md +0 -220
  156. package/skills/autonomous-chaos-monkey/SKILL.md +0 -63
  157. package/skills/background-jobs-queue-expert/SKILL.md +0 -235
  158. package/skills/bootstrap-to-modern/SKILL.md +0 -94
  159. package/skills/database-migration-versioning-expert/SKILL.md +0 -90
  160. package/skills/edge-serverless-db-expert/SKILL.md +0 -99
  161. package/skills/mcp-client-orchestrator/SKILL.md +0 -76
  162. package/skills/mobile-push-notification-expert/SKILL.md +0 -71
  163. package/skills/monday-design-aesthetic/SKILL.md +0 -73
  164. package/skills/multiple-entry-points/SKILL.md +0 -91
  165. package/skills/project-context-mapper/SKILL.md +0 -85
  166. package/skills/saas-mvp-launcher/SKILL.md +0 -260
  167. package/skills/saas-transformer/SKILL.md +0 -500
  168. package/skills/saas-transformer/references/billing_integration_guide.md +0 -401
  169. package/skills/secure-fuzz-testing/SKILL.md +0 -207
  170. package/skills/self-evolving-memory-graph/SKILL.md +0 -91
  171. package/skills/session-context-loader/SKILL.md +0 -83
  172. package/skills/session-handoff-resume/SKILL.md +0 -164
  173. package/skills/skill-baru/SKILL.md +0 -178
  174. package/skills/supabase-migration/SKILL.md +0 -91
  175. package/skills/token-saver/SKILL.md +0 -119
  176. package/skills/ui-components-expert/SKILL.md +0 -166
  177. package/skills/vibe-code-gardener/SKILL.md +0 -181
  178. package/skills/visual-qa-vision-agent/SKILL.md +0 -71
  179. /package/skills/{saas-transformer → saas-architect}/references/feature_gating_patterns.md +0 -0
  180. /package/skills/{saas-transformer → saas-architect}/references/saas_transformation_checklist.md +0 -0
  181. /package/skills/{saas-transformer → saas-architect}/scripts/saas_transformation_scanner.py +0 -0
@@ -0,0 +1,223 @@
1
+ ---
2
+ name: ai-safety-governance-expert
3
+ description: "Expert guide for AI Safety, Governance, and Responsible AI in production — Constitutional AI enforcement, runtime guardrails (NeMo Guardrails 2.0, Llama Guard 3), bias auditing, hallucination detection, EU AI Act compliance, model cards, and content provenance / Panduan ahli untuk Keamanan AI, Tata Kelola, dan AI Bertanggung Jawab di produksi."
4
+ author: "vibes-plug-swarm"
5
+ version: "3.0.0"
6
+ ---
7
+
8
+ # AI Safety, Governance, and Responsible AI Expert
9
+
10
+ ## 1. Constitutional AI Enforcement / Penegakan AI Konstitusional
11
+
12
+ Define constitutional rules as structured guardrails for all AI operations. Implement policies at multiple interception points: pre-generation, post-generation, and retrieval.
13
+
14
+ ### Principles & Configuration
15
+ - Embed constitution directly into system prompts.
16
+ - Implement explicit Colang 2.0 flows for conversational state management.
17
+ - Abort sequences when user prompts violate strict constitutional principles.
18
+
19
+ ```yaml
20
+ # NeMo Guardrails configuration example (config.yml)
21
+ models:
22
+ - type: main
23
+ engine: openai
24
+ model: gpt-4o
25
+
26
+ rails:
27
+ input:
28
+ flows:
29
+ - check_jailbreak
30
+ - check_topic_restriction
31
+ output:
32
+ flows:
33
+ - check_hallucination
34
+ - check_toxicity
35
+
36
+ instructions:
37
+ - type: general
38
+ content: |
39
+ You are a helpful, respectful, and honest assistant.
40
+ Always prioritize safety, avoid giving harmful advice, and maintain neutrality.
41
+ ```
42
+
43
+ ## 2. Runtime Safety Guardrails / Pembatasan Keamanan Saat Berjalan
44
+
45
+ Implement layered defense mechanisms to intercept unsafe input and redact sensitive output. Utilize state-of-the-art moderation models such as Llama Guard 3.
46
+
47
+ ### Layered Defense Architecture
48
+ 1. **System Prompt**: Set boundaries and behavior guidelines.
49
+ 2. **Input Filter**: Scan for prompt injection, jailbreaks, and restricted topics (PII, hate speech).
50
+ 3. **Model Generation**: Generate response using the core LLM.
51
+ 4. **Output Filter**: Redact PII, filter toxicity, and enforce factuality checking.
52
+ 5. **Delivery**: Send safe response to the user.
53
+
54
+ ```typescript
55
+ // Multi-layer guardrail pipeline in TypeScript
56
+ import { LlamaGuard } from '@safety/llama-guard';
57
+ import { PIIRedactor } from '@safety/redactor';
58
+ import { LLMService } from './llm';
59
+
60
+ export async function generateSafeResponse(prompt: string): Promise<string> {
61
+ // Layer 2: Input Guardrail
62
+ const inputCheck = await LlamaGuard.checkPrompt(prompt);
63
+ if (!inputCheck.isSafe) {
64
+ throw new Error(`Unsafe prompt detected: ${inputCheck.violationCategory}`);
65
+ }
66
+
67
+ // Layer 3: Model Generation
68
+ const rawResponse = await LLMService.generate(prompt);
69
+
70
+ // Layer 4: Output Guardrails
71
+ const outputCheck = await LlamaGuard.checkResponse(prompt, rawResponse);
72
+ if (!outputCheck.isSafe) {
73
+ throw new Error('Unsafe response blocked by output guardrails.');
74
+ }
75
+
76
+ const redactedResponse = PIIRedactor.redact(rawResponse);
77
+
78
+ // Layer 5: Delivery
79
+ return redactedResponse;
80
+ }
81
+ ```
82
+
83
+ ## 3. Hallucination Detection & Grounding / Deteksi Halusinasi & Grounding
84
+
85
+ Employ grounding techniques and retrieval-augmented verification to minimize hallucinations. Implement real-time factuality metrics on generated text.
86
+
87
+ ### Citation Verification Pipeline
88
+ - **Claim Extraction**: Extract factual claims from the response.
89
+ - **Source Matching**: Retrieve grounding documents for each claim.
90
+ - **Confidence Scoring**: Calculate factuality using NLI (Natural Language Inference) models.
91
+
92
+ ```python
93
+ # Hallucination detection with SelfCheckGPT principles
94
+ from selfcheckgpt.modeling_selfcheck import SelfCheckNLI
95
+ import spacy
96
+
97
+ nlp = spacy.load("en_core_web_sm")
98
+ selfcheck_nli = SelfCheckNLI(device="cpu") # use cuda if available
99
+
100
+ def detect_hallucination(response_text, context_documents):
101
+ sentences = [sent.text for sent in nlp(response_text).sents]
102
+
103
+ # Calculate NLI scores against provided context
104
+ nli_scores = selfcheck_nli.predict(
105
+ sentences=sentences,
106
+ sampled_passages=[context_documents] * len(sentences)
107
+ )
108
+
109
+ threshold = 0.85
110
+ hallucinated_sentences = [
111
+ sentences[i] for i, score in enumerate(nli_scores) if score < threshold
112
+ ]
113
+
114
+ return {
115
+ "is_grounded": len(hallucinated_sentences) == 0,
116
+ "hallucinations": hallucinated_sentences
117
+ }
118
+ ```
119
+
120
+ ## 4. Automated Bias Auditing / Audit Bias Otomatis
121
+
122
+ Continuously monitor AI systems for demographic parity, equal opportunity, and equalized odds.
123
+
124
+ ### Audit Pipeline
125
+ 1. **Test Suite**: Run standardized prompts targeting various demographics.
126
+ 2. **Metric Collection**: Evaluate embeddings and outputs for representational and allocative harms.
127
+ 3. **Report**: Aggregate fairness metrics into actionable dashboards.
128
+ 4. **Remediation**: Apply fairness constraints during fine-tuning.
129
+
130
+ ```python
131
+ # Bias audit script using fairlearn
132
+ from fairlearn.metrics import demographic_parity_difference
133
+ from sklearn.metrics import accuracy_score
134
+ import pandas as pd
135
+
136
+ def audit_model_fairness(predictions, true_labels, sensitive_features):
137
+ df = pd.DataFrame({
138
+ 'y_true': true_labels,
139
+ 'y_pred': predictions,
140
+ 'sensitive_feature': sensitive_features
141
+ })
142
+
143
+ dp_diff = demographic_parity_difference(
144
+ y_true=df['y_true'],
145
+ y_pred=df['y_pred'],
146
+ sensitive_features=df['sensitive_feature']
147
+ )
148
+
149
+ overall_accuracy = accuracy_score(df['y_true'], df['y_pred'])
150
+
151
+ print(f"Demographic Parity Difference: {dp_diff:.4f}")
152
+ print(f"Overall Accuracy: {overall_accuracy:.4f}")
153
+
154
+ if dp_diff > 0.1:
155
+ print("WARNING: Significant demographic parity violation detected.")
156
+ ```
157
+
158
+ ## 5. AI Model Cards & Documentation / Kartu Model & Dokumentasi AI
159
+
160
+ Maintain standardized Model Cards for transparency and accountability, automatically generated from evaluation results.
161
+
162
+ ### Required Model Card Sections
163
+ - **Intended Use**: Primary use cases and out-of-scope applications.
164
+ - **Limitations**: Known failure modes and biases.
165
+ - **Training Data**: Overview of pre-training and fine-tuning datasets, including opt-out mechanisms.
166
+ - **Performance Metrics**: Standardized benchmark scores (MMLU, HumanEval) and fairness metrics.
167
+ - **Ethical Considerations**: Mitigation strategies for potential harms.
168
+
169
+ ## 6. AI Compliance Matrix / Matriks Kepatuhan AI
170
+
171
+ Map AI deployments against global regulatory frameworks. Implement automated risk classification checks.
172
+
173
+ ### Frameworks & Controls
174
+ - **EU AI Act**: Classify systems as Unacceptable (prohibited), High Risk (strict requirements), Limited (transparency required), or Minimal.
175
+ - **NIST AI RMF**: Implement Govern, Map, Measure, and Manage functions.
176
+ - **GDPR Article 22**: Ensure human-in-the-loop (HITL) for automated decision-making.
177
+ - **SOC2**: Implement AI-specific data isolation and auditing controls.
178
+
179
+ ```python
180
+ # Risk classification decision tree
181
+ def classify_eu_ai_act_risk(system_purpose, employs_biometrics, affects_safety):
182
+ if system_purpose in ["social_scoring", "subliminal_manipulation"]:
183
+ return "UNACCEPTABLE_RISK"
184
+
185
+ if employs_biometrics or affects_safety or system_purpose in ["employment", "education", "credit_scoring"]:
186
+ return "HIGH_RISK"
187
+
188
+ if system_purpose in ["chatbot", "deepfake", "emotion_recognition"]:
189
+ return "LIMITED_RISK"
190
+
191
+ return "MINIMAL_RISK"
192
+ ```
193
+
194
+ ## 7. Content Provenance & Watermarking / Asal Konten & Watermarking
195
+
196
+ Ensure transparency in AI-generated outputs by embedding provenance data.
197
+
198
+ ### Implementation Strategies
199
+ - **C2PA Credentials**: Attach cryptographic content credentials to AI-generated images and audio.
200
+ - **Invisible Text Watermarking**: Alter token probabilities during generation (e.g., SynthID text) to embed a detectable signature.
201
+ - **Clear Disclosures**: Always present visible labels indicating content is AI-generated, especially for synthetic media and bots.
202
+
203
+ ## 8. Orchestration & Integration / Orkestrasi & Integrasi
204
+
205
+ This skill connects to the broader ecosystem to enforce safety across all capabilities.
206
+
207
+ ### Connected Skills
208
+ - `ai-llm-integration-expert`
209
+ - `ai-prompt-engineering-expert`
210
+ - `autonomous-red-teamer`
211
+ - `compliance-gdpr-privacy-expert`
212
+ - `session-memory-manager`
213
+ - `production-ready-hardener`
214
+ - `brainstorming`
215
+ - `zero-to-prod-orchestrator`
216
+
217
+ ## English
218
+ ## Bahasa Indonesia
219
+
220
+
221
+ ## Orchestration & Integration
222
+ - Connects to `zero-to-prod-orchestrator`
223
+ - Connects to `brainstorming`
@@ -1,148 +1,149 @@
1
- ---
2
- name: angular-expert
3
- description: "Expert guide for Angular 19+ enterprise applications — Signals, Standalone Components, NgRx SignalStore, SSR with Hydration, and Angular Material 3 / Panduan ahli aplikasi enterprise Angular 19+."
4
- author: "Roedy Rustam"
5
- ---
6
-
7
- # Angular Expert (2026 Edition)
8
-
9
- [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
-
11
- ---
12
-
13
- <a name="english"></a>
14
- ## English
15
-
16
- ### Orchestration & Integration
17
- - **`typescript-expert`**: Strict TypeScript typing and decorators in Angular 19+.
18
- - **`api-design-expert`**: REST and GraphQL client architecture with Angular `HttpClient`.
19
- - **`e2e-testing-expert`**: Playwright and Cypress end-to-end testing for Angular apps.
20
- - **`global-a11y-i18n-expert`**: Angular localized translations (`@angular/localize`) and accessibility compliance.
21
- - **`ci-cd-devops-architect`**: Dockerizing and deploying Angular SSR applications.
22
-
23
- ### Description
24
- Production-ready guide for building scalable, enterprise-grade web applications using Angular 19+. Covers modern Standalone Components (NgModule-free), fine-grained Signals (`signal()`, `computed()`, `effect()`), Signal-based inputs/outputs, NgRx SignalStore, deferrable views (`@defer`), SSR with Event Replay hydration, and Angular Material 3.
25
-
26
- ### Trigger Conditions
27
- - Building or refactoring enterprise-scale Angular applications.
28
- - Migrating legacy Angular (NgModules / RxJS heavy) to Angular 19+ Standalone Components & Signals.
29
- - Implementing state management with NgRx SignalStore.
30
- - Configuring Angular SSR with hydration and deferrable views (`@defer`).
31
-
32
- ---
33
-
34
- ### Core Architecture & Modern Patterns
35
-
36
- #### 1. Standalone Component with Signals & Signal Inputs
37
- ```typescript
38
- import { Component, signal, computed, input, output, ChangeDetectionStrategy } from '@angular/core';
39
- import { CommonModule } from '@angular/common';
40
-
41
- export interface UserItem {
42
- id: string;
43
- name: string;
44
- role: 'admin' | 'member';
45
- }
46
-
47
- @Component({
48
- selector: 'app-user-card',
49
- standalone: true,
50
- imports: [CommonModule],
51
- template: `
52
- <div class="user-card" [class.admin]="isAdmin()">
53
- <h3>{{ user().name }}</h3>
54
- <p>Role: {{ user().role }}</p>
55
- <button (click)="onRoleChange()">Promote</button>
56
- </div>
57
- `,
58
- changeDetection: ChangeDetectionStrategy.OnPush,
59
- })
60
- export class UserCardComponent {
61
- // Signal inputs & outputs (Angular 19+)
62
- user = input.required<UserItem>();
63
- roleUpdated = output<string>();
64
-
65
- isAdmin = computed(() => this.user().role === 'admin');
66
-
67
- onRoleChange() {
68
- this.roleUpdated.emit(this.user().id);
69
- }
70
- }
71
- ```
72
-
73
- #### 2. NgRx SignalStore
74
- ```typescript
75
- import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
76
- import { computed, inject } from '@angular/core';
77
- import { HttpClient } from '@angular/common/http';
78
- import { rxMethod } from '@ngrx/signals/rxjs-interop';
79
- import { pipe, switchMap, tap } from 'rxjs';
80
-
81
- interface ProductsState {
82
- products: Array<{ id: string; title: string; price: number }>;
83
- isLoading: boolean;
84
- filter: string;
85
- }
86
-
87
- const initialState: ProductsState = {
88
- products: [],
89
- isLoading: false,
90
- filter: '',
91
- };
92
-
93
- export const ProductsStore = signalStore(
94
- { providedIn: 'root' },
95
- withState(initialState),
96
- withComputed(({ products, filter }) => ({
97
- filteredProducts: computed(() =>
98
- products().filter((p) => p.title.toLowerCase().includes(filter().toLowerCase()))
99
- ),
100
- totalCount: computed(() => products().length),
101
- })),
102
- withMethods((store, http = inject(HttpClient)) => ({
103
- updateFilter(filter: string) {
104
- patchState(store, { filter });
105
- },
106
- loadProducts: rxMethod<void>(
107
- pipe(
108
- tap(() => patchState(store, { isLoading: true })),
109
- switchMap(() =>
110
- http.get<Array<{ id: string; title: string; price: number }>>('/api/products').pipe(
111
- tap((products) => patchState(store, { products, isLoading: false }))
112
- )
113
- )
114
- )
115
- ),
116
- }))
117
- );
118
- ```
119
-
120
- #### 3. Deferrable Views (`@defer`)
121
- ```html
122
- @defer (on viewport; prefetch on idle) {
123
- <app-analytics-dashboard [data]="dashboardData()" />
124
- } @placeholder {
125
- <div class="skeleton-loader">Loading analytics widget...</div>
126
- } @error {
127
- <p>Failed to load analytics dashboard.</p>
128
- }
129
- ```
130
-
131
- ---
132
-
133
- <a name="bahasa-indonesia"></a>
134
- ## Bahasa Indonesia
135
-
136
- ### Integrasi Orkestrasi
137
- - **`typescript-expert`**: Penggunaan TypeScript ketat dan dekorator pada Angular 19+.
138
- - **`api-design-expert`**: Arsitektur klien REST dan GraphQL dengan `HttpClient`.
139
- - **`e2e-testing-expert`**: Pengujian end-to-end menggunakan Playwright atau Cypress.
140
-
141
- ### Deskripsi
142
- Panduan produksi untuk membangun aplikasi web skala enterprise menggunakan Angular 19+. Mencakup Standalone Components tanpa NgModule, reaktivitas modern berbasis Signals, NgRx SignalStore, deferrable views (`@defer`), SSR dengan hidrasi Event Replay, dan integrasi Angular Material 3.
143
-
144
- ### Kondisi Pemicu
145
- - Membangun atau merestrukturisasi aplikasi enterprise Angular.
146
- - Migrasi Angular lama (berbasis NgModule/RxJS berat) ke Angular 19+ Standalone & Signals.
147
- - Mengelola state aplikasi menggunakan NgRx SignalStore.
148
- - Mengoptimalkan performa rendering dengan deferrable views dan SSR hydration.
1
+ ---
2
+ name: angular-expert
3
+ description: "Expert guide for Angular 19+ enterprise applications — Signals, Standalone Components, NgRx SignalStore, SSR with Hydration, and Angular Material 3 / Panduan ahli aplikasi enterprise Angular 19+."
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
6
+ ---
7
+
8
+ # Angular Expert (2026 Edition)
9
+
10
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
11
+
12
+ ---
13
+
14
+ <a name="english"></a>
15
+ ## English
16
+
17
+ ### Orchestration & Integration
18
+ - **`typescript-expert`**: Strict TypeScript typing and decorators in Angular 19+.
19
+ - **`api-design-expert`**: REST and GraphQL client architecture with Angular `HttpClient`.
20
+ - **`e2e-testing-expert`**: Playwright and Cypress end-to-end testing for Angular apps.
21
+ - **`global-a11y-i18n-expert`**: Angular localized translations (`@angular/localize`) and accessibility compliance.
22
+ - **`ci-cd-devops-architect`**: Dockerizing and deploying Angular SSR applications.
23
+
24
+ ### Description
25
+ Production-ready guide for building scalable, enterprise-grade web applications using Angular 19+. Covers modern Standalone Components (NgModule-free), fine-grained Signals (`signal()`, `computed()`, `effect()`), Signal-based inputs/outputs, NgRx SignalStore, deferrable views (`@defer`), SSR with Event Replay hydration, and Angular Material 3.
26
+
27
+ ### Trigger Conditions
28
+ - Building or refactoring enterprise-scale Angular applications.
29
+ - Migrating legacy Angular (NgModules / RxJS heavy) to Angular 19+ Standalone Components & Signals.
30
+ - Implementing state management with NgRx SignalStore.
31
+ - Configuring Angular SSR with hydration and deferrable views (`@defer`).
32
+
33
+ ---
34
+
35
+ ### Core Architecture & Modern Patterns
36
+
37
+ #### 1. Standalone Component with Signals & Signal Inputs
38
+ ```typescript
39
+ import { Component, signal, computed, input, output, ChangeDetectionStrategy } from '@angular/core';
40
+ import { CommonModule } from '@angular/common';
41
+
42
+ export interface UserItem {
43
+ id: string;
44
+ name: string;
45
+ role: 'admin' | 'member';
46
+ }
47
+
48
+ @Component({
49
+ selector: 'app-user-card',
50
+ standalone: true,
51
+ imports: [CommonModule],
52
+ template: `
53
+ <div class="user-card" [class.admin]="isAdmin()">
54
+ <h3>{{ user().name }}</h3>
55
+ <p>Role: {{ user().role }}</p>
56
+ <button (click)="onRoleChange()">Promote</button>
57
+ </div>
58
+ `,
59
+ changeDetection: ChangeDetectionStrategy.OnPush,
60
+ })
61
+ export class UserCardComponent {
62
+ // Signal inputs & outputs (Angular 19+)
63
+ user = input.required<UserItem>();
64
+ roleUpdated = output<string>();
65
+
66
+ isAdmin = computed(() => this.user().role === 'admin');
67
+
68
+ onRoleChange() {
69
+ this.roleUpdated.emit(this.user().id);
70
+ }
71
+ }
72
+ ```
73
+
74
+ #### 2. NgRx SignalStore
75
+ ```typescript
76
+ import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
77
+ import { computed, inject } from '@angular/core';
78
+ import { HttpClient } from '@angular/common/http';
79
+ import { rxMethod } from '@ngrx/signals/rxjs-interop';
80
+ import { pipe, switchMap, tap } from 'rxjs';
81
+
82
+ interface ProductsState {
83
+ products: Array<{ id: string; title: string; price: number }>;
84
+ isLoading: boolean;
85
+ filter: string;
86
+ }
87
+
88
+ const initialState: ProductsState = {
89
+ products: [],
90
+ isLoading: false,
91
+ filter: '',
92
+ };
93
+
94
+ export const ProductsStore = signalStore(
95
+ { providedIn: 'root' },
96
+ withState(initialState),
97
+ withComputed(({ products, filter }) => ({
98
+ filteredProducts: computed(() =>
99
+ products().filter((p) => p.title.toLowerCase().includes(filter().toLowerCase()))
100
+ ),
101
+ totalCount: computed(() => products().length),
102
+ })),
103
+ withMethods((store, http = inject(HttpClient)) => ({
104
+ updateFilter(filter: string) {
105
+ patchState(store, { filter });
106
+ },
107
+ loadProducts: rxMethod<void>(
108
+ pipe(
109
+ tap(() => patchState(store, { isLoading: true })),
110
+ switchMap(() =>
111
+ http.get<Array<{ id: string; title: string; price: number }>>('/api/products').pipe(
112
+ tap((products) => patchState(store, { products, isLoading: false }))
113
+ )
114
+ )
115
+ )
116
+ ),
117
+ }))
118
+ );
119
+ ```
120
+
121
+ #### 3. Deferrable Views (`@defer`)
122
+ ```html
123
+ @defer (on viewport; prefetch on idle) {
124
+ <app-analytics-dashboard [data]="dashboardData()" />
125
+ } @placeholder {
126
+ <div class="skeleton-loader">Loading analytics widget...</div>
127
+ } @error {
128
+ <p>Failed to load analytics dashboard.</p>
129
+ }
130
+ ```
131
+
132
+ ---
133
+
134
+ <a name="bahasa-indonesia"></a>
135
+ ## Bahasa Indonesia
136
+
137
+ ### Integrasi Orkestrasi
138
+ - **`typescript-expert`**: Penggunaan TypeScript ketat dan dekorator pada Angular 19+.
139
+ - **`api-design-expert`**: Arsitektur klien REST dan GraphQL dengan `HttpClient`.
140
+ - **`e2e-testing-expert`**: Pengujian end-to-end menggunakan Playwright atau Cypress.
141
+
142
+ ### Deskripsi
143
+ Panduan produksi untuk membangun aplikasi web skala enterprise menggunakan Angular 19+. Mencakup Standalone Components tanpa NgModule, reaktivitas modern berbasis Signals, NgRx SignalStore, deferrable views (`@defer`), SSR dengan hidrasi Event Replay, dan integrasi Angular Material 3.
144
+
145
+ ### Kondisi Pemicu
146
+ - Membangun atau merestrukturisasi aplikasi enterprise Angular.
147
+ - Migrasi Angular lama (berbasis NgModule/RxJS berat) ke Angular 19+ Standalone & Signals.
148
+ - Mengelola state aplikasi menggunakan NgRx SignalStore.
149
+ - Mengoptimalkan performa rendering dengan deferrable views dan SSR hydration.
@@ -0,0 +1,134 @@
1
+ ---
2
+ name: anti-slop
3
+ description: "Comprehensive Anti-AI Slop enforcement guide. Updated to include token efficiency and code gardening / Panduan penegakan anti-AI slop komprehensif. Diperbarui dengan efisiensi token dan perawatan kode."
4
+ author: "Roedy Rustam"
5
+ version: "3.0.0"
6
+ ---
7
+
8
+ # Anti-Slop, Token Efficiency & Code Gardening Protocol (2026 Edition)
9
+
10
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
11
+
12
+ ---
13
+
14
+ <a name="english"></a>
15
+ ## English
16
+
17
+ ### Description & Trigger Conditions
18
+ The absolute zero-tolerance standard against AI slop, bloated context, and architectural decay. AI slop manifests as conversational pleasantries, lazy placeholders, speculative over-engineering, decorative comments, and vague buzzwords. This skill enforces rigorous anti-slop rules, token-saving compression, and code gardening across the engineering lifecycle.
19
+ Triggers: Any code generation/modification, automated reviews, long-running sessions, explicit "be concise/minimal" requests, or when a codebase exhibits "AI smell" (inconsistencies, duplication, dead code).
20
+
21
+ ---
22
+
23
+ ## The 5 Pillars of AI Slop Elimination
24
+
25
+ ### Pillar 1: Conversational & Sycophancy Slop
26
+ - **🔴 Forbidden**: Preambles ("Certainly! I'd be happy to help"), prompt echoing, apology loops, trailing motivational fluff.
27
+ - **✅ Standard**: Imperative, code-first communication. Zero filler.
28
+
29
+ ### Pillar 2: Placeholder & Truncation Slop ("Lazy LLM")
30
+ - **🔴 Forbidden**: `// TODO: implement`, `// ... rest of code`, or returning mock arrays when production features are requested.
31
+ - **✅ Standard**: Output must be 100% complete, functional, and production-ready.
32
+
33
+ ### Pillar 3: Speculative & Decorative Over-Engineering Slop
34
+ - **🔴 Forbidden**: Creating factory patterns (`IUserServiceFactoryProvider`) for single implementations, triple-validated defensive code when TypeScript/Zod guarantee type safety.
35
+ - **✅ Standard**: YAGNI (You Aren't Gonna Need It). Write the simplest direct implementation. Trust the types.
36
+
37
+ ### Pillar 4: Obvious & Decorative Comment Slop
38
+ - **🔴 Forbidden**: Narrating syntax line-by-line (e.g., `// Increment count by 1 \n setCount(count + 1);`).
39
+ - **✅ Standard**: Comments explain WHY (architectural decisions, business constraints), never WHAT.
40
+
41
+ ### Pillar 5: Buzzword & Artifact Slop
42
+ - **🔴 Forbidden**: Documents filled with generic marketing jargon ("seamless integration", "robust synergy") with zero technical density.
43
+ - **✅ Standard**: High technical density with explicit schemas, route tables, column types, and verifiable NFR latency budgets.
44
+
45
+ ---
46
+
47
+ ## Token Efficiency & Compression Protocol
48
+
49
+ ### 1. Response Compression Rules
50
+ - **No preamble/restatement/summaries**: Show code immediately, explain briefly after.
51
+ - **Diff format**: For file edits, show only changed lines.
52
+ - **Bullet > prose**: Use 1-sentence rationales over paragraphs.
53
+
54
+ ### 2. Context Window Budget Awareness (200K Context)
55
+ ```text
56
+ System prompt + skills: ~15K | Conversation history: ~50K | File reads: ~100K | Response: ~35K
57
+ ```
58
+ - Summarize large files mentally; `view_file` only specific sections. Create a checkpoint with `session-memory-manager` when near full.
59
+
60
+ ### 3. Tool Call Minimization & First Draft Quality
61
+ - Read multiple files in parallel.
62
+ - Use `grep_search` over full reads.
63
+ - Generate correct, production-ready code with inline error handling on the first try. Avoid edit-retry cycles.
64
+
65
+ ---
66
+
67
+ ## Legacy Code Gardening Protocol
68
+
69
+ ### 1. Context Drift Analysis & Code Smells
70
+ - **Inconsistent Styles**: Mixed `async/await` vs `.then()`, variable namings (`userId` vs `user_id`). Fix with Prettier/ESLint rules.
71
+ - **Bloated Components**: 5+ states, 10+ props, 20+ imports. Apply Single Responsibility and split them.
72
+ - **Dependency Creep**: Use `npx depcheck` for unused dependencies and `npx bundle-phobia-cli` for sizing.
73
+ - **Graveyard of Dead Utilities**: Use semantic search/grep to find and remove 0-usage exported functions.
74
+
75
+ ### 2. 4-Phase Gardening Protocol
76
+ 1. **Discovery**: Map file tree, find bloated files, duplicated logic, unused exports, and style drift.
77
+ 2. **Triage**: Categorize into Critical (bugs/data loss), High (diverging duplicates), Medium (smells), Low (style).
78
+ 3. **Systematic Refactoring**: Start smallest first. Remove dead code, extract duplicates, simplify abstractions, standardize names, add tests.
79
+ 4. **Prevention**: Add strict ESLint rules, `depcheck` in CI, and architecture tests.
80
+
81
+ ---
82
+
83
+ ## Automated Anti-Slop Audit Script
84
+ Run `scripts/check-anti-slop.js` in CI to detect placeholders (`// ...`), unfinished stubs (`TODO:`), mock data in prod, and syntax narration (`// increment`). Fail builds if AI slop is detected.
85
+
86
+ ---
87
+
88
+ <a name="bahasa-indonesia"></a>
89
+ ## Bahasa Indonesia
90
+
91
+ ### Deskripsi & Kondisi Pemicu
92
+ Standar nol-toleransi terhadap AI slop, pemborosan token, dan pembusukan arsitektur. AI slop muncul sebagai basa-basi, placeholder, over-engineering spekulatif, dan komentar dekoratif. Skill ini menegakkan anti-slop, kompresi respons, dan perawatan kode (code gardening).
93
+ Pemicu: Pembuatan/modifikasi kode, review otomatis, sesi panjang, permintaan respons ringkas, atau saat codebase menunjukkan "AI smell" (inkonsistensi, duplikasi, kode mati).
94
+
95
+ ---
96
+
97
+ ### 5 Pilar Utama Pembasmian AI Slop
98
+
99
+ 1. **Pilar 1: Eliminasi Basa-Basi Percakapan** - Dilarang menggunakan pengantar atau pengulangan instruksi. Harus *code-first* dan tanpa basa-basi.
100
+ 2. **Pilar 2: Larangan Placeholder & Truncation ("Lazy LLM")** - Dilarang keras menggunakan `// TODO` atau memotong kode. Wajib 100% lengkap dan siap produksi.
101
+ 3. **Pilar 3: Anti Over-Engineering Spekulatif** - Hindari *factory pattern* atau layer ekstra tanpa alasan. Jangan validasi ganda jika Zod/TypeScript sudah menanganinya. Terapkan YAGNI.
102
+ 4. **Pilar 4: Eliminasi Komentar Sintaksis** - Jangan menarasikan baris kode (mis. `// tambah satu`). Komentar hanya untuk menjelaskan MENGAPA (alasan bisnis/arsitektur).
103
+ 5. **Pilar 5: Eliminasi Slop Dokumen & Buzzword** - Hindari kata-kata marketing kosong. Gunakan densitas teknis tinggi dengan skema pasti dan metrik konkret.
104
+
105
+ ---
106
+
107
+ ### Protokol Efisiensi & Kompresi Token
108
+
109
+ - **Kompresi Respons**: Gunakan format diff untuk kode. Penjelasan menggunakan poin 1-kalimat daripada paragraf. Tanpa basa-basi.
110
+ - **Budget 200K Konteks**: Batasi baca file penuh; gunakan `grep_search`. Buat checkpoint dengan `session-memory-manager` jika token menipis.
111
+ - **Efisiensi Tool**: Baca file paralel, temukan konten spesifik dengan grep. Hasilkan draf pertama yang siap produksi tanpa siklus edit berulang.
112
+
113
+ ---
114
+
115
+ ### Protokol Berkebun Kode Warisan (Code Gardening)
116
+
117
+ 1. **Analisis Context Drift**: Perbaiki inkonsistensi gaya (contoh: `async` vs `then`, `userId` vs `user_id`) dengan ESLint/Prettier.
118
+ 2. **Komponen Membengkak**: Pecah komponen yang memiliki >5 state, >10 prop, atau >20 impor berdasarkan Tanggung Jawab Tunggal.
119
+ 3. **Utilitas Mati & Dependensi**: Hapus fungsi tanpa penggunaan. Gunakan `npx depcheck` untuk package tidak terpakai dan `bundle-phobia-cli` untuk ukuran.
120
+ 4. **Protokol 4 Fase**:
121
+ - *Discovery*: Petakan duplikasi dan kode mati.
122
+ - *Triage*: Kategorikan Kritis hingga Rendah.
123
+ - *Refactoring*: Hapus kode mati, ekstrak duplikat, sederhanakan abstraksi, tambah test.
124
+ - *Prevention*: Tambahkan ESLint strict, depcheck CI, dan uji arsitektur.
125
+
126
+ ---
127
+
128
+ ## Orchestration & Integration
129
+ - `zero-to-prod-orchestrator`: Anti-slop checks at architectural and deployment phases.
130
+ - `session-memory-manager`: Context resets when token budgets approach limits.
131
+ - `scalability-clean-code`: Enforces SOLID boundaries against speculative over-engineering.
132
+ - `autonomous-tdd-debugger`: Validates execution completeness over mock/stub code.
133
+ - `coderabbit` & `brainstorming`: Clean PR reviews and dense documentation.
134
+ - `dependency-upgrade-migrator`: Integrates with dependency audits (`depcheck`).