skills.rest
Military-Veteran-Team-LPT-Realty
Military-Veteran-Team-LPT-RealtyOFFICIAL
Explore all skills by this author →
GitHub

webdev-readme-static

Guides development of static React 19 and Tailwind 4 web applications with shadcn/ui components.

Updated Sep 16, 2026
Search Tags:#frontend#react#tailwind#static site#shadcn#webdev#google maps
One-click install
npx skills add https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills --skill webdev-readme-static-military-veteran-team-lpt-realty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webdev-readme-static
Source: https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills/tree/main/skills/webdev-readme-static
Command: npx skills add https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills --skill webdev-readme-static-military-veteran-team-lpt-realty

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building static frontend sites on the Manus web-static template requires knowing its conventions: where files live, how to handle images without breaking deployments, which design tokens to preserve, and which UI pitfalls to avoid. This Skill provides the complete development guide so generated sites follow the template's rules from the first line of code. ## Core Features & Use Cases - Template Conventions: Documents the React 19 + Tailwind 4 + shadcn/ui stack, file layout under client/src, and customized defaults like the auto-centering container utility. - Asset Handling Workflow: Enforces uploading images via manus-upload-file and referencing returned storage paths instead of local media that causes deployment timeouts. - Design, Animation & Maps Guidance: Provides a design guide, motion timing rules, and full Google Maps integration through the built-in MapView component without API keys. - Use Case: When asked to build a landing page or dashboard on the web-static template, follow this guide to pick a design style, compose pages with shadcn/ui, and avoid pitfalls like invisible text from theme mismatches. ## Quick Start Build a static landing page on the web-static template following the webdev-readme-static guide, choosing a design style first and uploading any images with the CLI.

Frequently Asked Questions about webdev-readme-static

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a static site with React 19 and Tailwind 4?▼

Compose pages in client/src/pages using shadcn/ui components and Tailwind utilities, with Wouter handling client-side routing. Keep design tokens in client/src/index.css intact and choose a design style before writing frontend code.

How do I add images to a static webdev site without deployment timeouts?▼

Upload images with the manus-upload-file CLI command and reference the returned storage path directly in your code. Never store media in client/public or client/src/assets, as local files cause deployment timeouts.

Does the web-static template support Google Maps without an API key?▼

Yes, the Manus proxy provides full access to all Google Maps JavaScript API features automatically. Import MapView from client/src/components/Map.tsx and initialize services like Places or Directions in the onMapReady callback.

Why is text invisible after setting a dark theme in React?▼

Invisible text happens when the ThemeProvider defaultTheme does not match the CSS variables in index.css, or when bg-{semantic} classes lack paired text-{semantic}-foreground classes. Always align the theme setting with the .dark variable block and pair background and foreground classes.

What causes infinite loading loops with TRPC queries in React?▼

Infinite loops occur when new object or array references are created in render and passed as query inputs, triggering refetches every render. Stabilize inputs with useState initializers or useMemo before passing them to useQuery.

Related Skills

Explore More Software Engineering Skills→
aymenhamoudiiaymenhamoudii

teach-impeccable

Extract design tokens and brand assets into .impeccable.md.

Community
Intermediate
mofa-orgmofa-org
11

mofa-publish

Deploy built static sites to GitHub Pages or Mac Mini hosting.

Official
Advanced
openaiopenai
120.5k

imagegen

Generate or edit raster images using built-in tools or a CLI fallback.

Official
Advanced
ratnesh-mauryaratnesh-maurya
1

sveltekit

Build full-stack SvelteKit applications with file-based routing, SSR, API routes, and form actions.

Community
Intermediate