메뉴
Guide how to build modern web applications for agents and workflows. Use this skill when user asks to create a web app, UI, dashboard, frontend, or page for their agents or workflows.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Comprehensive Mastra framework guide. Teaches how to find current documentation, verify API signatures, and build agents and workflows. Covers documentation lookup strategies (embedded docs, remote docs), core concepts (agents vs workflows, tools, memory, RAG), TypeScript requirements, and common patterns. Use this skill for all Mastra development to ensure you're using current APIs from the installed version or latest documentation.
Mastra agent channels (Slack, Discord, Telegram, etc.) via Chat SDK adapters. In this project, wrap agent tools with createAgentTools() and channel config with createAgentChannels() from ../shmastra; register agents on Mastra with storage for channel state.
| name | apps |
| description | Guide how to build modern web applications for agents and workflows. Use this skill when user asks to create a web app, UI, dashboard, frontend, or page for their agents or workflows. |
Create lightweight web applications for Mastra agents and workflows. No build step required — apps run directly in the browser using ES modules, import maps, Preact, Tailwind CSS, and DaisyUI.
IMPORTANT: only create a web app when the user explicitly asks for one (e.g. "make a dashboard", "create a UI"). If the user asks to enhance an agent's output (e.g. charts, rich responses), use a tool that generates an HTML file and returns its URL instead — that does not require a full web app.
Each app is a folder inside src/mastra/public/apps/:
src/mastra/public/apps/my-app/
index.html # Entry point with import map, Tailwind, DaisyUI
app.js # Root Preact component
components/
header.js # UI components as separate ES modules
dashboard.js
...
Apps are served at /apps/my-app. All relative imports resolve correctly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App Title</title>
<!-- System theme detection -->
<script src="/shmastra/public/apps/script/theme.js"></script>
<!-- Tailwind CSS + DaisyUI -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" />
<!-- Import Map for Preact -->
<script type="importmap">
{
"imports": {
"preact": "https://esm.sh/preact@10",
"preact/": "https://esm.sh/preact@10/",
"preact/hooks": "https://esm.sh/preact@10/hooks",
"htm/preact": "https://esm.sh/htm@3/preact",
"lucide": "https://unpkg.com/lucide@latest/dist/esm/lucide.js"
}
}
</script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/apps/my-app/app.js"></script>
</body>
</html>
Use htm tagged templates instead of JSX (no build step needed):
// app.js
import { html, render } from 'htm/preact';
import { useState } from 'preact/hooks';
import { Counter } from './components/counter.js';
function App() {
return html`
<div class="min-h-screen bg-base-200">
<main class="container mx-auto p-4">
<${Counter} />
</main>
</div>
`;
}
render(html`<${App} />`, document.getElementById('app'));
// components/counter.js
import { html } from 'htm/preact';
import { useState } from 'preact/hooks';
export function Counter() {
const [count, setCount] = useState(0);
return html`
<div class="card bg-base-100 shadow-xl p-6">
<h2 class="text-2xl font-bold mb-4">Count: ${count}</h2>
<button class="btn btn-primary" onClick=${() => setCount(count + 1)}>
Increment
</button>
</div>
`;
}
Add any ESM-compatible library to the import map. Use esm.sh to load npm packages as ES modules:
{
"imports": {
"chart.js": "https://esm.sh/chart.js@4",
"chart.js/auto": "https://esm.sh/chart.js@4/auto",
"marked": "https://esm.sh/marked@12"
}
}
If the app needs a custom backend endpoint (e.g. aggregation, DB query, proxy), create a route in src/mastra/routes/ and register it in src/mastra/routes/index.ts:
IMPORTANT: use custom routes if your app really requires it. Always prefer calling workflows and tools directly using mastra client from client.js.
Route paths must use the prefix /shmastra/api/apps/<app-name>/:
// src/mastra/routes/deposits.ts
import { ApiRoute } from '@mastra/core/server';
export const depositsRoute: ApiRoute = {
path: '/shmastra/api/apps/deposits/summary',
method: 'GET',
handler: async (c) => {
// your logic here
return c.json({ total: 42 });
},
};
// src/mastra/routes/index.ts
import { ApiRoute } from '@mastra/core/server';
import { depositsRoute } from './deposits';
export const apiRoutes: ApiRoute[] = [depositsRoute];
In the app, use regular fetch to call custom routes (auth token is injected automatically):
const res = await fetch('/shmastra/api/apps/deposits/summary');
const data = await res.json();
Only create custom routes when the Mastra API (agents, workflows, tools) is not enough. Prefer calling workflows, agents and tools over custom routes.
You can read the current user via getCurrentUserSession() from src/mastra/shmastra:
import { getCurrentUserSession } from '../shmastra';
const user = getCurrentUserSession();
// { userId: string, role: 'owner' | 'guest' } | undefined
Use user.userId whenever app logic needs to bind data to a specific person — per-user records in storage, scoped queries, etc.
/shmastra/api/apps/<app-name>/ prefixsrc/mastra/public/apps/index.html per app — entry point with import map and CDN links.js files for each component — no inline scripts in HTMLhtm tagged templates — never raw JSX (requires transpilation)esm.sh for all npm dependencies via import map./components/foo.js (always include .js extension)When your agent returns a link to the app, use markdown:
Here is your application: [Open Dashboard](/apps/my-app)
The link will open separate browser tab and resolve index.html
After creating or modifying app files, call apply_changes to sync files to the working directory.