Plugin web-development-tools
Build web interfaces and sites with React, Svelte, design systems and accessible components.
Comment installer le plugin web-development-tools
Exécutez les deux commandes dans Claude Code. La première ajoute la marketplace une seule fois ; la seconde installe le plugin.
/plugin marketplace add legioncodeinc/vibe-coding-tools
/plugin install web-development-tools@wasp-nestContenu de web-development-tools
84 parties lues depuis les fichiers du plugin.
Commandes 12
Exécuter via /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
Appeler via @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 le charge quand la tâche correspond- asset-stinger
Aucune description dans le fichier.
- component-vendoring-stinger
Aucune description dans le fichier.
- csv-xlsx-import-export-stinger
Aucune description dans le fichier.
- dark-mode-theming-stinger
Aucune description dans le fichier.
- design-system-stinger
Aucune description dans le fichier.
- font-loading-stinger
Aucune description dans le fichier.
- icon-system-stinger
Aucune description dans le fichier.
- image-optimization-stinger
Aucune description dans le fichier.
- impeccable-stinger
Aucune description dans le fichier.
- localization-stinger
Aucune description dans le fichier.
- modal-toast-dialog-stinger
Aucune description dans le fichier.
- nextjs-stinger
Aucune description dans le fichier.
- nuxt-stinger
Aucune description dans le fichier.
- preact-stinger
Aucune description dans le fichier.
- product-tour-onboarding-ui-stinger
Aucune description dans le fichier.
- pwa-stinger
Aucune description dans le fichier.
- react-stinger
Aucune description dans le fichier.
- react-to-svelte-stinger
Aucune description dans le fichier.
- seo-aeo-stinger
Aucune description dans le fichier.
- shadcn-svelte-stinger
Aucune description dans le fichier.
- source-command-build-app-search
Aucune description dans le fichier.
- source-command-build-localization
Aucune description dans le fichier.
- source-command-build-nextjs-app
Aucune description dans le fichier.
- source-command-build-nuxt-app
Aucune description dans le fichier.
- source-command-build-pwa-app
Aucune description dans le fichier.
- source-command-build-quick-website
Aucune description dans le fichier.
- source-command-build-saas-foundation
Aucune description dans le fichier.
- source-command-build-vue-app
Aucune description dans le fichier.
- source-command-build-web-app
Aucune description dans le fichier.
- source-command-choose-web-stack
Aucune description dans le fichier.
- source-command-qualify-typography
Aucune description dans le fichier.
- source-command-vendor-component
Aucune description dans le fichier.
- svelte-stinger
Aucune description dans le fichier.
- tailwind-stinger
Aucune description dans le fichier.
- tanstack-stinger
Aucune description dans le fichier.
- typography-font-stinger
Aucune description dans le fichier.
- ux-ui-stinger
Aucune description dans le fichier.
- ux-ui-svelte-stinger
Aucune description dans le fichier.
- vue-stinger
Aucune description dans le fichier.
- web-stack-selection-stinger
Aucune description dans le fichier.
+2
Utiliser web-development-tools dans Claude Code
Tapez une commande dans une session Claude Code :
/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]Demandez un agent par son nom :
@agent-web-development-tools:asset-wasp-drone
@agent-web-development-tools:component-vendoring-wasp-droneLes Skills ne nécessitent pas de commande. Claude les lit quand votre requête correspond à leur description.
Mettre à jour, désactiver ou supprimer
- Mettre à jour le plugin (shell)
- claude plugin update web-development-tools@wasp-nest
- Actualiser le marketplace
- /plugin marketplace update wasp-nest
- Le désactiver pour le moment
- /plugin disable web-development-tools@wasp-nest
- Le supprimer
- /plugin uninstall web-development-tools@wasp-nest
Questions sur le plugin web-development-tools
Comment installer le plugin web-development-tools ?
Dans Claude Code, exécutez /plugin marketplace add legioncodeinc/vibe-coding-tools, puis /plugin install web-development-tools@wasp-nest.
Que contient le plugin web-development-tools ?
web-development-tools regroupe 12 commandes, 30 agents, 42 skills.
Quelles commandes le plugin web-development-tools ajoute-t-il ?
Il ajoute /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. Exécutez-les dans Claude Code avec le préfixe du plugin, par exemple /web-development-tools:build-app-search.
Quels agents sont inclus avec web-development-tools ?
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. Appelez-en un avec @agent-web-development-tools:asset-wasp-drone.
Comment mettre à jour ou supprimer le plugin web-development-tools ?
Mettez-le à jour avec claude plugin update web-development-tools@wasp-nest dans votre shell, ou depuis l'onglet Installed de /plugin. Supprimez-le avec /plugin uninstall web-development-tools@wasp-nest.
Sous quelle licence est le plugin web-development-tools ?
AGPL-3.0-or-later, comme indiqué dans le manifeste du plugin.