An advanced AI skill that transforms brand assets, PDFs, and logos into high-performance React institutional websites using Vite and Tailwind CSS 4.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install institucional-creator
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install institucional-creator using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Institutional Site Builder?
The Institutional Site Builder is a specialized tool within the Openclaw Skills ecosystem designed to bridge the gap between raw brand materials and production-ready web code. It analyzes client-provided assets—including logos, color palettes, and presentation decks—to automatically architect a professional web presence. Built on a modern tech stack featuring React 19, TypeScript, and Tailwind CSS 4, this skill ensures that every landing page or one-pager is optimized for performance and visual fidelity.
By leveraging Openclaw Skills, developers and agencies can drastically reduce the time spent on boilerplate setup and asset organization. The skill doesn't just generate code; it extracts the brand's essence from provided materials to create a cohesive digital identity, complete with smooth Framer Motion animations and responsive layouts tailored for B2B or consumer-facing products.
Institutional Site Builder Use Cases
- Rapidly converting a corporate PDF presentation or pitch deck into a fully functional institutional landing page.
- Generating a high-performance one-pager for a product launch using only a logo and a brief visual identity guide.
- Automating the setup of a React 19 and Tailwind CSS 4 environment with pre-configured animation hooks.
- Migrating brand assets from disorganized folders into a structured web project with optimized WebP images and localized SEO meta tags.
How Institutional Site Builder Works
- Inventory and Exploration: The skill scans the user's directory to categorize logos, identity guidelines, and content from PDFs or presentations.
- Strategic Planning: It prompts the user to define the site's language, desired sections (Hero, Features, Social Proof, etc.), and visual style (Dark vs. Light).
- Environment Initialization: It executes a CLI-based setup of Vite, React, and Tailwind CSS 4, configuring the theme based on extracted brand colors.
- Component Construction: The skill builds the site using a library of over 30 advanced UI components, ensuring accessibility and mobile responsiveness.
- Performance Optimization: It runs mandatory optimization routines, including WebP image conversion and eliminating render-blocking resources.
- Production Delivery: The final output is a build-ready project folder delivered with clear instructions for local development and deployment within the Openclaw Skills workflow.
Institutional Site Builder Setup
To initiate a project using this skill for Openclaw Skills, ensure you have a folder with your brand materials and run the following commands to initialize the React environment:
npm create vite@latest project-name -- --template react-ts
cd project-name
npm install
npm install -D tailwindcss @tailwindcss/vite --legacy-peer-deps
npm install framer-motion lucide-react
The skill will then automatically configure your vite.config.ts and src/index.css with the client's specific design tokens.
Institutional Site Builder Data Schema & Taxonomy
The skill organizes project data based on a specific taxonomy to ensure consistency across Openclaw Skills projects:
| Directory | Asset Type | Description |
|---|---|---|
/logos |
SVG/PNG | Used for Navbar, Footer, and Favicons. |
/identidade-visual |
Hex/Typography | Configures the CSS @theme and global variables. |
/imagens |
Photos/Mockups | Optimized and used in feature sections and hero backgrounds. |
/apresentacoes |
PDF/PPT | Sources for copy, headlines, and section structure. |
/clientes |
SVGs | Used for InfiniteSlider logo clouds and social proof. |
Institutional Site Builder Advanced Features
- Direct integration with the 21st.dev component library for advanced UI patterns like Starfall portfolios and parallax features.
- Automated image processing scripts that convert high-resolution assets to optimized WebP formats.
- Dynamic theme generation that maps extracted brand colors to Tailwind CSS 4 utility classes.
- Built-in SEO and accessibility audit phase that enforces heading hierarchy and meta-tag optimization.
- Support for complex 3D backgrounds using Three.js and shader-based animations.
SKILL.md
Loading
Related Openclaw Skills
Agent Browser
Agent Browser is a high-performance Rust-based headless browser CLI designed to empower AI agents with seamless web navigation and interaction capabilities.
Swift Code Review
A specialized AI skill for auditing Swift codebases for concurrency safety, memory management, and modern language best practices.
QRClaw
QRClaw is an open-source edge service that generates terminal-friendly UTF-8 QR codes and shareable smart links for AI agents and CLI tools.
Provably Fair RNG
A cryptographically verifiable random number generator with on-chain seed anchoring for transparent AI gaming and entertainment.
Amazon Review Management
An intelligent AI agent dedicated to managing Amazon product reviews, professional responses, and compliant rating growth strategies.
LLM Testing Skill
A comprehensive suite of security prompts and wordlists designed to evaluate the safety, robustness, and ethical alignment of Large Language Models.
Featured*
