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.

242 stars

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

$curl -o ~/.claude/skills/professional-senior-chrome-extension-architect-developer/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/dyai2025/professional-senior-chrome-extension-architect-developer/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/professional-senior-chrome-extension-architect-developer/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How professional-senior-chrome-extension-architect-developer Compares

Feature / Agentprofessional-senior-chrome-extension-architect-developerStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/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

242
from aiskillstore/marketplace

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

242
from aiskillstore/marketplace

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

242
from aiskillstore/marketplace

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

242
from aiskillstore/marketplace

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

242
from aiskillstore/marketplace

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

242
from aiskillstore/marketplace

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

242
from aiskillstore/marketplace

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

242
from aiskillstore/marketplace

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

242
from aiskillstore/marketplace

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

242
from aiskillstore/marketplace

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

242
from aiskillstore/marketplace

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

242
from aiskillstore/marketplace

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".