一键在 Manus 中运行任何 Skill

web-app-builder

星标2

分支0

更新时间2026年3月21日 21:21

Build modern, high-quality single-page web applications, dashboards, tools, calculators, and interactive prototypes. Use when the user asks to create a web app, dashboard, data visualization, landing page, or any interactive HTML-based output — even if they don't explicitly say "web app."

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

MTPython406

MTPython406/Chitty-Workspace

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Web App Builder

Core Approach

Build self-contained single HTML files with inline CSS and JavaScript. No build tools, no npm, no Node.js required. This matches Chitty's local-first philosophy.

Use CDN imports for libraries when needed:

React 18: https://esm.sh/react@18 + https://esm.sh/react-dom@18
Tailwind CSS: https://cdn.tailwindcss.com
Chart.js: https://cdn.jsdelivr.net/npm/chart.js
D3.js: https://d3js.org/d3.v7.min.js

Design Rules — Avoid AI Slop

Clean, asymmetric, content-first layouts
Dark mode by default (prefers-color-scheme: dark)
System fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
No purple gradients, no excessive rounded corners, no centered-everything
Inspired by Linear, Arc, Stripe — minimal, functional, premium
Subtle shadows and borders, not heavy box-shadows
Responsive: works on desktop and mobile

Workflow

Clarify requirements with the user (what data, what interactions)
Create the HTML file using file_writer
Wrap the complete output in an artifact tag for preview:

<artifact type="html" title="App Name Here">
<!DOCTYPE html>
<html lang="en">
...complete self-contained HTML...
</html>
</artifact>

If the user requests changes, produce an updated artifact with the same title

Gotchas

Chitty runs primarily on Windows — avoid bash-only scripts in artifacts
Keep everything in a single HTML file when possible (easier to iterate)
CDN imports require internet access — mention this if relevant
Use <script type="module"> for modern JS features
Test dark/light mode by toggling prefers-color-scheme
For charts: Chart.js is simpler than D3 for standard charts; use D3 for custom visualizations

Output Format

Always wrap significant web outputs in artifact tags:

<artifact type="html" title="Descriptive Name">
...complete HTML...
</artifact>

For code snippets that aren't full applications, use regular code blocks instead.

同仓库更多 Skills

同仓库

google-calendar

MTPython406/Chitty-Workspace

Full Google Calendar management — list events, create, update, delete, and find free/busy times across multiple calendars. Use when the user asks about their schedule, availability, scheduling meetings, rescheduling, cancelling events, or checking free time slots.

2026-04-032

google-gmail

MTPython406/Chitty-Workspace

Read, search, and send emails from Gmail. Use when the user asks about email, inbox management, sending messages, searching mail, or reading email threads.

2026-03-252

google-cloud

MTPython406/Chitty-Workspace

Query BigQuery datasets and manage Google Cloud Storage buckets. Use when the user asks about BigQuery, SQL queries on cloud data, GCS buckets, or Google Cloud Platform resources.

2026-03-242

chitty-orchestrator

MTPython406/Chitty-Workspace

System orchestrator — coordinates package agents, handles system tasks directly with native tools

2026-03-242

slack

MTPython406/Chitty-Workspace

Send messages, read channel history, and reply to threads in Slack. Use when the user asks about Slack messaging, channel management, posting updates, summarizing conversations, or monitoring Slack activity.

2026-03-222

project-scanner

MTPython406/Chitty-Workspace

Scan a project directory and generate or update a chitty.md project context file. Use when the user asks to scan a project, generate project context, create a chitty.md, or when starting work in an unfamiliar codebase.

2026-03-212

name	web-app-builder
description	Build modern, high-quality single-page web applications, dashboards, tools, calculators, and interactive prototypes. Use when the user asks to create a web app, dashboard, data visualization, landing page, or any interactive HTML-based output — even if they don't explicitly say "web app."
allowed-tools	file_writer file_reader terminal browser

Web App Builder

Core Approach

Build self-contained single HTML files with inline CSS and JavaScript. No build tools, no npm, no Node.js required. This matches Chitty's local-first philosophy.

Use CDN imports for libraries when needed:

React 18: https://esm.sh/react@18 + https://esm.sh/react-dom@18
Tailwind CSS: https://cdn.tailwindcss.com
Chart.js: https://cdn.jsdelivr.net/npm/chart.js
D3.js: https://d3js.org/d3.v7.min.js

Design Rules — Avoid AI Slop

Clean, asymmetric, content-first layouts
Dark mode by default (prefers-color-scheme: dark)
System fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
No purple gradients, no excessive rounded corners, no centered-everything
Inspired by Linear, Arc, Stripe — minimal, functional, premium
Subtle shadows and borders, not heavy box-shadows
Responsive: works on desktop and mobile

Workflow

Clarify requirements with the user (what data, what interactions)
Create the HTML file using file_writer
Wrap the complete output in an artifact tag for preview:

<artifact type="html" title="App Name Here">
<!DOCTYPE html>
<html lang="en">
...complete self-contained HTML...
</html>
</artifact>

If the user requests changes, produce an updated artifact with the same title

Gotchas

Chitty runs primarily on Windows — avoid bash-only scripts in artifacts
Keep everything in a single HTML file when possible (easier to iterate)
CDN imports require internet access — mention this if relevant
Use <script type="module"> for modern JS features
Test dark/light mode by toggling prefers-color-scheme
For charts: Chart.js is simpler than D3 for standard charts; use D3 for custom visualizations

Output Format

Always wrap significant web outputs in artifact tags:

<artifact type="html" title="Descriptive Name">
...complete HTML...
</artifact>

For code snippets that aren't full applications, use regular code blocks instead.