91zgaoge/web-artifacts-builder
internal/skills/defaults/web-artifacts-builder/SKILL.md
Build interactive web artifacts — single-file HTML/CSS/JS apps, data visualizations, dashboards, games, and interactive demos. Use when asked to create something visual and interactive that runs in a browser.
development
Updated Mar 25, 2026
$ install --global
skillsauthnpx skillsauth add 91zgaoge/memoh-x web-artifacts-builderInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Error
VirusTotalMulti-engine malware detection
70%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 25, 2026, 7:59 PM45.6s1 file scanned
SKILL.md
- name:
- web-artifacts-builder
- description:
- Build interactive web artifacts — single-file HTML/CSS/JS apps, data visualizations, dashboards, games, and interactive demos. Use when asked to create something visual and interactive that runs in a browser.
Web Artifacts Builder
Create self-contained, interactive web artifacts delivered as single HTML files.
Output Format
Always produce a single index.html file saved to /data/ that includes all CSS and JS inline. The file must work without any server or build step.
<!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>
<style>
/* All CSS inline */
</style>
</head>
<body>
<!-- Content -->
<script>
// All JS inline
</script>
</body>
</html>
Common Artifact Types
Data visualization
Use Chart.js (CDN) for charts. Load data inline as JS arrays.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Interactive dashboard
Tailwind CSS (CDN) for rapid layout:
<script src="https://cdn.tailwindcss.com"></script>
Simple game / simulation
Vanilla JS + Canvas API. No dependencies needed.
Form / calculator
HTML form elements + JS event listeners. Validate client-side.
Guidelines
- Mobile-first: Use responsive design (flexbox/grid)
- Dark/light: Default to a clean light theme unless asked otherwise
- Performance: Inline small images as base64; link CDN assets for large libraries
- Accessibility: Semantic HTML, ARIA labels on interactive elements
- Save path:
/data/artifact-name.htmlor/data/index.html
Workflow
- Understand the desired output with an example or mockup description
- Choose the minimal set of libraries needed
- Build the full HTML in one file
- Write to
/data/using thewritetool - Confirm the file path so the user can open it
Related Skills
91zgaoge/fastapi
development
VerifiedTrustedCommunity
FastAPI best practices and conventions. Use when working with FastAPI APIs and Pydantic models for them. Keeps FastAPI code clean and up to date with the latest features and patterns, updated with new versions. Write new code or refactor and update old code.
SKILL.mdUpdated Mar 25, 2026
91zgaoge/xlsx
development
VerifiedTrustedCommunity
Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. USE THIS SKILL for ALL spreadsheet files including .xls (Excel 97-2003), .xlsx, .xlsm, .csv, .tsv. Use for: (1) Reading or analyzing spreadsheet data, (2) Creating new spreadsheets with formulas and formatting, (3) Modifying existing spreadsheets while preserving formulas, (4) Data analysis and visualization, (5) Recalculating formulas. IMPORTANT: For .xls files (legacy Excel format), you MUST use this skill - do NOT attempt to read them directly as they are binary files.
SKILL.mdUpdated Mar 25, 2026
91zgaoge/internal/skills/defaults/wrenai-query
tools
VerifiedTrustedCommunity
--- name: wrenai-query description: WrenAI natural language to SQL query tool. IMPORTANT: Use exec tool to run the script directly, DO NOT implement the logic yourself. --- # WrenAI Query Tool ## ⚠️ CRITICAL INSTRUCTIONS FOR AI AGENTS **YOU MUST FOLLOW THESE INSTRUCTIONS EXACTLY. DO NOT DEVIATE.** ### When User Asks for Database Query **USE THE EXEC TOOL. RUN THIS EXACT COMMAND:** ```bash sh "/data/.skills/wrenai-query/scripts/wrenai" "user's natural language query here" pg ``` **DO NOT:*
SKILL.mdUpdated Mar 25, 2026
91zgaoge/webapp-testing
tools
VerifiedTrustedCommunity
Automated web application testing using browser automation. Use when asked to test a web app, verify UI behavior, check for regressions, or automate browser interactions such as clicking, form filling, navigation, and screenshot capture.
SKILL.mdUpdated Mar 25, 2026