webdev-readme-static

Guides development of static React 19 and Tailwind 4 web applications on the Manus template.

Updated Aug 28, 2026
One-click install
npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill webdev-readme-static-anderhonorato
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webdev-readme-static
Source: https://github.com/AnderHonorato/Mem-rias-IA---Infinity/tree/main/Manus/Skills/webdev-readme-static
Command: npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill webdev-readme-static-anderhonorato

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building static frontend sites on the Manus web-static template requires knowing its specific conventions: where files live, how to handle images without breaking deployment, which design tokens to preserve, and which common React/Tailwind pitfalls to avoid. This Skill provides the complete development guide so generated projects follow the template's rules from the first line of code. ## Core Features & Use Cases - Template Conventions: Documents the file layout (client/src/pages, components, hooks, index.css design tokens) and customized defaults like the auto-centering .container and transparent outline buttons. - Asset Handling Workflow: Enforces the required manus-upload-file CLI flow for images and media to prevent deployment timeouts caused by local files in client/public/. - Design & Animation Guidance: Provides a design guide for distinctive layouts and an animation guide covering timing, easings, GPU-safe properties, and prefers-reduced-motion support. - Pitfall Prevention: Catalogs common failures such as SVG wave divider bleed-through, text contrast issues, infinite query loops from unstable references, and nested anchor tags. - Use Case: When asked to build a landing page or dashboard, load this Skill to choose a design style, compose pages with shadcn/ui components, integrate Google Maps via the built-in MapView, and pass the launch checklist. ## Quick Start Use the webdev-readme-static guide to build a static React landing page on the Manus web-static template following its design and asset conventions.

Frequently Asked Questions about webdev-readme-static

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

FAQPage Schema
How do I add images to a Manus static web project?▼

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

What stack does the Manus web-static template use?▼

The template uses React 19 with Wouter for client-side routing, Tailwind 4 for styling, and shadcn/ui components. Design tokens live in client/src/index.css, and the server and shared directories are only compatibility placeholders.

Does the 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 does my text become invisible after switching themes?▼

Semantic colors like bg-background resolve from CSS variables tied to the active theme. Ensure defaultTheme in App.tsx matches the corresponding block in index.css, and always pair bg-{semantic} with text-{semantic}-foreground classes.

Why do my queries refetch infinitely in React?▼

Creating new objects or arrays in render produces new references each time, retriggering queries. Stabilize inputs with useState initializers or useMemo so the reference stays constant across renders.