Web & Frontend

huifer Bundle

Use this skill when a Discord command is `!demo new` / `!mvp new` / `!demo refactor` / `!build run`. Generates React Demo / MVP / 内部工具的专属 Agent。 Loads skills in fixed order: read-foundation -> react-design -> component-library -> react-vite -> react-router -> tailwind-v4 -> shadcn-ui -> tanstack-query -> msw-mock -> react-testing -> zenbuild-design-tokens -> react-demo -> pnpm-install -> codespace-build. Always uses `@zenbuild/design` design tokens and existing components. Never writes raw HTML. Never writes duplicate components. Never edits the demo template directly.

nimbalyst Bundle

Author and revise tscircuit React/TypeScript circuit designs using canonical syntax, built-in elements, layout, wiring, workflow, checklists, and templates. Use when an agent works on .circuit.tsx files in Electronics Studio and needs upstream tscircuit authoring guidance.

norahe0304-art Bundle

Generate premium 40s product launch videos using Remotion. Scrapes the brand's real landing page for colors/fonts/assets. Builds ANIMATED PRODUCT UI MOCKUPS — full dashboards, code editors, conversation UIs, data charts — not floating text on backgrounds. Uses lucide-react icons (never emoji), spring physics, SVG chart animations, TransitionSeries with fade/light-leak transitions. Follows the Stripe/Linear/Vercel 5-act structure. Integrates remotion-best-practices patterns.

oil-oil Bundle

Use this skill whenever an Agent needs a visual workspace for local Markdown, HTML, images, or videos. Trigger proactively when a task involves previewing images or videos, comparing multiple documents or generated outputs, organizing context across multiple turns, reviewing HTML made from documents, drafting prompts with file references, collecting visual evidence for AI, reading Markdown comments, or keeping task-specific files on a canvas. Also trigger when the user mentions Mira, canvas, visual context, local preview, file nodes, boards, comments, or copying context.

onboardjs Bundle

Integrate OnboardJS into React projects for building user onboarding flows. Use when: (1) Setting up OnboardJS in a React/Next.js project (2) Creating multi-step onboarding, wizards, or guided flows (3) Implementing conditional navigation, data persistence, or step validation (4) Working with OnboardingProvider, useOnboarding hook, or step components Triggers: "onboarding", "onboardjs", "wizard flow", "user onboarding", "guided tour", "multi-step form"

opengeos Bundle

Build interactive web maps with GeoLibre. Use whenever the deliverable is a map rather than a number or a static figure: "make me a map of X", "a choropleth of Y", "plot these points", "show this GeoTIFF", "build a web map I can share". Covers authoring `.geolibre.json` projects with the `geolibre-mcp` MCP server, the `geolibre` Python package in a notebook, driving a live embedded map, and exporting a standalone HTML page anyone can open. Also trigger on GeoLibre, `.geolibre.json`, `geolibre-mcp`, or when someone has geospatial data (GeoJSON, GeoParquet, FlatGeobuf, Shapefile, COG/GeoTIFF, PMTiles, MBTiles, WMS/WMTS, 3D Tiles, LiDAR) and wants to see it.

ramarivera Bundle

Universal React UI framework for web and native (v1.144.0+). Use when building cross-platform apps with React Native + Web, creating styled components with `styled()`, configuring design tokens/themes, using Tamagui UI components (Button, Dialog, Sheet, Input, Select, Tabs, etc.), working with animations, or needing Bento/Takeout premium components. Triggers: "tamagui", "universal UI", "react native web", "styled()", "design tokens", "$token", "XStack/YStack/ZStack", "useTheme", "useMedia", "@tamagui/*" imports, "bento", "takeout", "one.js router", "createStyledContext", "withStaticProperties", "@tanstack/react-table", "zero sync", "better auth".

remyoo7 Bundle

Use when generating an A4 PDF, converting AI content into a printable report, designing HTML/CSS documents, comparing quotations, writing tender evaluation reports, making travel booklets, turning presentations into A4 handouts, standardising resumes, improving pagination, or avoiding manual Word-to-PDF formatting.

replete Skill

Channel the grug brained developer to give practical, hard-won software wisdom in grug's distinctive voice. Trigger this skill whenever the user says "/grug", "/grugmode", "grug mode", "grug take", "what would grug say", "give me the grug perspective", or asks for a simple/pragmatic/no-nonsense take on a software problem. Also trigger when the user asks to "think like grug", "be grug", or references "grug brain" in any way. This skill applies to any software topic: architecture, testing, refactoring, APIs, tooling, type systems, abstractions, frameworks, complexity, career decisions, code review, debugging, frontend vs backend, etc. When in doubt and the user seems to want blunt cave-developer wisdom, use this skill.

semkoo Skill

Integrate and use Niko Table (shadcn-compatible data tables with TanStack Table) and the editable Data Grid. Use when the user mentions Niko Table, niko-table.com, data table with shadcn, TanStack Table, building a sortable or filterable table, faceted filters, advanced filter menu, row or column drag-and-drop, server-side pagination, server-side grid, infinite scroll, Drizzle ORM, nuqs, URL state, shareable or bookmarkable table, row expansion, tree table, row selection, editable spreadsheet grid, useDataGrid, DataGrid cell editors, clipboard/fill handle, useGridChanges, or any shadcn-compatible data grid — even if they don't name Niko Table explicitly. Prefer this skill whenever the task involves a data table or editable grid in a React/shadcn project so the model follows Niko Table structure, imports, and patterns.

sethjuarez Skill

Debug Auditaur-enabled Tauri apps. Use when asked to inspect app startup, telemetry readiness, frontend errors, IPC, events, traces, Tauri-native drive bridge targets, or dogfood/smoke-test an Auditaur integration.

seyseyseyz Bundle

P5.js visual composition pipeline with a mandatory 8-10 question visual-brief interview and a post-interview mode choice. Use this skill whenever the user asks for p5.js sketches, creative coding, generative art, interactive canvas animations, shaders, 3D p5 scenes, browser visual prototypes, data visualization, or any p5.js project. After the interview, ask whether the user wants Source Preview Mode (decompose elements, research reusable source/templates, show selectable live previews, then compose a final adjustable sketch) or Direct Generation Mode (skip source/gallery work and generate the final adjustable p5 sketch directly). In both modes, the final HTML must include a parameter panel exposing the useful tunable controls the AI identifies from the algorithm.

shadcn-labs Bundle

Expert guidance for Satori, the library that converts JSX/HTML and CSS into SVG (the engine behind dynamic Open Graph images and social cards). Use whenever writing or debugging Satori markup e.g. authoring JSX for OG images, choosing CSS that Satori actually supports, fixing layout that renders wrong, embedding fonts, rendering emoji or images, or resolving Satori errors like "Expected length unit" or unsupported property issues. Reach for this any time someone renders HTML/CSS to SVG or PNG with Satori, even if they do not name it.

sikandarjodd Bundle

Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing.

sugarforever Bundle

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

timbenniks Bundle

Comprehensive Contentstack CMS documentation for building web applications. Covers REST API, GraphQL API, Content Management API, Image Delivery API, TypeScript SDKs, Live Preview, OAuth authentication, data modeling best practices, and framework patterns for Next.js, Nuxt, and Gatsby. Use when implementing any Contentstack feature, fetching or managing content, designing schemas, setting up Live Preview, configuring regions, building CLI plugins, or creating Developer Hub apps.

toss Bundle

Search and retrieve Toss / Apps-in-Toss documentation using the ax CLI via run-ax.sh. Supports docs, TDS React Native, and TDS Web sources. Use bash to execute run-ax.sh in this skill's directory.

ttttstc Bundle

PPT 制作全链路流水线：内容规划 → 风格定调 → Slide 制作 → 视觉审查 → 导出验证 → 交付。 Use when: 做 PPT、做演示文稿、做 slide、做海报、PPT review、视觉审查。 Not for: 纯代码开发（用 worktree/tdd）、纯文档写作（直接写）。 Output: 高密度 HTML slide + 视觉审查通过 + 导出验证 + PPTX/PDF 可选。

vicanso Bundle

How to build desktop applications with GPUI Kit, the Rust framework published as the gpui-kit crate (GPUI plus gpui_kit::component, gpui_kit::base, gpui_kit::assets). Use when setting up a gpui-kit app, choosing or using a component (Button, Input, Select, Dialog, Sheet, Tabs, Sidebar, List, DataTable, Tree, Chart, etc.), handling component state, theming, or window overlays, and for GPUI mechanics: actions and keybindings, async tasks, contexts, custom elements, entities, events, focus, global state, layout and styling, ElementId, and tests. Holds the normative Coding Guides: read them before any architecture, state-ownership, public API, naming, or testing decision. Pairs with the gpui-kit-design-guides skill for the Design Guides.

voidful Bundle

Evidence-based training-recipe advisor (煉丹調參) distilled from published runs: LLaMA 1-3, OLMo 1-3, DeepSeek-V3, SmolLM2, MiniCPM5, Kimi K2, GLM-5, PivotRL, Agents-A1, OPD, SEED, EvoLM, LFM2, VibeThinker, OpenThoughts, GRAPE, FAC-Synthesis, Zephyr, Tulu 3, SimPO, ORPO, QLoRA, Whisper, OWSM, wav2vec 2.0, HuBERT. Use whenever the user asks about training hyperparameters (learning rate, batch size, warmup, scheduler, optimizer, beta, weight decay, epochs), debugging a training run (loss spike, NaN, divergence, overfitting), designing a pretraining/SFT/DPO/RLHF/RLVR/agentic-RL/LoRA/QLoRA/speech (ASR/TTS) recipe, compute or token budgets, SFT data curation, distillation/curriculum/merging, on-device models, what to monitor or which benchmarks/eval suite per stage, capability regression/forgetting, tracking/reporting training runs (實驗追蹤, HTML run reports), or mentions 煉丹, 調參, "training recipe", "fine-tuning settings", "what LR should I use", "eval suite", "release gate" — even if they never say "hyperparameter".

vxcozy Bundle

Install and operate a three-layer WCAG 2.1 A/AA accessibility gate that blocks commits and pushes with a11y issues. Same axe-core rule set as Vercel's Accessibility Audit Tool. Layers are (1) a pre-commit hook running static checks (jsx-a11y, vuejs-accessibility, svelte, angular-template, astro, plain HTML, palette tokens) on staged files, (2) a pre-push hook running Playwright + @axe-core/playwright against the built and served site to catch rendered-DOM rules (computed contrast, landmark coverage, focus state) and to sweep light/dark color modes via prefers-color-scheme emulation, and (3) a GitHub Actions workflow enforcing the same rendered audit at the PR boundary. Also handles on-demand reviews like contrast ratio checks, palette audits, and snippet reviews. Use when the user asks to set up a11y CI, block accessibility issues at commit, audit a palette, check a contrast ratio, or review code for WCAG compliance.

muchandresh Bundle

Codebase cartographer and architecture explainer tailored for vibe coders and builders. Deeply scans directories, builds visual component maps, user journeys, function-by-function breakdowns, and impact blast-radius analysis.

yappologistic Bundle

Build, redesign, review, polish, and QA frontend UI/UX, React/Next/Vite components, landing pages, dashboards, forms, design systems, responsive layouts, accessibility, visual hierarchy, and non-generic product design.

yorickvandervis Bundle

Claude Skills are a set of Markdown files that live in your `.claude` folder (or that you can upload in your Claude web/desktop). They are automatically loaded by Claude when it thinks they are appropriate for the current task.

yunyoujun Bundle

Integrate, build, extend, or review web interfaces with the brand-adaptive ak-ui design language and CSS foundation. Use when a user asks to install ak-ui, create an Arknights-inspired interface without copying game assets, style native or unstyled headless components such as Reka UI, convert an existing page to ak-ui, or audit whether an implementation follows ak-ui tokens, geometry, interaction states, responsiveness, and accessibility.

1055373165 Bundle

Create distinctive, production-grade frontend interfaces with strong visual direction and non-generic UI craft. Use this when redesigning pages, components, apps, or product surfaces that need a memorable design point of view.

863401402 Bundle

Acquire, import, and analyze WeChat or QQ chat histories, including installing supported exporters, guiding required login or contact selection, converting exports, assessing relationship dynamics and risk signals, and generating a structured Chinese HTML report. Use when the user asks to export, import, or analyze WeChat/QQ chats or requests relationship analysis from message history.

tatendaz Bundle

View, preview, open, render, or serve any HTML file/page/mockup/prototype in the browser with a live two-way feedback loop. Use this whenever the user wants to look at HTML in a browser, see a rendered page, preview a mockup or prototype, or iterate on an HTML UI — instead of a bare `open file.html` (file:// blocks the mic + screen capture and gives no feedback channel). It serves the HTML from a local relay, injects a feedback widget (typed notes, voice dictation, screen recording, screenshots, and click-to-pick element selection), and boots a resident pre-warmed Claude agent that picks up each note the instant it is sent (~0s pickup), applies the fix, streams live "what I'm doing" status to the page, and replies in the browser. Trigger for ANY request to view / preview / serve / open / render HTML.

cosgroveb Bundle

Design or critique terminal software. Use for CLI command trees, help text, flags, stdout/stderr, prompts, errors, progress, TUI layout, keybindings, search, no-color behavior, and terminal accessibility.

danielscholl Bundle

Search the web using Brave Search API and fetch page content with HTML-to-markdown conversion. Use when user needs current information, online documentation, or specific URL content beyond knowledge cutoff.

ghostfolio Bundle

Generates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices on reactivity (signals, linkedSignal, resource, httpResource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.

huangrichao2020 Skill

VibeCoding UI 视觉设计方法论——色彩 + 国风纹样 + 提示词工程的统一规范。 沉淀自「才巨智能 VibeCoding 教程系列」：①《UI 设计色彩搭建完整手册》(19 页) ②《国风纹样生成教程》(30 页)。 本 skill 是所有 HTML/CSS/SVG/可视化输出的统一方法论入口，覆盖： - 60-30-10 黄金配色比例 - HSL 色彩思维 + 50-900 色阶生成法 - 三层 Design Token 架构（原始层 → 语义层 → 组件层） - WCAG 对比度与无障碍 - 深色模式正确做法 - 4 套国风配色主题（青花/朱砂金/黛蓝金/墨绿金）+ 紫罗兰示范色 - 国风五大纹样体系 30 种纹样话术库 - 五步纹样描述公式（骨架→主体→构成→色彩→风格） - 国风纹样衍生四法（换色/重组/简化/融合） - 验收清单（一致性/层级/对比度/语义/双模式） 触发场景：任何 HTML/SVG/CSS 生成、PPT 演示文稿配色（配合 tencent-pptx）、 PDF/电子书/橙皮书排版（配合 huashu-book-pdf）、UI 配色、新中式/国风视觉、 网页装饰纹样、文档封面配色、可视化主题设计都应调用本 skill；不必单独搜色彩或纹样手册。

ifuryst Bundle

Use when an agent needs standalone HTML chart examples for a specific domain, especially to design data-rich UI artifacts without loading a large chart library into context.

innei Bundle

Build new Yohaku-style UI: HTML mockups, React components, or mockup→React handoff. Triggers on "make a Yohaku mockup / design a new component / add a hero / modal / sheet / convert mockup to React / audit token compliance / 做一个 Yohaku 风的 mockup / 设计一个新组件 / mockup 转 React / 检查 token 合规".

jiadizhunine Bundle

Use when evaluating or comparing a professor as a potential graduate advisor, including requests such as "调查导师", "选导师", "导师怎么样", "这个导师 push 吗", "investigate this advisor", "should I join this lab", or a professor name plus institution with evaluation intent. DeepTutor investigates publications, co-author networks, student trajectories, funding, lab culture, and exploitation/toxicity risk; applies region-specific searches for mainland China and international institutions; and renders a cited standalone HTML report in Chinese or English. Student outcomes are the highest-priority signal.

klarkxy Bundle

This skill is a reference manual for the Naive UI Vue 3 component library. Use it when the user works with Naive UI. Not for other UI libraries (Element Plus, Ant Design Vue, Vuetify, PrimeVue) or generic Vue 3 questions.