web-development-tools

Plugin web-development-tools from marketplace wasp-nest in legioncodeinc/vibe-coding-tools. Commands read from the repo's manifest — 29 days ago.

Skills (42)

• asset-stinger

  Maintain the Universal Asset Registry. Use to register assets, audit code-to-registry drift, or generate migrations. Read README.md for the guide map.

• component-vendoring-stinger

  Select existing UI components and prepare notice-preserving source-copy plans. Use for component reuse, exact MIT artifact provenance, authorized copies, or local fork updates.

• csv-xlsx-import-export-stinger

  Implement spreadsheet import and export in React. Use for CSV/XLSX parsing, mapping, row validation, streaming, or CSV injection. Read README.md for the guide map.

• dark-mode-theming-stinger

  Audits and implements dark mode for React/Next.js: CSS tokens, next-themes wiring, FOWT prevention, SSR hydration, Tailwind v4 config, multi-brand theming. Use for dark mode setup or flashing bugs.

• design-system-stinger

  Bootstrap a product design system. Use for tokens, utilities, component and screen specs, or static examples. Read README.md for the guide map.

• font-loading-stinger

  Fix web font loading performance. Use for FOIT/FOUT, preload, subsetting, metric-matched fallbacks, or font-swap CLS. Read README.md for the guide map.

• icon-system-stinger

  Design a React icon system. Use for library choice, bundle size, SVG sprites, dynamic icons, or accessibility. Read README.md for the guide map.

• image-optimization-stinger

  Optimize web image delivery. Use for AVIF/WebP, responsive sizes, blur placeholders, Next image config, or image CLS. Read README.md for the guide map.

• impeccable-stinger

  Operate Impeccable for UI design. Use for new surfaces, redesign, polish, design capture, or anti-slop checks. Read README.md for the guide map.

• localization-stinger

  Implement locale routing, message resources, ICU/plurals, Intl formatting and RTL in a selected web framework. Use for localization changes and scoped translation review.

• modal-toast-dialog-stinger

  Build accessible React overlays. Use for dialog, drawer, toast, command menu, focus handling, or stacking. Read README.md for the guide map.

• nextjs-stinger

  Implement Next.js App Router features: server/client boundaries, reads, actions, handlers, private data, cache contracts and build/provider handoffs. Read README.md for guides.

• nuxt-stinger

  Implement Nuxt apps, SSR/data integration, Nitro routes, request state and cache/auth boundaries. Use for accepted Nuxt builds or changes. Read README.md for the guide map.

• preact-stinger

  Build Preact 11 apps and widgets. Use for signals, React compat migration, embeds, Astro islands, or Fresh. Read README.md for the guide map.

• product-tour-onboarding-ui-stinger

  Build in-app tours and onboarding UI. Use for tour tools, tooltips, checklists, segment triggers, or maintenance after UI changes. Read README.md for the guide map.

• pwa-stinger

  Implement browser PWA manifest, service-worker lifecycle and bounded public offline assets. Use for scoped PWA/offline changes. Read README.md for the guide map.

• react-stinger

  Review and refactor React 18/19 architecture. Use for state layers, Server Components, Suspense, Actions, data boundaries, or testing. Read README.md for the guide map.

• react-to-svelte-stinger

  React-to-Svelte 5 porting: hooks-to-runes translation, TanStack Router to SvelteKit, RTK Query and Radix conversion, contract-first port waves. Use when porting React components or dashboards.

• seo-aeo-stinger

  SEO and AEO for SvelteKit (Svelte 5) + Payload CMS + Vercel. Covers metadata, sitemap/robots, JSON-LD, Payload SEO fields, Core Web Vitals, llms.txt/AI citation, E-E-A-T, and indexation playbooks.

• shadcn-svelte-stinger

  The shadcn-svelte library itself for any Svelte project: CLI, copy-in model, anatomy, registry, theming, forms, upgrades. A project's design system or brand contract belongs to ux-ui-svelte-stinger.

• source-command-build-app-search

  Build tenant-safe application search with an accepted query/result contract, stable pagination and measured retrieval quality.

• source-command-build-localization

  Build or extend a localization app using current locale, resource, plural, formatting and RTL boundaries with explicit verification.

• source-command-build-nextjs-app

  Build or extend a Next.js app using current App Router, server/client, data, mutation and cache boundaries with explicit verification.

• source-command-build-nuxt-app

  Build or extend a Nuxt app using current Nuxt routing, SSR, Nitro, data and cache boundaries with explicit verification.

• source-command-build-pwa-app

  Build or extend a PWA app using current public asset, offline fallback, update and private-data boundaries with explicit verification.

• source-command-build-quick-website

  Build a scoped SvelteKit marketing or lead-generation website from a brief, with explicit CMS and integration decisions.

• source-command-build-saas-foundation

  Build a scoped SaaS foundation joining tenant identity, data isolation, billing entitlements and a verified user journey.

• source-command-build-vue-app

  Build or extend a Vue app using current component, state, form, routing and asynchronous boundaries with explicit verification.

• source-command-build-web-app

  Scope and build an authorized web-app slice using an actual supported framework owner and verified boundaries.

• source-command-choose-web-stack

  Recommend one web framework from product, rendering, team and hosting needs, with backend boundaries and owner gaps.

• source-command-qualify-typography

  Qualify a web typography system and font delivery using source inspection and actual browser evidence.

• source-command-vendor-component

  Select and prepare an authorized component vendoring plan with actual artifact provenance, notices, patches and update evidence.

• svelte-stinger

  Svelte 5 specialist for runes, snippets, lifecycle, universal reactivity, SvelteKit 2 load/actions/remote functions, and Svelte 4 migration. Use for any .svelte, .svelte.js, or .svelte.ts work.

• tailwind-stinger

  Tailwind CSS v4 the framework itself, CSS-first config, @theme, the Vite plugin, v3-to-v4 migration, dark mode, container queries, class ordering. Generic, any codebase, not OSPRY-specific.

• tanstack-stinger

  TanStack libraries in SvelteKit (Svelte 5) - Query SSR/caching/mutations, Table runes state, Form snippet validation, Virtual; states plainly that Router and Start have no official Svelte support.

• typography-font-stinger

  Build a web typography system. Use for variable fonts, font loading, fluid scales, vertical rhythm, or type tokens. Read README.md for the guide map.

• ux-ui-stinger

  Enforce an existing design system. Use for component specs, token drift, library wrappers, motion rulings, or visual deltas. Read README.md for the guide map.

• ux-ui-svelte-stinger

  Enforce and implement a SvelteKit UI standard: shadcn-svelte, Tailwind v4 token bridge, brand theming, markup styling. OSPRY's ADR-007 is the worked example. Read README.md for the guide map.

• vue-stinger
• web-stack-selection-stinger
• website-stinger
• xyflow-stinger

Slash commands (12)

• /web-development-tools:build-app-search

  Build tenant-safe application search with an accepted query/result contract, stable pagination and measured retrieval quality.

• /web-development-tools:build-localization

  Build or extend a localization app using current locale, resource, plural, formatting and RTL boundaries with explicit verification.

• /web-development-tools:build-nextjs-app

  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

  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

  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

  Build a scoped SaaS foundation joining tenant identity, data isolation, billing entitlements and a verified user journey.

• /web-development-tools:build-vue-app

  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

  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

  Select and prepare an authorized component vendoring plan with actual artifact provenance, notices, patches and update evidence.

Subagents (30)

• 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

• component-vendoring-wasp-drone

  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.

• 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)

• 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

• 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

• 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

• 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

• 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),

• 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

• localization-wasp-drone

  Implement locale routing, resources, ICU/plurals, Intl formatting and RTL in the selected web framework. Use for localization and scoped translation review.

• 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

• nextjs-wasp-drone

  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.

• nuxt-wasp-drone

  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.

• 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

• 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

• pwa-wasp-drone

  Implement scoped browser PWA manifest, service-worker lifecycle and public offline assets. Preserve private-request bypass, accepted sync/auth contracts and actual browser proof.

• react-to-svelte-wasp-drone

  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.

• 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

• 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

• 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

• 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

• 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 \

• 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

• 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

• 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

• 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

• vue-wasp-drone

  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.

• web-stack-selection-wasp-drone

  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.

• 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,

• xyflow-wasp-drone

  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

Similar plugins