Web & Frontend
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
-
mahmoud20138 Skill PlaygroundCreates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.
-
mahmoud20138 Skill Elite UI DesignGenerates production-grade, visually stunning UI code that rivals top design studios. Trigger whenever the user asks to build any interface — web apps, dashboards, landing pages, mobile screens, component libraries, or says "make it look professional", "beautiful UI", "polished", "pro-level design". Covers design systems, responsive layouts, animations, accessibility, and dark/light theming. Produces complete runnable code, never mockups or pseudocode.
-
mahmoud20138 Skill Quant Ml TradingComplete quantitative and ML-powered trading toolkit — strategy validation, genetic optimization, decay monitoring, reinforcement learning, signal aggregation, data science pipelines, and statistical/quant foundations. Use this skill for: "generate a backtest report", "create tearsheet", "equity curve", "Monte Carlo simulation", "strategy report", "performance tearsheet", "backtest results", "drawdown analysis", "strategy statistics", "risk report", "publish backtest", "PDF report", "HTML report", "walk-forward", "out of sample validation", "rolling optimization", "WFO", "anchored walk forward", "parameter stability", "robustness test", "rolling backtest", "adaptive optimization", "parameter reoptimization", "stress test", "bootstrap simulation", "worst case scenario", "parameter sensitivity", "confidence interval", "ruin probability", "survival analysis", "tail risk", "heatmap", "parameter sweep", "optimization surface", "3D surface", "parameter landscape", "which parameters matter", "robust parameters", "se
-
mahmoud20138 Skill Programmatic DrawingExpert skill for generating visual art, diagrams, illustrations, charts, and drawings programmatically using SVG, HTML Canvas, p5.js, Three.js, Mermaid, and D3. Trigger whenever the user asks to draw, illustrate, visualize, diagram, create art, generate graphics, make a flowchart, render shapes, animate visuals, create infographics, or produce any kind of visual output through code. Also trigger for data visualization, generative art, interactive graphics, and technical diagrams.
Audited -
mahmoud20138 Skill Skill Docs GeneratorAuto-generate documentation for all 146 skills — interactive HTML navigator, dependency graphs, usage examples, quick-start guides, and skill catalog.
-
mahmoud20138 Skill Run Integration TestsRun integration tests to verify that extension components work together correctly. Use this after modifying component interactions or event handling.
-
mahmoud20138 Skill Backtest Report GeneratorGenerates publication-quality backtest reports with equity curves, Monte Carlo simulations, tearsheets, and comprehensive risk analysis. Use this skill whenever the user asks to "generate a backtest report", "create tearsheet", "equity curve", "Monte Carlo simulation", "strategy report", "performance tearsheet", "backtest results", "drawdown analysis", "strategy statistics", "risk report", "publish backtest", "PDF report", "HTML report", or any request to visualize and document strategy backtesting results. Works with quant-trading-pipeline for backtest data and trading-data-science for statistics.
-
rheinmir Skill TidyDọn + validate kho nháp và render (wiki/sources/draft/*.md + llmwiki/html/*.html) khi phình to — ex docs-curate (đổi tên 2026-09-09 vì tên cũ không ai gọi). Ba tầng — PROMOTE bản chất quý lên wiki ADR/concept, ARCHIVE nháp đã xong (status done/implemented hoặc task done) vào archive/<nhóm>/ bằng git mv (TRACKED, không xoá, không giết draft còn proposed), KEEP canonical — rồi RE-INDEX. Gọi tay bất cứ lúc nào, hoặc khi đầu phiên báo "[tidy] draft/ có N file (> 10)". Trigger — "tidy", "dọn nháp", "dọn docs", "draft quá nhiều", "archive draft", "quét nháp lỗi thời", "/tidy".
-
rheinmir Skill CouncilRun a Karpathy-style LLM council (3-stage multi-agent evaluation) on top of the existing orca orchestration: N seats independently answer a question, the answers are BLIND peer-ranked (identities stripped so a model can't favour its own), and a chairman synthesizes the final answer. The orchestration makes the model calls; harness/scripts/council.py does the deterministic protocol math (anonymization, mean-rank aggregation, dissent, anchor guard, transcript). Use when the user says "run a council", "llm-council", "panel of models", "blind peer-rank these answers", "ensemble + chairman", or invokes /council. Stage-4 is a MANDATORY HTML report, rendered inside council.py itself (offline, no CDN, no external skill): every `rank` writes a NEW versioned self-contained report (llmwiki/html/council/council-report-NNN-seed<seed>.html) — opinion cards (persona name + lens), a blind-vote table, and a dashboard. Isolated in try/except so a render bug never kills the core transcript.
-
rheinmir Skill Web CloneClone a website — two modes. SNAPSHOT = a faithful, self-contained offline copy of a page (HTML+CSS+JS+images in one file, exact bytes, SingleFile-style). RECONSTRUCT = AI reverse- engineer the page into a clean editable Next.js/Tailwind codebase (design tokens → component specs → parallel builders → visual-diff QA, the ai-website-cloner-template method). Use when the user wants to "clone this site", copy a page's design/UI + interactions, mirror a layout, save offline, or rebuild a site as editable code. Built-now-adapt-later: snapshot builtin works now; faithful live capture + the reconstruct pipeline are one-config engine adapters.
-
rheinmir Skill Web CrawlCrawl/scrape a website or single page into clean LLM-ready MARKDOWN. Use when the user wants to fetch a URL's content, scrape a site, extract an article/page as text, pull docs from the web into the wiki, or "crawl this link". Markdown (not raw HTML) = 5-10x fewer tokens. Built-now- adapt-later: works offline with no key via a builtin urllib→markdown backend; premium backends (Firecrawl/Crawl4AI/Jina) are a one-config adapter.
-
rheinmir Skill Md To HTMLRender Markdown thành standalone HTML — Mermaid, Chart.js, styled tables, TOC
-
rheinmir Skill Tour GuideThêm một in-app product tour (spotlight onboarding overlay) tự viết, KHÔNG cần thư viện (không joyride/intro.js/driver.js). Vẽ lớp tối + khoét spotlight quanh từng phần tử theo CSS selector, gắn tooltip nhãn, và 1 pill "tap để đóng" đặt vào khoảng trống lớn nhất. Responsive mobile/desktop, lock scroll, đo bằng getBoundingClientRect, click bất kỳ đâu để đóng. Dùng khi user muốn: "thêm tour guide", "onboarding tour", "hướng dẫn trong app", "spotlight tour", "product tour", "walkthrough", "tour kiểu bonbon", hoặc invoke /tour-guide. Hợp với React/Next.js + Tailwind. Mỗi route tự định nghĩa danh sách điểm dừng (spots); phần tử được đánh dấu bằng thuộc tính data-tour ổn định.
-
rheinmir Bundle DoyourmagicGiven a freshly-cloned external repo/tool, run clone→explore→verify→write to produce a bundle of RUNNABLE workflow skills under .overstack/doyourmagic/<repo>/skills/ — one hub skill /dym-<repo> (1 dòng context, chỉ nạp workflow con khi được gọi) + N sub-skills dạng SKILL.md promote thẳng lên repo chính (npx skills add) — plus workflows.md (index + bảng kiểm chứng) and flow.html (docs-site-macos, sơ đồ luồng skill→sản phẩm→skill kế). Trigger on 'kéo repo mới về', 'clone tool này làm workflow', 'doyourmagic', 'onboard external tool/repo', 'generate workflow docs/skills for this repo', or /doyourmagic. Options: --name <prefix> · --humanize.
-
rheinmir Bundle Orca OnboardParallel codebase onboarding — distilled understand-anything pipeline (scan + git history + batch analyze + layers/tour, no plugin), then domain enrichment (Claude), wiki + HTML via opencode+DeepSeek Flash v4.
-
tomevault-io Bundle Jkoop Owing Tailwindcss DevelopmentTailwind CSS Development
-
matteotitta Skill Site Export To ReactSite Export To React
-
dreamlab-ai Bundle Build With QualityImplement features with tests and quality gates, debug hard bugs, and stress-test designs. Use when building a feature with TDD/EDD, chasing a stubborn multi-function bug (feedback-loop-first), interrogating a design before coding, or running a coverage/security/accessibility quality-gate pass. Supersedes agentic-qe, reasoningbank-*, and pair-programming.
-
dreamlab-ai Skill Bencium Impact DesignerDEPRECATED — replaced by bencium-creative. Use bencium-creative with --design flag for bold creative UX and --build flag for production frontend implementation.
-
dreamlab-ai Skill Bencium Code ConventionsBence's personal code style, tech stack, and workflow conventions for his own projects. Use ONLY when the active project is identified as Bence's own repository (explicitly named as his, or the user identifies themselves as Bence) — not general React/Next.js/TypeScript/Tailwind guidance for other users' work, even when the tech stack overlaps.
-
tuanductran Bundle Hr MobileHelp HR managers, recruiters, and talent acquisition teams understand Mobile Development, iOS, Android, cross-platform engineering, mobile app architecture, and modern mobile ecosystems. Use when asked to explain mobile development, screen mobile developers, understand React Native or Flutter, compare native and cross-platform development, evaluate mobile skills, create mobile interview questions, understand iOS and Android workflows, or any mobile engineering hiring and recruiting task.
-
tuanductran Bundle Hr FrontendHelp HR managers, recruiters, and talent acquisition teams understand Frontend Engineering concepts, hiring requirements, frontend ecosystems, frontend candidate evaluation, and modern frontend workflows. Use when asked to explain frontend development, screen frontend candidates, understand React/Vue/Angular, compare frontend frameworks, evaluate frontend skills, create frontend interview questions, understand frontend architecture, or any frontend hiring and recruiting task.
-
tuanductran Bundle Hr FullstackHelp HR managers, recruiters, and talent acquisition teams understand Fullstack Engineering concepts, fullstack-specific hiring requirements, cross-functional engineering workflows, frontend-backend integration, and modern end-to-end product development. Use when asked to explain fullstack development, screen fullstack candidates, understand frontend and backend together, evaluate fullstack skills, compare fullstack stacks, create fullstack interview questions, understand end-to-end product engineering, or any fullstack hiring and recruiting task.
-
tuanductran Bundle Hr Talent ManagementHelp HR managers, HRBPs, L&D leads, and people operations teams understand, design, and execute talent management systems. Use when asked to build a succession planning component within talent management, design a performance management framework, identify high potential employees, create a career path, build a competency model, improve internal mobility, design a talent management review and calibration process, measure employee engagement, develop a retention strategy, run a 9-box assessment, or any talent development and workforce planning task.
-
dabit3 Skill SketchThrowaway HTML mockups: 2-3 design variants to compare.
Audited -
dabit3 Skill Claude DesignDesign one-off HTML artifacts (landing, deck, prototype).
Audited -
dabit3 Bundle Popular Web Designs54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
-
dabit3 Bundle HyperframesCreate HTML-based video compositions, animated title cards, social overlays, captioned talking-head videos, audio-reactive visuals, and shader transitions using HyperFrames. HTML is the source of truth for video. Use when the user wants a rendered MP4/WebM from an HTML composition, wants to animate text/logos/charts over media, needs captions synced to audio, wants TTS narration, or wants to convert a website into a video.
-
egohygiene Bundle Security ReviewAI-powered codebase security scanner that reasons about code like a security researcher — tracing data flows, understanding component interactions, and catching vulnerabilities that pattern-matching tools miss. Use this skill when asked to scan code for security vulnerabilities, find bugs, check for SQL injection, XSS, command injection, exposed API keys, hardcoded secrets, insecure dependencies, access control issues, or any request like "is my code secure?", "review for security issues", "audit this codebase", or "check for vulnerabilities". Covers injection flaws, authentication and access control bugs, secrets exposure, weak cryptography, insecure dependencies, and business logic issues across JavaScript, TypeScript, Python, Java, PHP, Go, Ruby, and Rust.
-
egohygiene Skill Arxiv PublishingPrepare and validate reproducible arXiv publication releases from canonical scholarly sources. Use for LaTeX compatibility checks, bibliography freezing, source staging, filename sanitation, deterministic builds, release manifests, submission archives, accessibility checks, or arXiv preflight work.
-
egohygiene Bundle Publish To PagesPublish presentations and web content to GitHub Pages. Converts PPTX, PDF, HTML, or Google Slides to a live GitHub Pages URL. Handles repo creation, file conversion, Pages enablement, and returns the live URL. Use when the user wants to publish, deploy, or share a presentation or HTML file via GitHub Pages.
-
egohygiene Skill Repository AuditPerform an evidence-based, non-destructive repository audit and write a structured report. Use for holistic or focused reviews of architecture, code quality, testing, security, CI/CD, dependencies, documentation, developer experience, maintainability, accessibility, performance, or repository hygiene.
-
rheinmir Skill Orca Sec ScansQuét bảo mật mã nguồn bằng Trivy — tự check/cài Trivy nếu chưa có, quét vuln + misconfig + secret trên be/fe, xuất report JSON+HTML, tóm tắt HIGH/CRITICAL, và đề xuất/áp dụng fix (bump deps, USER non-root). NGOÀI quét static Trivy, còn KIỂM CHỨNG ĐỘNG các giả định mặc định hay sai của dev (auth chỉ ở UI, "nội bộ nên an toàn", CORS, config default, lệch branch deploy) bằng request thật. Dùng khi user nói "quét bảo mật", "trivy", "scan vuln", "security scan", "check CVE", "có lỗ hổng không", "an toàn chưa", "/orca-sec-scans".
-
rheinmir Bundle Docs Site MacosBuild a beautiful macOS-inspired documentation site (single HTML file) with a liquid-glass surface system (tiered glassmorphism: opacity ladder, blur scale, edge highlights), animated SVG diagrams, traffic-light window chrome, and a light-blue + white liquid-glass palette (white glass surfaces over a soft blue gradient field, per-section blue-tone theming). Also trigger on "liquid glass", "frosted glass", or "translucent UI" requests for docs/showcase pages. Trigger when the user wants to create a docs site, landing page, showcase, portfolio, guide, tutorial site, feature overview, or product documentation — especially when they mention wanting it to look "clean", "modern", "Apple-like", "macOS style", "glass", "frosted", "animated diagrams", or "single HTML file". Also use when the user has multiple markdown files and wants them rendered into a cohesive visual HTML page with sections. If the user says "6 file" or wants separate pages per topic, generate one HTML file per wiki file (index.html as overview + N
-
rheinmir Skill Uat Nonit TestcaseTạo bộ test case / checklist UAT cho người dùng nghiệp vụ NON-IT (C&B, kế toán, vận hành) — 1 file HTML offline-proof gồm bảng kịch bản tuần tự có mã Ctrl+F, phạm vi check/không-check theo nguồn dữ liệu, step-by-step kèm ảnh màn hình thật đã blur PII, Đạt/Không đạt + xuất Excel/CSV/PDF. Trigger: "tạo test case cho non-IT", "checklist UAT cho nghiệp vụ", "kịch bản kiểm thử cho C&B", "/uat-nonit-testcase".
-
rheinmir Skill DymTool ngoài ĐÃ KIỂM CHỨNG, chọn theo domain: agent · architecture · browser · chart · copy · design-audit · diagram · frontend · playwright · qa · report · research · science · security · skill-authoring · threat-intel · writing. Gọi khi việc thuộc một domain đó (vd vẽ chart → lieflat-charts, frontend → impeccable) và skill canonical chưa phủ; gõ /dym <domain> hoặc /dym.
Frequently asked questions
What are Web & Frontend agent skills?
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
Which Web & Frontend skills are most installed?
Popular Web & Frontend skills on SkillMD right now include playground, elite-ui-design, quant-ml-trading. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Web & Frontend skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.