--- title: "web-development-tools" description: "Build web interfaces and sites with React, Svelte, design systems and accessible components." canonical: https://agentpluginsdirectory.com/plugins/web-development-tools last-updated: 2026-10-21 --- # web-development-tools Build web interfaces and sites with React, Svelte, design systems and accessible components. - Slug: web-development-tools - Publisher: Legion Code Inc. - Repository: https://github.com/legioncodeinc/vibe-coding-tools - Manifest: plugins/web-development-tools/plugin.json - Version: 3.0.1 - License: AGPL-3.0-or-later - Category (editorial): other - Skills: 42 (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, website-stinger, xyflow-stinger) - MCP servers: 0 - Stars: 94 - Repository created: 2026-05-23 - Repository last pushed: 2026-10-18 - Publisher type: Organization - Listing: https://agentpluginsdirectory.com/plugins/web-development-tools - Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json ## What web-development-tools does, in the publisher's words Build web interfaces and sites with React, Svelte, design systems and accessible components. Keep the interface workflow together, with stack routing inside the pack. A developer chooses one coherent web pack instead of many tiny UI packages. Requires wasp-nest-core. - full website with data/auth/payments also needs data-and-ai-tools, platform-and-release-tools. - build-quick-website-browser also needs browser-and-app-testing-tools. - build-web-app-data also needs data-and-ai-tools. - build-web-app-platform also needs platform-and-release-tools. - build-saas-foundation-data also needs data-and-ai-tools. - build-saas-foundation-platform also needs platform-and-release-tools. From the project README, punctuation lightly normalized. Full text: https://raw.githubusercontent.com/legioncodeinc/vibe-coding-tools/HEAD/plugins/web-development-tools/README.md ## Skills - 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 - 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 - website-stinger - xyflow-stinger Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized.