Agent Skills für Webentwicklung

Stellt Vercel-Projekte über die CLI bereit, verwaltet, prüft und behebt Fehler, einschließlich Deployments, Env-Variablen, Domains, Logs, Metriken und Core Web Vitals.

von vercel/vercel

• Release

Erstellt, konfiguriert und stellt Azure Static Web Apps mit der SWA CLI bereit, einschließlich lokaler Emulation, staticwebapp.config.json, Functions APIs und GitHub Actions CI/CD.

von github/awesome-copilot

• Implementation
• Release

Leitet den Aufbau von Full-Stack-Anwendungen mit AWS Blocks an, einem Infrastructure-from-Code-Framework für APIs, Speicher, Auth, Realtime und Deployment.

von aws/agent-toolkit-for-aws

• Design
• Implementation
• Release

Expertenhafte Browser-Automatisierung, Debugging und Performance-Analyse mit Chrome DevTools MCP: Navigation, Screenshots, Netzwerk-Inspektion und Performance-Profiling.

von github/awesome-copilot

Browser-Automatisierungs-CLI für KI-Agents: Seiten navigieren, Formulare ausfüllen, klicken, Screenshots erstellen, Daten extrahieren und Web-Apps über CDP testen.

von vercel-labs/agent-browser

• Testing

Lässt eine Web-App auf Smartphones nativ wirken: behebt Sticky-Hover, Tap-Highlights, 100vh-Bugs, Input-Zoom, Safe Areas und Touch-Interaktionen mit CSS und Meta-Tags.

von emilkowalski/skills

Implementiert fortgeschrittene TypeScript-Typsysteme, benutzerdefinierte Type Guards, Utility Types, Branded Types und tRPC für End-to-End-Typsicherheit.

von jeffallan/claude-skills

• Design
• Implementation

妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。

von larksuite/cli

Etabliert die Qualitätslatte eines Projekts als schriftlichen CONSTRAINTS.md-Vertrag mit Schwellenwerten für Coverage, Performance und Barrierefreiheit und überwacht Diffs auf abgeschwächte Prüfungen.

von addyosmani/agent-skills

Koordiniert parallele Feature-Entwicklung mit Dateieigentumsstrategien, Konfliktvermeidung, Interface-Verträgen und Integrationsmustern für Multi-Agent-Implementierung.

von wshobson/agents

• Implementation

Führt durch Stripe-Integrationsentscheidungen über Entwicklungs- und Testumgebungsplanung (separate Sandboxes vs. die gemeinsame Testmodus-Sandbox), API-Auswahl (Checkout Sessions vs. PaymentIntents), Connect-Plattform-Setup (Accounts v2, Controller-Eigenschaften), Billing/Abonnements, Steuern und Registrierungen (Stripe Tax, automatic_tax, Produktsteuercodes), Treasury-Finanzkonten, Integrationsoptionen (Checkout, Payment Element), Migration von veralteten Stripe-APIs und Sicherheits-Best-Practices (API-Key-Management, API-Key-Berechtigungen, Webhooks, OAuth). Verwenden bei Planung, Aufbau, Änderung, Test oder Review jeder Stripe-Integration, einschließlich Auswahl einer Entwicklungsumgebung, Annahme von Zahlungen, Aufbau von Marktplätzen, Integration von Stripe, Verarbeitung von Zahlungen, Einrichtung von Abonnements, Erhebung von Sales Tax, VAT oder GST, Erstellung verbundener Konten oder Implementierung sicherer Key-Verwaltung.

von stripe/ai

Bedient GitHub über die gh-axi CLI: Issues, Pull Requests, Discussions, Stacked PRs, Workflow-Runs, Releases und Projects.

von kunchenguid/gh-axi

Entwirft UI-Screens für mobile Apps über die Sleek API, erstellt Projekte und gerenderte Screens aus Beschreibungen in natürlicher Sprache und implementiert sie dann in HTML, React Native oder SwiftUI.

von designed-by-ai/skills

Voraussetzungen (angegeben): API key · Paid account

Erstellen, Überprüfen, Refaktorieren oder Architektieren von ASP.NET Core Webanwendungen unter Verwendung aktueller offizieller Anleitungen für die .NET-Webentwicklung. Verwenden bei der Arbeit an Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controllerbasierten Web APIs, SignalR, gRPC, Middleware, Dependency Injection, Konfiguration, Authentifizierung, Autorisierung, Tests, Performance, Deployment oder ASP.NET Core-Upgrades.

von openai/skills

• Implementation

MUSS für Vue.js-Aufgaben verwendet werden. Empfiehlt nachdrücklich Composition API mit `<script setup>` und TypeScript als Standardansatz. Deckt Vue 3, SSR, Volar, vue-tsc ab. Laden für jede Arbeit mit Vue, .vue-Dateien, Vue Router, Pinia oder Vite mit Vue. IMMER Composition API verwenden, es sei denn, das Projekt erfordert ausdrücklich Options API.

von vuejs-ai/skills

• Design

Erstellt sicherheitsorientierte Full-Stack-Webanwendungen durch integrierte Frontend- und Backend-Komponenten mit mehrschichtiger Sicherheit auf jeder Ebene. Deckt den kompletten Stack von der Datenbank bis zur UI ab und erzwingt Auth, Eingabevalidierung, Ausgabe-Encoding und parametrisierte Queries über alle Schichten hinweg. Verwenden…

von jeffallan/claude-skills

• Requirements
• Design
• Implementation

Leitfaden für unverwechselbares, bewusstes visuelles Design beim Aufbau neuer oder Umgestaltung bestehender UI. Hilft bei ästhetischer Ausrichtung, Typografie und Entscheidungen, die nicht wie vorgefertigte Standards wirken.

von anthropics/skills

• Implementation

Übersetzt Figma-Designs in produktionsreifen Anwendungscode mit 1:1 visueller Treue. Verwenden bei der Implementierung von UI-Code aus Figma-Dateien, wenn der Nutzer "Design implementieren", "Code generieren", "Komponente implementieren" erwähnt, Figma-URLs bereitstellt oder darum bittet, Komponenten passend zu Figma-Spezifikationen zu erstellen. Für Figma-Canvas-Schreibvorgänge über `use_figma` verwenden Sie `figma-use`.

von openai/skills

• Implementation

Voraussetzungen (angegeben): Node.js

> Bewerte und erstelle unverwechselbare, produktionsreife Frontend-Interfaces mit hoher Designqualität und Design-System-Compliance. Bewertet anhand von drei Säulen: reibungsloser Weg von der Erkenntnis zur Aktion, hochwertige Handwerkskunst und vertrauenswürdiger Aufbau. VERWENDEN FÜR: PR-Reviews, Design-Reviews, Accessibility-Audits, Design-System-Compliance-Checks, kreatives Frontend-Design, UI-Code-Review, Component-Reviews, Responsive-Design-Checks, Theme-Tests und das Erstellen einprägsamer UIs. NICHT VERWENDEN FÜR: Backend-API-Reviews, Datenbank-Schema-Reviews, Infrastruktur- oder DevOps-Arbeit, reine Business-Logik ohne UI oder Nicht-Frontend-Code.

von microsoft/skills

• Requirements
• Implementation

Für Vue.js-Tests. Behandelt Vitest, Vue Test Utils, Komponententests, Mocking, Testmuster und Playwright für E2E-Tests.

von vuejs-ai/skills

Prüft UI-Code auf Einhaltung der Web Interface Guidelines. Verwenden, wenn gefragt wird: "review my UI", "check accessibility", "audit design", "review UX" oder "check my site against best practices".

von vercel-labs/agent-skills

Toolkit für die Interaktion mit und das Testen von lokalen Webanwendungen mit Playwright. Unterstützt die Verifikation von Frontend-Funktionalität, das Debuggen von UI-Verhalten, das Erfassen von Browser-Screenshots und das Anzeigen von Browser-Logs.

von anthropics/skills

• Implementation

Skalierbare Designsysteme mit Tailwind CSS v4, Design-Tokens, Komponentenbibliotheken und responsiven Mustern erstellen. Verwenden beim Erstellen von Komponentenbibliotheken, Implementieren von Designsystemen oder Standardisieren von UI-Mustern.

von wshobson/agents

Verwende diese Skill, wenn du CloudBase-Projekte (腾讯云开发, 云开发, TCB, 微信云开发) entwickelst, designst, baust, deployst, debuggst, migrierst oder Fehler behebst — Web, 微信小程序, 小程序, uni-app, Mobile (iOS, Android, Flutter, React Native). Deckt UI ab (页面, 界面, 表单, dashboard, prototype, 原型); Auth (登录, 注册, OAuth, publishable key);…

von tencentcloudbase/cloudbase-skills

• Requirements
• Implementation
• Release

Voraussetzungen (angegeben): Credentials

Vision-getriebene Browser-Automatisierung mit Midscene. Arbeitet anhand von Screenshots – keine DOM- oder Accessibility-Labels nötig. Läuft in headless Puppeteer – übernimmt NICHT Maus oder Tastatur des Nutzers. Unterstützt außerdem CDP-Modus und Bridge-Modus zur Verbindung mit einem vorhandenen Chrome. Diese Skill verwenden, wenn der Nutzer…

von web-infra-dev/midscene-skills

• Implementation
• Testing

antfu-artige Designkonventionen, erweitert. UnoCSS-first, klassenbasierte semantische Tokens mit dualem Hell/Dunkel für Tooling- und Devtools-UIs, plus Design-Read, Anti-Slop und Micro-Interaction-Politur für Landing Pages und Produktoberflächen. Verwenden beim Erstellen oder Refactoring jeder Oberfläche mit UnoCSS.

von antfu/skills

Leitet stabiles API- und Interface-Design an. Verwenden beim Entwerfen von APIs, Modulgrenzen oder jeglichen öffentlichen Schnittstellen. Verwenden beim Erstellen von REST- oder GraphQL-Endpunkten, beim Definieren von Typverträgen zwischen Modulen oder beim Festlegen von Grenzen zwischen Frontend und Backend.

von addyosmani/agent-skills

• Implementation

Verwenden bei der Implementierung eines Features oder Bugfixes, bevor Implementierungscode geschrieben wird

von obra/superpowers

• Requirements
• Implementation

Führt Playwright-Tests im großen Maßstab mit Azure Playwright Workspaces (früher Microsoft Playwright Testing) aus. Verwenden beim Skalieren von Browsertests über cloud-gehostete Browser, bei der Integration in CI/CD-Pipelines oder beim Veröffentlichen von Testergebnissen im Azure-Portal.

von microsoft/skills

• Requirements
• Release

Generiert benutzerdefinierte Design-System-Regeln für die Codebasis des Nutzers. Verwenden, wenn der Nutzer sagt "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines" oder projektbezogene Konventionen für Figma-zu-Code-Workflows etablieren möchte. Erfordert eine Verbindung zum Figma MCP-Server.

von openai/skills

• Design

Voraussetzungen (angegeben): MCP server

Diese Skill zusammen mit figma-use verwenden, wenn die Aufgabe darin besteht, eine Anwendungsseite, Ansicht oder ein mehrteiliges Layout in Figma zu übertragen. Auslöser: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. Dies ist die bevorzugte Workflow-Skill, wann immer der Nutzer eine vollständige Seite, einen Screen oder eine Ansicht in Figma aus Code oder einer Beschreibung erstellen oder aktualisieren möchte. Entdeckt Design-System-Komponenten, Variablen und Styles über search_design_system, importiert sie und setzt Screens schrittweise Abschnitt für Abschnitt mit Design-System-Tokens statt hartcodierten Werten zusammen.

von openai/skills

• Implementation

Verwandelt Notion-Specs in Implementierungspläne, Aufgaben und Fortschrittsverfolgung; verwenden bei der Umsetzung von PRDs/Feature-Specs und beim Erstellen von Notion-Plänen + Aufgaben daraus.

von openai/skills

• Requirements

Extrahiert eine DESIGN.md-Designdokumentationsdatei aus einer Penpot-Datei: eine portable Markdown-Spezifikation (YAML-Frontmatter mit Token-Maps für Farben/Typografie/Rounded/Spacing/Komponenten + Prosa-Abschnitte: Overview, Colors, Typography, Layout, Shapes, Components, Do's & Don'ts, Iteration Guide, Known Gaps) im design-md-Format, fundiert auf den echten Tokens, Library-Assets und gesampelten Komponentenstilen der Datei — niemals erfunden. Read-only auf dem Canvas; schreibt eine lokale Markdown-Datei. Trigger: 'generate DESIGN.md', 'create a design.md', 'document the design system as markdown', 'export design guidelines', 'extract design documentation', 'design system spec file', 'make a style guide file from this design'.

von penpot/penpot-ai-kit

Prüfe ein Penpot-Design gegen seinen implementierten Code (eine Quellkomponente oder Storybook-Story) und gib einen strukturierten DRIFT-Bericht aus. Verwende dies, wenn ein Engineer bestätigen muss, dass der Build zum Design passt: HTML/CSS aus einer Auswahl extrahieren, seine Tokens/Struktur/Zustände auf die Code-Komponente abbilden, sie diffen und auflisten, was auf jeder Seite fehlt, mit Schweregrad und Abgleich. Fällt bei fehlender Code-Quelle sauber auf eine Design-System-Token-Prüfung zurück. Auslöser: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.

von penpot/penpot-ai-kit

Erstellt, testet und deployt Microsoft 365 Apps und Agents für Teams und Copilot. Enthält Sub-Skills für Projekterstellung, lokales Testen, Cloud-Deployment, Fehlerbehebung und Slack-zu-Teams-Migration. USE FOR: Teams agent, bot, tab, message extension, Declarative Agents, Custom Engine Agents, local testing, Agents Playground, Azure resource provision, remote deployment, Slack to Teams migration, cross-platform bot development, Block Kit to Adaptive Cards conversion. DO NOT USE FOR: general web development, non-bot/non-Teams projects.

von microsoft/skills

• Release

Verwenden, wenn die Implementierung abgeschlossen ist, alle Tests bestehen und du entscheiden musst, wie die Arbeit integriert wird.

von obra/superpowers

Fundiert jede Implementierungsentscheidung in offizieller Dokumentation. Verwenden, wenn ein Ansatz vor der Umsetzung anhand der offiziellen Docs geprüft werden soll oder wenn autoritativer, quellenbelegter Code frei von veralteten Mustern gewünscht ist. Verwenden beim Bauen mit jedem Framework oder jeder Bibliothek, bei dem/der Korrektheit zählt.

von addyosmani/agent-skills

• Requirements
• Implementation

Voraussetzungen (angegeben): Python

Erstellt Spezifikationen vor dem Coding. Verwenden beim Start eines neuen Projekts, Features oder einer wesentlichen Änderung, wenn noch keine Spezifikation existiert. Verwenden beim Entwurf eines PRD oder Anforderungsdokuments mit Zielen und Umfang oder wenn Anforderungen unklar, mehrdeutig oder nur als vage Idee vorhanden sind. Verwenden, wenn eine einzelne Anforderung mehrere unabhängig testbare Fähigkeiten umfasst und vor der Spezifizierung in eine Fähigkeitskarte von Modulen zerlegt werden muss.

von addyosmani/agent-skills

• Requirements
• Implementation