前端设计操作浏览器github未标认证来源可访问clear审计异常

pwa（普瓦）

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

总安装

367

周安装

GitHub Stars

下载量

119

CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

许可证

MIT

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：pwa（普瓦）
来源仓库：https://github.com/sebastiaanwouters/dotagents
仓库路径：skills/pwa
安装命令：
npx skills add https://github.com/sebastiaanwouters/dotagents --skill pwa
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。不同来源提供的安装方式可能略有差异；本站展示可直接复制的安装命令，安装前请核对来源页面。

skills.shnpx skills

npx skills add https://github.com/sebastiaanwouters/dotagents --skill pwa

简介

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。

适合让 Agent 生成或审查 React、Vue、CSS 等相关代码。
使用时需要结合项目现有设计系统和构建方式，避免生成孤立片段。
涉及页面改动时，应配合本地预览和构建检查确认视觉效果。
安装前建议确认权限范围和维护状态，以及是否会触发文件操作或网络请求。

SKILL.md

Progressive Web App (PWA) Skill

Build installable, offline-capable web apps optimized for mobile with desktop compatibility.

Essential HTML Head

<head>
  <!-- Viewport with safe area support -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="theme-color" content="#000000">

  <!-- PWA capable -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="App Name">

  <!-- Manifest & Icons -->
  <link rel="manifest" href="/manifest.webmanifest">
  <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
</head>

Web App Manifest

{
  "name": "My Progressive Web App",
  "short_name": "MyPWA",
  "description": "App description",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Display Modes

Mode	Description	Use Case
`standalone`	Native app look, no browser UI	Most apps (recommended)
`fullscreen`	Entire screen, no status bar	Games, immersive, VR/AR
`minimal-ui`	Minimal browser controls	Content needing navigation
`browser`	Standard browser tab	Not recommended for PWAs

Detect Display Mode

@media (display-mode: standalone) {
  .browser-nav { display: none; }
}

const isInstalled = window.matchMedia('(display-mode: standalone)').matches
  || window.navigator.standalone; // iOS

Safe Area Handling

Required: viewport-fit=cover in viewport meta tag.

Handles notches, Dynamic Island, rounded corners on modern devices.

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

body {
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

/* Fixed header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(1rem + var(--safe-top)) calc(1rem + var(--safe-right)) 1rem calc(1rem + var(--safe-left));
}

/* Fixed bottom navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem var(--safe-right) calc(0.5rem + var(--safe-bottom)) var(--safe-left);
}

/* Landscape notch handling */
@media (orientation: landscape) {
  .content {
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
  }
}

iOS Status Bar Styles

Value	Effect
`default`	White bar, black text
`black`	Black bar, white text
`black-translucent`	Transparent, content flows behind

Service Worker

Registration

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered:', reg.scope))
    .catch(err => console.error('SW failed:', err));
}

Basic Service Worker (sw.js)

const CACHE_NAME = 'app-v1';
const ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];

// Install: cache assets
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(ASSETS))
      .then(() => self.skipWaiting())
  );
});

// Activate: clean old caches
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
    ).then(() => self.clients.claim())
  );
});

// Fetch: cache-first for assets, network-first for API
self.addEventListener('fetch', event => {
  const { request } = event;

  if (request.url.includes('/api/')) {
    // Network first for API
    event.respondWith(
      fetch(request)
        .then(res => {
          const clone = res.clone();
          caches.open(CACHE_NAME).then(c => c.put(request, clone));
          return res;
        })
        .catch(() => caches.match(request))
    );
  } else {
    // Cache first for static assets
    event.respondWith(
      caches.match(request).then(cached => cached || fetch(request))
    );
  }
});

Caching Strategies

Strategy	Use Case	Behavior
Cache First	Static assets, fonts, images	Fast, may be stale
Network First	API data, dynamic content	Fresh, slower
Stale While Revalidate	Semi-dynamic content	Fast + background update
Network Only	Auth, real-time data	Always fresh

Mobile Optimization

Touch Targets

/* Apple HIG: minimum 44x44px */
button, a, [role="button"] {
  min-width: 44px;
  min-height: 44px;
}

Prevent iOS Input Zoom

/* Font size >= 16px prevents zoom on focus */
input, select, textarea {
  font-size: 16px;
}

Disable Pull-to-Refresh

html {
  overscroll-behavior-y: contain;
}

Native-like Touch Feedback

button, a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* Disable double-tap zoom */
}

/* Disable text selection on UI elements */
.nav, .toolbar {
  -webkit-user-select: none;
  user-select: none;
}

Smooth Scrolling

.scroll-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

Responsive Layout

/* Mobile-first */
.container {
  padding: 1rem;
  max-width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
  .container { max-width: 720px; margin: 0 auto; }
  .mobile-only { display: none; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 960px; }
  .bottom-nav { display: none; }
  .sidebar { display: block; }
}

Installation Prompt

let deferredPrompt;

window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault();
  deferredPrompt = e;
  showInstallButton();
});

function installApp() {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  deferredPrompt.userChoice.then(result => {
    console.log('Install:', result.outcome);
    deferredPrompt = null;
  });
}

window.addEventListener('appinstalled', () => {
  console.log('App installed');
  hideInstallButton();
});

PWA Checklist

Required for Installation

HTTPS (localhost allowed for dev)
Valid manifest with name, icons, start_url, display
192x192 PNG icon
512x512 PNG icon
Service worker with fetch handler

Performance

Precache critical assets
Lazy load non-critical resources
Use WebP/AVIF images
Code splitting

Testing

Lighthouse

Chrome DevTools > Lighthouse > Progressive Web App

Manual Checks

// Is installed?
window.matchMedia('(display-mode: standalone)').matches

// Service worker status
navigator.serviceWorker.getRegistrations()
  .then(regs => console.log('SW:', regs));

// Cache contents
caches.keys().then(names => console.log('Caches:', names));

Clear PWA State

// Unregister all service workers
navigator.serviceWorker.getRegistrations()
  .then(regs => regs.forEach(r => r.unregister()));

// Clear all caches
caches.keys().then(names => names.forEach(n => caches.delete(n)));

Reference Files

reference/build-tools.md - Vite, Webpack, framework-specific setup
reference/caching-strategies.md - Advanced Workbox patterns
reference/mobile-optimization.md - iOS quirks, responsive patterns

适合场景

用户想查找某类 Agent Skill 时

需要根据任务场景推荐可安装能力包时

需要对比不同来源的安装命令和来源信息时

需要参考平台分布和安装热度时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Claude Code

26.29%

按下载量换算31

github-copilot

23.53%

按下载量换算28

Gemini CLI

17.28%

按下载量换算21

OpenCode

11.41%

按下载量换算14

Cursor

7.65%

按下载量换算9

windsurf

3.27%

按下载量换算4

安全审计

Gen Agent Trust Hub

未通过

Socket

通过

Snyk

通过

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。来源安全扫描存在 warning/failed 结果，不能写成本站确认安全。

来源信息

GitHub 仓库

github.com

/sebastiaanwouters/dotagents

SKILL.md 来源