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. It is especially useful for teams working in multi. Verwandelt den Agenten in einen professionellen MV3-Architekten und Entwickler mit Fokus auf AI-Integration, Sicherheit, Performance, Testing und Publishing-Compliance.
Verwandelt den Agenten in einen professionellen MV3-Architekten und Entwickler mit Fokus auf AI-Integration, Sicherheit, Performance, Testing und Publishing-Compliance.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "professional-senior-chrome-extension-architect-developer" skill to help with this workflow task. Context: Verwandelt den Agenten in einen professionellen MV3-Architekten und Entwickler mit Fokus auf AI-Integration, Sicherheit, Performance, Testing und Publishing-Compliance.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
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.
Related Guides
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
browser-extension-developer
Use this skill when developing or maintaining browser extension code in the `browser/` directory, including Chrome/Firefox/Edge compatibility, content scripts, background scripts, or i18n updates.
professional-communication
Guide technical communication for software developers. Covers email structure, team messaging etiquette, meeting agendas, and adapting messages for technical vs non-technical audiences. Use when drafting professional messages, preparing meeting communications, or improving written communication.
c4-architecture
Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context/container/component/deployment diagrams. Triggers include "architecture diagram", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".
wiki-architect
Analyzes code repositories and generates hierarchical documentation structures with onboarding guides. Use when the user wants to create a wiki, generate documentation, map a codebase structure, or understand a project's architecture at a high level.
unity-developer
Build Unity games with optimized C# scripts, efficient rendering, and proper asset management. Masters Unity 6 LTS, URP/HDRP pipelines, and cross-platform deployment. Handles gameplay systems, UI implementation, and platform optimization. Use PROACTIVELY for Unity performance issues, game mechanics, or cross-platform builds.
seo-structure-architect
Analyzes and optimizes content structure including header hierarchy, suggests schema markup, and internal linking opportunities. Creates search-friendly content organization. Use PROACTIVELY for content structuring.
react-native-architecture
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
react-flow-architect
Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or optimize ReactFlow applications for: (1) Interactive process graphs with expand/collapse navigation, (2) Hierarchical tree structures with drag & drop, (3) Performance-optimized large datasets with incremental rendering, (4) Auto-layout integration with Dagre, (5) Complex state management for nodes and edges, or any advanced ReactFlow visualization requirements.
multi-cloud-architecture
Design multi-cloud architectures using a decision framework to select and integrate services across AWS, Azure, and GCP. Use when building multi-cloud systems, avoiding vendor lock-in, or leveraging best-of-breed services from multiple providers.
monorepo-architect
Expert in monorepo architecture, build systems, and dependency management at scale. Masters Nx, Turborepo, Bazel, and Lerna for efficient multi-project development. Use PROACTIVELY for monorepo setup,
mobile-developer
Develop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization. Use PROACTIVELY for mobile features, cross-platform code, or app optimization.
microsoft-azure-webjobs-extensions-authentication-events-dotnet
Microsoft Entra Authentication Events SDK for .NET. Azure Functions triggers for custom authentication extensions. Use for token enrichment, custom claims, attribute collection, and OTP customization in Entra ID. Triggers: "Authentication Events", "WebJobsAuthenticationEventsTrigger", "OnTokenIssuanceStart", "OnAttributeCollectionStart", "custom claims", "token enrichment", "Entra custom extension", "authentication extension".