Plugin web-development-tools
Build web interfaces and sites with React, Svelte, design systems and accessible components.
Cara install plugin web-development-tools
Jalankan kedua perintah di dalam Claude Code. Perintah pertama menambahkan marketplace sekali; perintah kedua meng-install plugin.
/plugin marketplace add legioncodeinc/vibe-coding-tools
/plugin install web-development-tools@wasp-nestApa yang ada di dalam web-development-tools
84 bagian dibaca dari file asli plugin tersebut.
Commands 12
Jalankan sebagai /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
Panggil sebagai @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 memuatnya saat tugas sesuai- asset-stinger
Tidak ada deskripsi di dalam file.
- component-vendoring-stinger
Tidak ada deskripsi di dalam file.
- csv-xlsx-import-export-stinger
Tidak ada deskripsi di dalam file.
- dark-mode-theming-stinger
Tidak ada deskripsi di dalam file.
- design-system-stinger
Tidak ada deskripsi di dalam file.
- font-loading-stinger
Tidak ada deskripsi di dalam file.
- icon-system-stinger
Tidak ada deskripsi di dalam file.
- image-optimization-stinger
Tidak ada deskripsi di dalam file.
- impeccable-stinger
Tidak ada deskripsi di dalam file.
- localization-stinger
Tidak ada deskripsi di dalam file.
- modal-toast-dialog-stinger
Tidak ada deskripsi di dalam file.
- nextjs-stinger
Tidak ada deskripsi di dalam file.
- nuxt-stinger
Tidak ada deskripsi di dalam file.
- preact-stinger
Tidak ada deskripsi di dalam file.
- product-tour-onboarding-ui-stinger
Tidak ada deskripsi di dalam file.
- pwa-stinger
Tidak ada deskripsi di dalam file.
- react-stinger
Tidak ada deskripsi di dalam file.
- react-to-svelte-stinger
Tidak ada deskripsi di dalam file.
- seo-aeo-stinger
Tidak ada deskripsi di dalam file.
- shadcn-svelte-stinger
Tidak ada deskripsi di dalam file.
- source-command-build-app-search
Tidak ada deskripsi di dalam file.
- source-command-build-localization
Tidak ada deskripsi di dalam file.
- source-command-build-nextjs-app
Tidak ada deskripsi di dalam file.
- source-command-build-nuxt-app
Tidak ada deskripsi di dalam file.
- source-command-build-pwa-app
Tidak ada deskripsi di dalam file.
- source-command-build-quick-website
Tidak ada deskripsi di dalam file.
- source-command-build-saas-foundation
Tidak ada deskripsi di dalam file.
- source-command-build-vue-app
Tidak ada deskripsi di dalam file.
- source-command-build-web-app
Tidak ada deskripsi di dalam file.
- source-command-choose-web-stack
Tidak ada deskripsi di dalam file.
- source-command-qualify-typography
Tidak ada deskripsi di dalam file.
- source-command-vendor-component
Tidak ada deskripsi di dalam file.
- svelte-stinger
Tidak ada deskripsi di dalam file.
- tailwind-stinger
Tidak ada deskripsi di dalam file.
- tanstack-stinger
Tidak ada deskripsi di dalam file.
- typography-font-stinger
Tidak ada deskripsi di dalam file.
- ux-ui-stinger
Tidak ada deskripsi di dalam file.
- ux-ui-svelte-stinger
Tidak ada deskripsi di dalam file.
- vue-stinger
Tidak ada deskripsi di dalam file.
- web-stack-selection-stinger
Tidak ada deskripsi di dalam file.
+2
Menggunakan web-development-tools di Claude Code
Ketik command di sesi 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]Minta agent berdasarkan nama:
@agent-web-development-tools:asset-wasp-drone
@agent-web-development-tools:component-vendoring-wasp-droneSKILL tidak memerlukan command. Claude membacanya saat permintaan Anda sesuai dengan deskripsinya.
Update, matikan, atau hapus
- Update plugin (shell)
- claude plugin update web-development-tools@wasp-nest
- Refresh marketplace
- /plugin marketplace update wasp-nest
- Matikan untuk sementara
- /plugin disable web-development-tools@wasp-nest
- Hapus
- /plugin uninstall web-development-tools@wasp-nest
Pertanyaan tentang plugin web-development-tools
Bagaimana cara install plugin web-development-tools?
Di Claude Code, jalankan /plugin marketplace add legioncodeinc/vibe-coding-tools, lalu /plugin install web-development-tools@wasp-nest.
Apa saja yang disertakan plugin web-development-tools?
web-development-tools membundel 12 command, 30 agent, 42 skill.
Command apa saja yang ditambahkan oleh plugin web-development-tools?
Plugin ini menambahkan /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. Jalankan di Claude Code dengan prefix plugin, contohnya /web-development-tools:build-app-search.
Agent apa saja yang disertakan dalam 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. Panggil salah satunya dengan @agent-web-development-tools:asset-wasp-drone.
Bagaimana cara update atau menghapus plugin web-development-tools?
Update dengan claude plugin update web-development-tools@wasp-nest di shell Anda, atau dari tab Installed di /plugin. Hapus dengan /plugin uninstall web-development-tools@wasp-nest.
Apa lisensi untuk plugin web-development-tools?
AGPL-3.0-or-later, sebagaimana dinyatakan dalam manifest plugin.