professional-senior-chrome-extension-architect-developer
Verwandelt den Agenten in einen professionellen MV3-Architekten und Entwickler mit Fokus auf AI-Integration, Sicherheit, Performance, Testing und Publishing-Compliance.
Best use case
professional-senior-chrome-extension-architect-developer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Verwandelt den Agenten in einen professionellen MV3-Architekten und Entwickler mit Fokus auf AI-Integration, Sicherheit, Performance, Testing und Publishing-Compliance.
Teams using professional-senior-chrome-extension-architect-developer should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/professional-senior-chrome-extension-architect-developer/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How professional-senior-chrome-extension-architect-developer Compares
| Feature / Agent | professional-senior-chrome-extension-architect-developer | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Verwandelt den Agenten in einen professionellen MV3-Architekten und Entwickler mit Fokus auf AI-Integration, Sicherheit, Performance, Testing und Publishing-Compliance.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
## Wann verwenden
- Planung, Implementierung oder Debugging komplexer Chrome-Erweiterungen (Manifest V3).
- Sichere Integration von AI-Funktionen (OpenAI API, lokale Modelle).
- Migration von MV2 auf MV3, inklusive Lifecycle- und Permission-Anpassungen.
- Durchführung von Sicherheits-, Datenschutz- und Performance-Audits.
- Vorbereitung für Enterprise- oder Chrome Web Store-Compliance.
## Workflow
1. **Analyse** – Ziel, Scope, Datenflüsse, benötigte Permissions, UI-Kontext und Datentypen klären.
2. **Architektur-Design** – Komponenten (Service Worker, Content Script, Popup/Options, Offscreen) und Messaging definieren.
3. **API/Permission Mapping** – Minimale chrome.*-APIs wählen, optionale Permissions berücksichtigen.
4. **Implementierung** – ES-Modules & TypeScript, typsichere Contracts, Async/Await, klare Trennung von background/content/ui/shared.
5. **Security & Privacy Review** – CSP, Shadow DOM, kein eval()/Remote-Code, Consent und Session Storage für Tokens.
6. **Testing** – Unit- und E2E-Tests, Lifecycle-Simulation, Debugging-Hinweise (chrome://extensions, service worker logs).
7. **Publishing** – Manifest validieren, Permissions begründen, Privacy-Disclosure erstellen, Policies verifizieren.
## Ausgabeformat
- Kurzer Architektur- und Dateibaum (root, background/, content/, ui/, shared/).
- Manifest-Vorschlag mit Permissions & Content Scripts.
- Kommentierter Code-Schnipsel je Komponente.
- Security/Privacy Checkliste mit Hinweisen ("likely compliant, VERIFY Policy").
- Kompakte Schritt-für-Schritt-Anleitung zum Build/Packaging.
## Beispiele
**Input:** "Analysiere SEO-Faktoren einer Webseite mit AI und zeige eine Bewertung."
**Output:**
- Content Script extrahiert Meta-Tags, Headings, Bilder, Links.
- Service Worker ruft OpenAI API (optional) auf und liefert Score + Empfehlungen.
- Popup zeigt Scorebars und Issues, speichert API-Key in `chrome.storage.session`.
- Hinweise: keine Tracking-Events, minimale Permissions, CSP prüfen.
## Checklisten
### Security
- [ ] Kein externes JS/CDN oder eval()
- [ ] CSP gesetzt, Shadow DOM wenn DOM-UI injiziert
- [ ] Tokens in `chrome.storage.session`, nicht in localStorage
- [ ] Nur nötige Permissions und Host-Matches
### Privacy
- [ ] Opt-In Dialog bei Datenerhebung
- [ ] Klare Privacy Policy
- [ ] Keine Analytics ohne Einwilligung
### Performance
- [ ] Event-driven statt Dauer-Listener
- [ ] Debounce/Throttling bei DOM-Scans
- [ ] Lazy Injection / Tree-Shaking
### Publishing
- [ ] `manifest.json` valide
- [ ] Permissions begründet
- [ ] CWS-Policy zuletzt verifiziert (quartalsweise prüfen)Related Skills
exa-reference-architecture
Implement Exa reference architecture for search pipelines, RAG, and content discovery. Use when designing new Exa integrations, reviewing project structure, or establishing architecture standards for neural search applications. Trigger with phrases like "exa architecture", "exa project structure", "exa RAG pipeline", "exa reference design", "exa search pipeline".
exa-architecture-variants
Choose and implement Exa architecture patterns at different scales: direct search, cached search, and RAG pipeline. Use when designing Exa integrations, choosing between simple search and full RAG, or planning architecture for different traffic volumes. Trigger with phrases like "exa architecture", "exa blueprint", "how to structure exa", "exa RAG design", "exa at scale".
evernote-reference-architecture
Reference architecture for Evernote integrations. Use when designing system architecture, planning integrations, or building scalable Evernote applications. Trigger with phrases like "evernote architecture", "design evernote system", "evernote integration pattern", "evernote scale".
elevenlabs-reference-architecture
Implement ElevenLabs reference architecture for production TTS/voice applications. Use when designing new ElevenLabs integrations, reviewing project structure, or building a scalable audio generation service. Trigger: "elevenlabs architecture", "elevenlabs project structure", "how to organize elevenlabs", "TTS service architecture", "elevenlabs design patterns", "voice API architecture".
documenso-reference-architecture
Implement Documenso reference architecture with best-practice project layout. Use when designing new Documenso integrations, reviewing project structure, or establishing architecture standards for document signing applications. Trigger with phrases like "documenso architecture", "documenso best practices", "documenso project structure", "how to organize documenso".
deepgram-reference-architecture
Implement Deepgram reference architecture for scalable transcription systems. Use when designing transcription pipelines, building production architectures, or planning Deepgram integration at scale. Trigger: "deepgram architecture", "transcription pipeline", "deepgram system design", "deepgram at scale", "enterprise deepgram", "deepgram queue".
databricks-reference-architecture
Implement Databricks reference architecture with best-practice project layout. Use when designing new Databricks projects, reviewing architecture, or establishing standards for Databricks applications. Trigger with phrases like "databricks architecture", "databricks best practices", "databricks project structure", "how to organize databricks", "databricks layout".
customerio-reference-architecture
Implement Customer.io enterprise reference architecture. Use when designing integration layers, event-driven architectures, or enterprise-grade Customer.io setups. Trigger: "customer.io architecture", "customer.io design", "customer.io enterprise", "customer.io integration pattern".
cursor-reference-architecture
Reference architecture for Cursor IDE projects: directory structure, rules organization, indexing strategy, and team configuration patterns. Triggers on "cursor architecture", "cursor project structure", "cursor best practices", "cursor file structure".
cursor-extension-integration
Integrate VS Code extensions with Cursor IDE: compatibility, Open VSX registry, VSIX installation, conflict resolution, and essential extensions. Triggers on "cursor extensions", "cursor vscode extensions", "cursor plugins", "cursor marketplace", "open vsx", "vsix install".
coreweave-reference-architecture
Reference architecture for CoreWeave GPU cloud deployments. Use when designing ML infrastructure, planning multi-model serving, or establishing CoreWeave deployment standards. Trigger with phrases like "coreweave architecture", "coreweave design", "coreweave infrastructure", "coreweave best practices".
cohere-reference-architecture
Implement Cohere reference architecture with layered project layout for RAG and agents. Use when designing new Cohere integrations, reviewing project structure, or establishing architecture standards for Cohere API v2 applications. Trigger with phrases like "cohere architecture", "cohere project structure", "cohere layout", "organize cohere app", "cohere design pattern".