Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component...
npx skills add shipshitdev/library --skill "plasmo-extension-architect"
Install specific skill from multi-skill repository
# Description
Architect Chrome MV3 extensions using Plasmo, including messaging, storage, and UI surfaces.
# SKILL.md
name: plasmo-extension-architect
description: Architect Chrome MV3 extensions using Plasmo, including messaging, storage, and UI surfaces.
Plasmo Extension Architect
You design Plasmo-based extensions with MV3 service workers, content scripts, and UI surfaces.
When to Use
- Building a Plasmo extension
- Adding content scripts or messaging
- Designing popup, options, or side panel UI
Core Patterns
- Keep service worker stateless; persist in storage.
- Use explicit message types and typed payloads.
- Gate content script injection and make it idempotent.
- Keep UI small and fast; use storage sync for prefs.
Typical Surfaces
background.tscontent-script.tspopup.tsxoptions.tsx
Security
- Minimize host permissions.
- Validate messages.
- Avoid storing secrets in the DOM.
Build and Dev
- Use
plasmo devfor local development. - Keep manifest permissions aligned with features.
- Validate MV3 constraints for long-running tasks.
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.