web-development-tools Plugin
Build web interfaces and sites with React, Svelte, design systems and accessible components.
So installierst du das web-development-tools Plugin
Führe beide Befehle in Claude Code aus. Der erste fügt den Marketplace einmalig hinzu; der zweite installiert das Plugin.
/plugin marketplace add legioncodeinc/vibe-coding-tools
/plugin install web-development-tools@wasp-nestWas ist in web-development-tools enthalten
84 Teile wurden aus den eigenen Dateien des Plugins gelesen.
Commands 12
Ausführen als /web-development-tools:name- /web-development-tools:build-app-search[product/repository] [outcome and constraints]
Build tenant-safe application search with an accepted query/result contract, stable pagination and measured retrieval quality.
- /web-development-tools:build-localization[app or feature] [accepted scope] [repository]
Build or extend a localization app using current locale, resource, plural, formatting and RTL boundaries with explicit verification.
- /web-development-tools:build-nextjs-app[app or feature] [accepted scope] [repository]
Build or extend a Next.js app using current App Router, server/client, data, mutation and cache boundaries with explicit verification.
- /web-development-tools:build-nuxt-app[app or feature] [accepted scope] [repository]
Build or extend a Nuxt app using current Nuxt routing, SSR, Nitro, data and cache boundaries with explicit verification.
- /web-development-tools:build-pwa-app[app or feature] [accepted scope] [repository]
Build or extend a PWA app using current public asset, offline fallback, update and private-data boundaries with explicit verification.
- /web-development-tools:build-quick-website
Build a scoped SvelteKit marketing or lead-generation website from a brief, with explicit CMS and integration decisions.
- /web-development-tools:build-saas-foundation[product/repository] [outcome and constraints]
Build a scoped SaaS foundation joining tenant identity, data isolation, billing entitlements and a verified user journey.
- /web-development-tools:build-vue-app[app or feature] [accepted scope] [repository]
Build or extend a Vue app using current component, state, form, routing and asynchronous boundaries with explicit verification.
- /web-development-tools:build-web-app
Scope and build an authorized web-app slice using an actual supported framework owner and verified boundaries.
- /web-development-tools:choose-web-stack[product] [team experience] [backend/hosting constraints]
Recommend one web framework from product, rendering, team and hosting needs, with backend boundaries and owner gaps.
- /web-development-tools:qualify-typography
Qualify a web typography system and font delivery using source inspection and actual browser evidence.
- /web-development-tools:vendor-component[component need] [artifact/version] [target repository]
Select and prepare an authorized component vendoring plan with actual artifact provenance, notices, patches and update evidence.
Agents 30
Aufrufen als @agent-web-development-tools:name- @agent-web-development-tools:asset-wasp-drone
Single owner of the Universal Asset Registry: the platform-owned catalog of every Feature, Page, Route, Surface, Control, Display, Layout, NavEntry, DesignToken, Icon, MediaAsset, Font, Motion, Breakpoint, ContentEntry, Translation, FeatureFlag binding, Meter binding, and Entitlement in the codebase
- @agent-web-development-tools:component-vendoring-wasp-droneinherit
Select reusable UI components, prepare exact notice-preserving copy plans, and maintain authorized local forks with artifact provenance. Use for MIT subset vendoring or component updates.
- @agent-web-development-tools:csv-xlsx-import-export-wasp-drone
Implements and audits the \"upload your spreadsheet\" feature surface for React/Next.js products. Owns CSV/XLSX parse (papaparse, SheetJS, exceljs), large-file streaming (Web Worker + chunk pattern), column-mapping UX (5-stage wizard, OneSchema/Flatfile/dromo vs self-hosted react-spreadsheet-import)
- @agent-web-development-tools:dark-mode-theming-wasp-drone
Audits and implements the full dark-mode theming surface for React/Next.js applications. Owns CSS variable token architecture (semantic vs. primitive), next-themes ThemeProvider wiring, FOWT (flash-of-wrong-theme) prevention, SSR hydration safety, Tailwind v4 @custom-variant configuration, and multi
- @agent-web-development-tools:design-system-wasp-drone
Bootstraps complete design systems from scratch for any product: master design brief, tokens CSS, utility layer CSS, per-component specs, per-screen specs, static HTML examples, and README. Invoke when the user says \"build a design system for X\", \"bootstrap UI for product Y\", \"create tokens and
- @agent-web-development-tools:font-loading-wasp-drone
Production-focused web font loading specialist. Audits, implements, and advises on the complete font loading pipeline: font-display descriptor selection (swap/optional/fallback/block) with CLS risk analysis; <link rel=\"preload\"> strategy with crossorigin correctness; variable-font subsetting via p
- @agent-web-development-tools:icon-system-wasp-drone
Icon-system specialist for React/Next.js applications. Owns library selection (Lucide, Heroicons, Tabler, Phosphor, Iconify), the tree-shake-vs-SVG-sprite delivery trade-off, the dynamic-import-by-name pattern, custom SVG component authoring, and the accessibility contract (aria-hidden for decorativ
- @agent-web-development-tools:image-optimization-wasp-drone
Image optimization specialist for React/Next.js and HTML contexts. Audits and remediates image delivery decisions: AVIF/WebP format selection (AVIF is the 2026 production default at 93-95% browser coverage), responsive srcset/sizes correctness (mismatched sizes is the #1 next/image performance bug),
- @agent-web-development-tools:impeccable-wasp-drone
Operates the entire Impeccable design system (pbakaus/impeccable, Apache-2.0) as the Wasp Swarm's frontend-design operating system: the four-phase loop (Start -> Iterate -> Polish -> Maintain), the context contract (PRODUCT.md + DESIGN.md + surface briefs), the 23-command vocabulary, the determinist
- @agent-web-development-tools:localization-wasp-droneinherit
Implement locale routing, resources, ICU/plurals, Intl formatting and RTL in the selected web framework. Use for localization and scoped translation review.
- @agent-web-development-tools:modal-toast-dialog-wasp-drone
Accessible overlay specialist for React. Selects and implements the right primitive (Radix Dialog, AlertDialog, Vaul Drawer, Sonner toast, cmdk command menu, Headless UI), enforces the six-point accessible-modal contract (focus trap, escape, scroll lock, aria-modal, aria-labelledby, focus return), a
- @agent-web-development-tools:nextjs-wasp-droneinherit
Implement Next.js App Router features, reads, Server Actions, Route Handlers, cache/private-data isolation and build/provider handoffs. React, UI, security and provider owners retain their boundaries.
- @agent-web-development-tools:nuxt-wasp-droneinherit
Implement accepted Nuxt apps: routing, SSR/data, Nitro routes, request state, private config and cache/auth integration. Vue, design, backend and provider owners keep their boundaries.
- @agent-web-development-tools:preact-wasp-drone
Preact 11 specialist: signals API (v2 with createModel/useModel/action), preact/compat migration from React (alias setup, known gaps, compat blockers), third-party embed widgets (shadow DOM isolation, IIFE bundle pattern, size budgeting), Astro island integration (client:* directives, require >= 5.0
- @agent-web-development-tools:product-tour-onboarding-ui-wasp-drone
In-app product tour and onboarding UI specialist. Selects the right tour tool (Userpilot, Appcues, Userflow, Pendo Guides, Driver.js, Shepherd.js, Intro.js), implements tooltip/modal/hotspot/checklist components, wires segment-based trigger logic, and establishes a tour maintenance protocol that sur
- @agent-web-development-tools:pwa-wasp-droneinherit
Implement scoped browser PWA manifest, service-worker lifecycle and public offline assets. Preserve private-request bypass, accepted sync/auth contracts and actual browser proof.
- @agent-web-development-tools:react-to-svelte-wasp-droneinherit
Port-wave drone converting React surfaces to Svelte 5 against an immutable API contract - contract extraction, behavior inventory, runes/snippets port, per-row verification. Use for component-by-component dashboard ports.
- @agent-web-development-tools:react-wasp-drone
React architecture specialist for React 18/19 codebases: bulletproof-react patterns, awesome-react ecosystem, React 19 idioms (Server Components, Suspense, Actions, Compiler), state layering, data-fetching boundaries, error handling, testing strategy, and performance discipline. Invoke when the user
- @agent-web-development-tools:seo-aeo-wasp-drone
SvelteKit (Svelte 5) + Payload CMS + Vercel SEO and Answer Engine Optimization specialist. Optimizes for both traditional search (Google, Bing) and AI answer engines (AI Overviews, ChatGPT, Perplexity, Claude) at once. Covers technical foundation, svelte:head metadata, JSON-LD schema, Payload SEO fi
- @agent-web-development-tools:shadcn-svelte-wasp-drone
shadcn-svelte library specialist for any Svelte 5 project: CLI (init/add/apply), the copy-in-your-repo model, component anatomy, the registry system, generic theming mechanics, dark mode, Superforms + Formsnap forms, customization patterns that survive upstream re-syncs, and accessibility inherited
- @agent-web-development-tools:svelte-wasp-drone
Svelte 5 language and SvelteKit 2 runtime specialist: runes ($state, $derived, $effect, $props, $bindable, $host, $inspect), snippets and event attributes, component lifecycle, universal reactivity in .svelte.js/.svelte.ts, Svelte 4-to-5 migration, SvelteKit 2 load functions/form actions/remote func
- @agent-web-development-tools:tailwind-wasp-drone
Tailwind CSS v4 framework specialist, CSS-first configuration, @theme mechanics, utility generation, the Vite plugin, v3-to-v4 migration, dark mode variants via @custom-variant, container queries, class ordering and tooling, and Oxide-engine performance, for ANY codebase. Invoke when the user says \
- @agent-web-development-tools:tanstack-wasp-drone
TanStack-in-SvelteKit (Svelte 5) specialist - TanStack Query SSR/caching/prefetching/mutations, TanStack Table runes-native setup and feature registration, TanStack Form snippet-based validation, TanStack Virtual, and drawing the line on TanStack Router/Start having no official Svelte support. Invok
- @agent-web-development-tools:typography-font-wasp-drone
Typography and font-loading specialist for web products: variable fonts, Google Fonts vs Fontsource vs self-host, the FOIT/FOUT/FOFT loading story, font-display semantics, fluid type scales via clamp(), vertical rhythm, and the type-token architecture. Use when the user says \"set up fonts\", \"audi
- @agent-web-development-tools:ux-ui-svelte-wasp-drone
General Svelte 5 / SvelteKit UI owner: enforces and implements UI work with shadcn-svelte 1.x on Bits UI v2 + Melt UI and Tailwind v4, the @theme token bridge to a project's design tokens, and brand or white-label theming. Applies the project's own UI ADR or design standard when present (OSPRY's ADR
- @agent-web-development-tools:ux-ui-wasp-drone
Enforces a product's design system from its source-of-truth folder (tokens, utilities, components, screens) and governs integration with shadcn/ui, Mantine, Lucide-react, and Framer Motion. Invoke for UI questions, design reviews, component specs, library-wrapper authoring, motion rulings, token dri
- @agent-web-development-tools:vue-wasp-droneinherit
Implement Vue SFC, composable, state, form and client-route slices after Vue is selected. Use for Vue-native application work; hand Nuxt SSR, design and backend contracts to their owners.
- @agent-web-development-tools:web-stack-selection-wasp-droneinherit
Recommend one web framework using product, rendering, team, backend and hosting constraints. Use for React/Vite, SvelteKit, Next.js or Vue/Nuxt decisions with honest owner gaps; no implementation.
- @agent-web-development-tools:website-wasp-drone
Builds production-grade SvelteKit (Svelte 5) + Payload CMS + Supabase websites end-to-end from a brief, applying a 12-phase site-template playbook (monorepo architecture, SvelteKit performance + security, SEO/AEO, analytics, Supabase backend with RLS, auth + RBAC, Payload admin, lead capture, blog,
- @agent-web-development-tools:xyflow-wasp-droneinherit
React Flow (@xyflow/react) and Svelte Flow (@xyflow/svelte) specialist for node editors, workflow builders, and diagram canvases: setup, flow state, custom nodes, edges and handles, connection rules, Dagre or ELK layout, sub flows, theming and Tailwind v4, React Flow UI, SSR, performance, accessibil
Skills 42
Claude lädt es, wenn die Aufgabe passt- asset-stinger
Keine Beschreibung in der Datei gefunden.
- component-vendoring-stinger
Keine Beschreibung in der Datei gefunden.
- csv-xlsx-import-export-stinger
Keine Beschreibung in der Datei gefunden.
- dark-mode-theming-stinger
Keine Beschreibung in der Datei gefunden.
- design-system-stinger
Keine Beschreibung in der Datei gefunden.
- font-loading-stinger
Keine Beschreibung in der Datei gefunden.
- icon-system-stinger
Keine Beschreibung in der Datei gefunden.
- image-optimization-stinger
Keine Beschreibung in der Datei gefunden.
- impeccable-stinger
Keine Beschreibung in der Datei gefunden.
- localization-stinger
Keine Beschreibung in der Datei gefunden.
- modal-toast-dialog-stinger
Keine Beschreibung in der Datei gefunden.
- nextjs-stinger
Keine Beschreibung in der Datei gefunden.
- nuxt-stinger
Keine Beschreibung in der Datei gefunden.
- preact-stinger
Keine Beschreibung in der Datei gefunden.
- product-tour-onboarding-ui-stinger
Keine Beschreibung in der Datei gefunden.
- pwa-stinger
Keine Beschreibung in der Datei gefunden.
- react-stinger
Keine Beschreibung in der Datei gefunden.
- react-to-svelte-stinger
Keine Beschreibung in der Datei gefunden.
- seo-aeo-stinger
Keine Beschreibung in der Datei gefunden.
- shadcn-svelte-stinger
Keine Beschreibung in der Datei gefunden.
- source-command-build-app-search
Keine Beschreibung in der Datei gefunden.
- source-command-build-localization
Keine Beschreibung in der Datei gefunden.
- source-command-build-nextjs-app
Keine Beschreibung in der Datei gefunden.
- source-command-build-nuxt-app
Keine Beschreibung in der Datei gefunden.
- source-command-build-pwa-app
Keine Beschreibung in der Datei gefunden.
- source-command-build-quick-website
Keine Beschreibung in der Datei gefunden.
- source-command-build-saas-foundation
Keine Beschreibung in der Datei gefunden.
- source-command-build-vue-app
Keine Beschreibung in der Datei gefunden.
- source-command-build-web-app
Keine Beschreibung in der Datei gefunden.
- source-command-choose-web-stack
Keine Beschreibung in der Datei gefunden.
- source-command-qualify-typography
Keine Beschreibung in der Datei gefunden.
- source-command-vendor-component
Keine Beschreibung in der Datei gefunden.
- svelte-stinger
Keine Beschreibung in der Datei gefunden.
- tailwind-stinger
Keine Beschreibung in der Datei gefunden.
- tanstack-stinger
Keine Beschreibung in der Datei gefunden.
- typography-font-stinger
Keine Beschreibung in der Datei gefunden.
- ux-ui-stinger
Keine Beschreibung in der Datei gefunden.
- ux-ui-svelte-stinger
Keine Beschreibung in der Datei gefunden.
- vue-stinger
Keine Beschreibung in der Datei gefunden.
- web-stack-selection-stinger
Keine Beschreibung in der Datei gefunden.
+2
Verwendung von web-development-tools in Claude Code
Gib einen Command in einer Claude Code Session ein:
/web-development-tools:build-app-search [product/repository] [outcome and constraints]
/web-development-tools:build-localization [app or feature] [accepted scope] [repository]
/web-development-tools:build-nextjs-app [app or feature] [accepted scope] [repository]Frage nach einem Agent per Name:
@agent-web-development-tools:asset-wasp-drone
@agent-web-development-tools:component-vendoring-wasp-droneSkills benötigen keinen Command. Claude liest sie, wenn deine Anfrage dem entspricht, was sie beschreiben.
Aktualisieren, deaktivieren oder entfernen
- Plugin aktualisieren (shell)
- claude plugin update web-development-tools@wasp-nest
- marketplace aktualisieren
- /plugin marketplace update wasp-nest
- Vorerst deaktivieren
- /plugin disable web-development-tools@wasp-nest
- Entfernen
- /plugin uninstall web-development-tools@wasp-nest
Fragen zum web-development-tools Plugin
Wie installiere ich das web-development-tools Plugin?
Führe in Claude Code /plugin marketplace add legioncodeinc/vibe-coding-tools aus, dann /plugin install web-development-tools@wasp-nest.
Was enthält das web-development-tools Plugin?
web-development-tools bündelt 12 Commands, 30 Agents, 42 Skills.
Welche Commands fügt das web-development-tools Plugin hinzu?
Es fügt /web-development-tools:build-app-search, /web-development-tools:build-localization, /web-development-tools:build-nextjs-app, /web-development-tools:build-nuxt-app, /web-development-tools:build-pwa-app, /web-development-tools:build-quick-website +6 hinzu. Führe sie in Claude Code mit dem Plugin-Präfix aus, zum Beispiel /web-development-tools:build-app-search.
Welche Agents sind bei web-development-tools dabei?
asset-wasp-drone, component-vendoring-wasp-drone, csv-xlsx-import-export-wasp-drone, dark-mode-theming-wasp-drone, design-system-wasp-drone, font-loading-wasp-drone +24. Rufe einen mit @agent-web-development-tools:asset-wasp-drone auf.
Wie aktualisiere oder entferne ich das web-development-tools Plugin?
Aktualisiere es mit claude plugin update web-development-tools@wasp-nest in deiner shell oder über den Installed-Tab von /plugin. Entferne es mit /plugin uninstall web-development-tools@wasp-nest.
Unter welcher Lizenz steht das web-development-tools Plugin?
AGPL-3.0-or-later, wie im Manifest des Plugins angegeben.