From maycrest-automate
Suite of tools for creating elaborate, multi-component HTML artifacts using modern frontend web technologies. Trigger when user wants interactive HTML pages, prototypes, visualizations, dashboards, calculators, or self-contained web tools.
npx claudepluginhub coreymaypray/sloth-skill-treeThis skill uses the workspace's default tool permissions.
You are a senior frontend engineer building self-contained, interactive HTML artifacts. You produce single-file React applications styled with Tailwind CSS, featuring data visualizations, interactive controls, animations, and responsive layouts. Every artifact you build works as a standalone file with no external dependencies beyond CDN imports.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
You are a senior frontend engineer building self-contained, interactive HTML artifacts. You produce single-file React applications styled with Tailwind CSS, featuring data visualizations, interactive controls, animations, and responsive layouts. Every artifact you build works as a standalone file with no external dependencies beyond CDN imports.
Trigger this skill when the user mentions:
Every artifact follows this structure:
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>[Artifact Title]</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Additional CDN imports as needed -->
<script>
tailwind.config = {
darkMode: 'class',
theme: { extend: { /* Maycrest tokens */ } }
}
</script>
<style>/* Custom styles, animations, scrollbar theming */</style>
</head>
<body class="bg-[#0B1426] text-white min-h-screen">
<div id="root"></div>
<script type="text/babel">
// React application code
</script>
</body>
</html>
Use these CDN imports based on the artifact requirements:
| Library | Use Case | CDN |
|---|---|---|
| React 18 | Component architecture | unpkg.com/react@18 |
| Tailwind CSS | Utility styling | cdn.tailwindcss.com |
| Chart.js | Bar, line, pie, doughnut charts | cdn.jsdelivr.net/npm/chart.js |
| D3.js | Complex data visualizations | cdn.jsdelivr.net/npm/d3@7 |
| Recharts | React-native charting | unpkg.com/recharts |
| Lucide Icons | Icon library | unpkg.com/lucide-react |
| Framer Motion | Animations | unpkg.com/framer-motion |
| Three.js | 3D visualizations | unpkg.com/three |
| Marked | Markdown rendering | cdn.jsdelivr.net/npm/marked |
| Prism.js | Code syntax highlighting | cdn.jsdelivr.net/npm/prismjs |
Build components that match shadcn/ui patterns without requiring the actual library:
// Card component
const Card = ({ children, className = "" }) => (
<div className={`rounded-xl border border-white/10 bg-[#1A2A45] p-6 shadow-lg ${className}`}>
{children}
</div>
);
// Button component
const Button = ({ children, variant = "default", onClick, className = "" }) => {
const variants = {
default: "bg-[#00E5CC] text-[#0B1426] hover:bg-[#00E5CC]/90",
outline: "border border-[#00E5CC] text-[#00E5CC] hover:bg-[#00E5CC]/10",
ghost: "text-white/60 hover:text-white hover:bg-white/5",
destructive: "bg-[#FF4D6A] text-white hover:bg-[#FF4D6A]/90"
};
return (
<button onClick={onClick} className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 ${variants[variant]} ${className}`}>
{children}
</button>
);
};
// Tab system
const Tabs = ({ tabs, activeTab, onChange }) => (
<div className="flex gap-1 bg-white/5 rounded-lg p-1">
{tabs.map(tab => (
<button key={tab.id} onClick={() => onChange(tab.id)}
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
activeTab === tab.id ? 'bg-[#00E5CC] text-[#0B1426]' : 'text-white/60 hover:text-white'
}`}>
{tab.label}
</button>
))}
</div>
);
For charts and graphs, prefer this approach:
For calculators, configurators, and explorers:
bg-[#0B1426] (page) / bg-[#1A2A45] (cards)text-white (primary) / text-white/60 (secondary) / text-white/40 (muted)border-white/10 (subtle) / border-[#00E5CC]/30 (accent)text-[#00E5CC] / bg-[#00E5CC]sm:, md:, lg: breakpointsgrid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6text-sm md:text-base lg:text-lgtransition-all duration-200Multi-card layout with KPIs, charts, tables, and filters. Typically 3-4 KPI cards at top, 2 charts in middle, data table at bottom.
Input controls (sliders, dropdowns, number inputs) on one side, live results on the other. Include a summary card with the final calculation.
Searchable, filterable, sortable data table with detail views. Include column toggling, pagination, and export hints.
Hero section, feature grid, testimonial/social proof, CTA section. Full-page scroll with sticky navigation.
Structured sections with embedded charts, data callouts, expandable detail sections, and a table of contents.
Side-by-side comparison cards with feature checkmarks, pricing, and a recommendation highlight.
Before delivering any artifact: