web-development-tools プラグイン
Build web interfaces and sites with React, Svelte, design systems and accessible components.
web-development-tools プラグインのインストール方法
両方のコマンドを Claude Code 内で実行してください。最初のコマンドで marketplace を一度追加し、2 番目のコマンドでプラグインをインストールします。
/plugin marketplace add legioncodeinc/vibe-coding-tools
/plugin install web-development-tools@wasp-nestweb-development-tools の内容
プラグイン自身のファイルから読み込まれた 84 個のパーツ です。
コマンド 12
/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.
Agent 30
@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
SKILL 42
タスクが一致したときに Claude が読み込みます- asset-stinger
ファイルに説明がありません。
- component-vendoring-stinger
ファイルに説明がありません。
- csv-xlsx-import-export-stinger
ファイルに説明がありません。
- dark-mode-theming-stinger
ファイルに説明がありません。
- design-system-stinger
ファイルに説明がありません。
- font-loading-stinger
ファイルに説明がありません。
- icon-system-stinger
ファイルに説明がありません。
- image-optimization-stinger
ファイルに説明がありません。
- impeccable-stinger
ファイルに説明がありません。
- localization-stinger
ファイルに説明がありません。
- modal-toast-dialog-stinger
ファイルに説明がありません。
- nextjs-stinger
ファイルに説明がありません。
- nuxt-stinger
ファイルに説明がありません。
- preact-stinger
ファイルに説明がありません。
- product-tour-onboarding-ui-stinger
ファイルに説明がありません。
- pwa-stinger
ファイルに説明がありません。
- react-stinger
ファイルに説明がありません。
- react-to-svelte-stinger
ファイルに説明がありません。
- seo-aeo-stinger
ファイルに説明がありません。
- shadcn-svelte-stinger
ファイルに説明がありません。
- source-command-build-app-search
ファイルに説明がありません。
- source-command-build-localization
ファイルに説明がありません。
- source-command-build-nextjs-app
ファイルに説明がありません。
- source-command-build-nuxt-app
ファイルに説明がありません。
- source-command-build-pwa-app
ファイルに説明がありません。
- source-command-build-quick-website
ファイルに説明がありません。
- source-command-build-saas-foundation
ファイルに説明がありません。
- source-command-build-vue-app
ファイルに説明がありません。
- source-command-build-web-app
ファイルに説明がありません。
- source-command-choose-web-stack
ファイルに説明がありません。
- source-command-qualify-typography
ファイルに説明がありません。
- source-command-vendor-component
ファイルに説明がありません。
- svelte-stinger
ファイルに説明がありません。
- tailwind-stinger
ファイルに説明がありません。
- tanstack-stinger
ファイルに説明がありません。
- typography-font-stinger
ファイルに説明がありません。
- ux-ui-stinger
ファイルに説明がありません。
- ux-ui-svelte-stinger
ファイルに説明がありません。
- vue-stinger
ファイルに説明がありません。
- web-stack-selection-stinger
ファイルに説明がありません。
+2
Claude Code での web-development-tools の使用方法
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]Agent を名前で指定してください:
@agent-web-development-tools:asset-wasp-drone
@agent-web-development-tools:component-vendoring-wasp-droneSKILL にコマンドは不要です。リクエストが説明と一致したときに Claude が読み込みます。
更新、オフ、または削除
- プラグインを更新 (shell)
- claude plugin update web-development-tools@wasp-nest
- marketplace を更新
- /plugin marketplace update wasp-nest
- 一時的にオフにする
- /plugin disable web-development-tools@wasp-nest
- 削除する
- /plugin uninstall web-development-tools@wasp-nest
web-development-tools プラグインに関する質問
web-development-tools プラグインをインストールするにはどうすればよいですか。
Claude Code で /plugin marketplace add legioncodeinc/vibe-coding-tools を実行し、続いて /plugin install web-development-tools@wasp-nest を実行します。
web-development-tools プラグインには何が含まれていますか。
web-development-tools には 12 件のコマンド, 30 件のエージェント, 42 件のスキル が含まれています。
web-development-tools プラグインにはどのようなコマンドが追加されますか?
/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 が追加されます。Claude Code でプラグインのプレフィックスを使用して、例えば /web-development-tools:build-app-search のように実行してください。
web-development-tools にはどの Agent が含まれていますか?
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 です。@agent-web-development-tools:asset-wasp-drone で呼び出せます。
web-development-tools プラグインを更新または削除するにはどうすればよいですか?
shell で claude plugin update web-development-tools@wasp-nest を使用して更新するか、/plugin の Installed タブから行ってください。削除するには /plugin uninstall web-development-tools@wasp-nest を使用してください。
web-development-tools プラグインのライセンスは何ですか?
プラグインのマニフェストに記載されている AGPL-3.0-or-later です。