القائمة
Guides the agent to create professional public websites with React/MUI served from the project's /web subdirectory with hot-reloadable API endpoints
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | public-website |
| description | Guides the agent to create professional public websites with React/MUI served from the project's /web subdirectory with hot-reloadable API endpoints |
This skill enables you to create professional, publicly accessible websites for projects. Websites are served from the project's /web subdirectory and are accessible via the webserver.
Use this skill when the user asks you to:
/web/<project>/index.html, /web/<project>/about.html/web/<project>/css/styles.css, /web/<project>/js/app.js/web/<project>/api/<endpoint-name>workspace/<project>/
├── web/ # Static website content (HTML, CSS, JS, images)
│ ├── index.html # Start document (required)
│ ├── css/
│ │ └── styles.css
│ ├── js/
│ │ └── app.js
│ └── images/
└── api/ # API endpoint Python files (hot-reloadable)
└── <endpoint>.py
Before creating any content, ask the user which language(s) the website should support. The user may want a German website even though the conversation is in English. Supported patterns:
mkdir -p web
mkdir -p web/css
mkdir -p web/js
mkdir -p web/images
mkdir -p api
The start document must be located at web/index.html. Use this template:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Title</title>
<!-- React -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- MUI -->
<script crossorigin src="https://unpkg.com/@mui/material@5/umd/material-ui.production.min.js"></script>
<!-- Roboto Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
<!-- Material Icons Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {
ThemeProvider, createTheme, CssBaseline,
AppBar, Toolbar, Typography, Container, Box, Button, Paper,
IconButton, Grid, Card, CardContent, CardActions
} = MaterialUI;
const theme = createTheme();
function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{/* Your app content here */}
</ThemeProvider>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
</html>
In the App Bar include our company name "Music Parts GmbH"
API endpoint files go in the api/ directory. Each Python file becomes an endpoint automatically. The server hot-reloads when files change.
File naming: api/<endpoint-name>.py maps to URL /web/<project>/api/<endpoint-name>
# api/contact.py
import json
import os
DATA_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), ".."))
def get(request=None):
"""Return existing submissions."""
filepath = os.path.join(DATA_DIR, "data", "submissions.json")
if not os.path.exists(filepath):
return {"submissions": []}
with open(filepath, encoding="utf-8") as f:
return json.load(f)
def post(request):
"""Handle form submission."""
data = request.get_json(silent=True) or {}
filepath = os.path.join(DATA_DIR, "data", "submissions.json")
existing = []
if os.path.exists(filepath):
with open(filepath, encoding="utf-8") as f:
existing = json.load(f).get("submissions", [])
existing.append(data)
os.makedirs(os.path.dirname(filepath), exist_ok=True)
with open(filepath, "w", encoding="utf-8") as f:
json.dump({"submissions": existing}, f, indent=2, ensure_ascii=False)
return {"success": True, "message": "Submission received"}
SUPPORTED_METHODS = ["GET", "POST"]
def handle(request):
if request.method == "GET":
return {"status": "ok"}
elif request.method == "POST":
data = request.get_json(silent=True) or {}
return {"received": data}
Use fetch() with server-relative URLs. Replace <project> with the actual project name.
// GET request
const response = await fetch('/web/<project>/api/contact');
const data = await response.json();
// POST request
const response = await fetch('/web/<project>/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'John', message: 'Hello' })
});
/web/<project>/page.html#/page) or manage state in ReactAPI endpoints can read and write data in the project directory. Common patterns:
data/submissions.jsondata/feedback.jsondata/config.jsonThe API has full access to the project directory, enabling:
charset=utf-8 for proper encoding of non-ASCII characters/web/<project>/ in a browserweb/ subdirectory is separate from other project directories like data/, out/, etc.Deterministic communication metrics for the mirrored Teams channels. Computes reply-latency distributions, after-hours share, burst/fragmentation index, unanswered blockers, and interruption-cascade depth from data/teams/*/messages.jsonl, and refreshes the hyperscreen dashboard data. Use before making ANY quantitative claim about team communication.
Generate an interactive "application simulator" — a tiny, agent-built React mock of an external app (SAP MD04, a CRM, an ERP form) that the trainee can click through. The trainee's clicks stream back to you via viewerState so you can coach in real time. Each simulator is a single self-contained HTML file under `out/simulators/<app>.simulator.html`. Use this skill when the expert asks for a simulator (often in the context of curriculum topic 4 "Werkzeuge") or when a guest asks "can I practice this somewhere?".
Co-author a new roleplay scenario with an expert. Interview the expert about the persona, topic, hints with point values, and evaluation criteria, draft the JSON, and on confirmation write it to roleplay/<slug>.roleplay.json. Use when the expert invokes "Author a roleplay scenario" from the menu, asks "let me add a customer call to practice", "I want to script a difficult buyer", or equivalent. The scenarios authored here are consumed at runtime by the roleplay-engine skill.
Maintains a project knowledge wiki at wiki/ as the agent's long-term memory, dynamically structured around the mission in wiki/_meta/mission.md. Use whenever the user shares a fact, decision, preference, requirement, or finding worth remembering; whenever the user says "remember this", "add to wiki", "we decided", "save", "note that", or "for the record"; whenever the user asks "what do we know about X", "have we considered Y", "what did we decide", "summarize what we have"; whenever a file in the project codebase contains information relevant to the mission and should be ingested; at the end of a session to consolidate findings; and at session start to load relevant context. Reads index first, deduplicates before writing, tracks provenance, appends history rather than overwriting, and creates stubs for mentioned-but-unresearched topics. Pure markdown, no embeddings, no external network.
Engineering Design Support System. Use this skill whenever the user is doing long-horizon product/engineering design and wants to capture intent, decisions, risks, assumptions, evidence, open questions, or hypotheses; whenever they say 'add a decision', 'propose a hypothesis', 'what did we rule out', 'what changed', 'generate a status report', 'show whitespots', 'sharpen this', 'mission', 'realign', or ask what the project knows; at session start to load mission + state; and as the curator/researcher/synthesizer/critic loops. The mission is the versioned north star; the RDF knowledge graph is the system of record for a typed dependency graph (Concept/Decision/Risk/Assumption/Evidence/OpenQuestion/Gap/Whitespot/Hypothesis/Test); the scrapbook is a projected view; the wiki is synthesized prose; hypotheses run as stateful workflows. Pull-only: never push to the engineer except a critic mission-contradiction.
Use this skill whenever the user wants to take structured notes, collect ideas, organize project requirements, or manage a project notebook — trigger on phrases like 'scrapbook', 'add a note', 'what have we captured', 'notebook', 'show my notes', 'what should I focus on', 'jot this down', or any request to review, prioritize, or organize project items. Reads and writes to the project scrapbook via MCP tools, presenting content as a structured hierarchy with priorities and focus levels.