Web & Frontend

tambo-ai Skill

Use this skill when adding or modifying settings UI in Tambo Cloud. Covers where a new settings section belongs (Agent tab vs Settings tab), and the component patterns used across both pages (card layout, toasts, confirmation dialogs, destructive styling, save behavior conventions). Triggers on "add a new settings section", "where should X go?", "settings UI", "settings page", "agent page", or any work touching apps/web/components/dashboard-components/project-details/, project-settings.tsx, or agent-settings.tsx. Not for full-stack feature building (DB, tRPC, tests); those patterns will get their own skills.

tambo-ai Skill

Use this skill when creating, modifying, or reviewing any .tsx component in apps/web, even if the user doesn't mention "accessibility." Covers semantic HTML, aria labels, navigation landmarks, forms, dialogs, and keyboard navigation. Trigger on: adding buttons, links, toggles, icons, or any interactive element; building or editing forms; adding dialogs or modals; reviewing UI code. Includes inline verification patterns for scanning violations. Not for styling or layout changes that don't involve interactive elements.

tambo-ai Bundle

Integrates Tambo into existing React apps — detects tech stack, installs @tambo-ai/react, wires TamboProvider, registers components with Zod schemas, and sets up tools/context. Use when adding AI-powered generative UI to an existing codebase. Triggers on "add Tambo", "integrate Tambo", "add AI chat to my app", "add generative UI", or when the user has an existing React/Next.js/Vite project and wants to add AI-powered components. For brand-new projects, use generative-ui instead.

chaitanyame Bundle

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. Use when testing web apps, running Playwright tests, verifying UI behavior, or debugging frontend issues.

chaitanyame Skill

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

andronics Skill

Design token management for creating, organizing, and applying design tokens across projects. Supports multiple formats (CSS custom properties, Sass, JS, JSON). Use when setting up design systems or managing design tokens.

jasondocton Skill

React 19.2 patterns and primitives. Applies to React components, hooks, state, forms. Use for useEffectEvent, useActionState, Activity component, use(), or migrating from older React patterns like React.FC.

jasondocton Skill

Tailwind 4.0 patterns for styling React components. Applies to class usage, color selection, inheritance optimization, responsive design, or reducing redundant utilities and wrapper divs.

imehr Bundle

Use when building UI components, pages, or features - guides Claude through the approved frontend stack (Next.js 15, React 19, Shadcn, Tailwind) with design-first workflow for complex UIs, enforcing patterns and quality standards

stackonehq Bundle

Implement account linking using StackOne Connect Sessions and the Hub React component. Use when user asks to "connect a provider", "embed the integration picker", "add BambooHR to my app", "create a connect session", "set up auth links", or "handle account webhooks". Covers the full flow from session creation to webhook handling. Do NOT use for making API calls after linking (use stackone-platform) or building AI agents (use stackone-agents).

aiworkskills Bundle

公众号排版｜Markdown 转 HTML｜排版主题｜段落样式 — 公众号一键排版工具，Markdown 文稿转微信后台可粘贴 HTML，多主题、多字号、段落样式切换，所见即所得。面向公众号编辑、独立作者、排版岗。触发词：「排版」「版式」「美化」「格式化」「字号」「段落样式」「换个排版主题」「换个版式」「转 HTML」「弄好看点」「调整格式」。换预设包/品牌包/整套主题配色请走 aws-wechat-article-assets；需要多环节串联（写+审+排+配图+发）请走 aws-wechat-article-main。

joaquincampo Bundle

Use when building or improving HTML/CSS artifacts, React pages, dashboards, landing pages, explainers, demos, SVG diagrams, UI prototypes, or visual outputs where design quality, subject-specific treatment, responsive behavior, and render verification matter.

konflux-ci Bundle

Use when needing to know which Red Hat team owns a Konflux-related repository (konflux-ci, hermetoproject, conforma orgs), which JIRA project or component to file issues against, or how the Red Hat Konflux engineering organization maps to the codebase.

konflux-ci Skill

Use to trigger component builds, releases or get a component or application status

sgaunet Bundle

Scaffold the Bulma CSS framework into a Go web app with embedded assets for zero-dependency binaries. Use when building an HTML UI with a classes-based CSS framework and no Node toolchain.

hollaugo Skill

Add a new inline widget to your ChatGPT App with HTML/CSS/JS and Apps SDK integration.

trifle-labs-skills Bundle

Convert any URL to clean markdown using markdown.new (Cloudflare's text/markdown service). Use when fetching web content for AI processing, reducing tokens by ~80% vs raw HTML. Ideal for RAG pipelines, web summarization, content extraction, or any task needing clean text from URLs. Supports JS-heavy pages via browser rendering fallback.

benshapyro Skill

Modern React patterns for TypeScript applications including hooks, state management, and component composition. Use when building React components, managing state, or implementing React best practices.

benshapyro Skill

Create distinctive, memorable user interfaces that avoid generic AI aesthetics. Use when designing UI/UX, planning visual direction, or building pages and layouts.

metalbear-co Bundle

Helps DevOps engineers configure mirrord Operator's Temporal task queue splitting feature end-to-end. Generates the MirrordSplitConfig and MirrordPropertyList Kubernetes CRD YAMLs, the matching mirrord.json split_queues section with message_filter and jq_filter, and Helm value guidance. Use this skill whenever the user mentions Temporal splitting with mirrord, Temporal task queue splitting, splitting a Temporal worker, configuring mirrord with Temporal or Temporal Cloud, routing Temporal workflow or activity tasks to a local worker, or troubleshooting Temporal splitting sessions. Also trigger on split_queues with queue_type Temporal, or connecting mirrord to a Temporal frontend. This is an alpha Team/Enterprise feature of mirrord.

kirilltrubitsyn Bundle

Аудит технического долга и дисциплинированный рефакторинг существующего кода с сохранением внешнего поведения; стек определяется автоматически (Python, JS/TS: React, Next.js, Node; классические проверки — любой язык). Четыре режима: audit (только чтение и отчёт), plan (план с критериями приёмки), execute (правки строго в согласованном scope, малыми шагами под тестами), codemod (массовые механические трансформации). При неясном намерении — audit, без правок. Методологии: strangler fig, branch by abstraction, parallel change, Mikado; приоритизация по hotspot-анализу (Tornhill). Триггеры: «рефакторинг», «refactor», «техдолг», «technical debt», «очистка кода», «cleanup», «code smell», «упростить код», «разделить компонент», «убрать дублирование», «аудит кода». НЕ для новых фич, багфиксов и аудита безопасности (для него — скилл security-audit).

val-town Skill

Use when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser. Covers JSX/React conventions, Twind/Tailwind styling, React version pinning, the view-source link requirement, and what to avoid (template-string HTML, external assets).

val-town Skill

Use when a val needs to ship JavaScript that runs in the browser — React apps, vanilla DOM scripts, canvas/games, htmx/Alpine, or any client-side module beyond a single inline snippet. Explains how Val Town serves transpiled .ts/.tsx/.jsx modules with no build step, how the browser resolves their imports, and how to load third-party deps.

epochdevs Skill

Deep code audit across the Epoch stack: code smell detection, systematic fix application, and cross-stack connectivity verification. Use when you want to audit a feature or component for bugs, dead code, silent failures, missing tests, or broken field wiring across layers. Covers: metadata → transform impl → proto → frontend connectivity.

danswer-ai Skill

Generate or edit raster images (photos, illustrations, textures, sprites, mockups, logos, infographics) using the workspace's configured image-generation provider via `onyx-cli image`. Use when the task should produce a brand-new bitmap image, transform an existing image, or derive variants from references — not when the output is better as code-native SVG/vector or built directly in HTML/CSS/canvas. If no image provider is configured, tell the user to set one up at /admin/configuration/image-generation.

rivie13 Skill

Enforce branch hygiene, pre-commit validation, PR setup via GitHub MCP tools, and review follow-up workflow in the Website Frontend repo.

rivie13 Skill

Create, update, and manage GitHub pull requests for the Website Frontend repo. Use when user asks to create a PR, update a PR description, push changes, list PRs, merge a PR, check PR status, or manage branches.

outlitai Bundle

Use when work needs an implementation plan because it is architectural, cross-component, risky, migration-heavy, multi-stage, long-running, or explicitly requested as a plan.

iurykrieger Skill

Ingests an external data source into the Second Brain. Fetches content from Confluence, Google Docs, GitHub repositories, remote URLs, or any local file format supported by docling (DOCX, PPTX, XLSX, PDF, HTML, EPUB, images, Markdown, CSV, and more), converts non-markdown formats to markdown via docling, runs the /graphify extraction pipeline, and delegates entity persistence (including the graphify-output merge) to /bedrock:preserve. Use when: "bedrock learn", "bedrock-learn", "learn", "ingest source", "import document", "/bedrock:learn", or when the user provides a Confluence, Google Docs, or GitHub URL, a remote file URL, or a local file path to incorporate into the vault.

buzzdan Bundle

BACKWARD view over rules/ — routes linter and review failures to the rule whose Fix pattern owns the repair. Use when linter fails with complexity issues (cyclomatic, cognitive, maintainability) or when code feels hard to read/maintain. Also runs PREPARATORY mode: reshape code an approved plan touches, before the first RED, so the feature lands add-only. Applies storifying, type extraction, function extraction, conditional-dispatch, and mutation-discipline patterns via rules/R1-R8 and R10-R12.

buzzdan Skill

ADVISORY pre-commit review that orchestrates parallel single-obsession rule hunters, an over-abstraction skeptic, and a comment critic against the diff. Spawns read-only agents (rule-hunter, overabstraction-skeptic, comment-critic); NEVER edits code. Invoked by @linter-driven-development (Phase 4), by @refactoring (after pattern application), or manually for standalone code review. Categorizes findings as Bugs, New Practice (when in Rome), Design Debt, Readability Debt, or Polish Opportunities. Does NOT block commits.

buzzdan Bundle

Component and type design for TypeScript + React code. Use when planning new features, designing components and custom hooks, preventing primitive obsession, or when refactoring reveals need for new abstractions. Supports layer-based and hybrid architecture patterns with type safety.

diverta Bundle

Kuroco Admin MCP（管理MCPサーバー）の接続設定・認証・ツール利用を支援する。AIエージェントからKurocoの管理操作を行う際の推奨手段で、OAuth 2.0 / CIMD認証、スコープ（mcp:admin / mcp:tools.all / mcp:tools.write / mcp:tools.read）と作業ごとに必要なレベル、whoamiによる実効権限の確認、Claude Code・Claude Web・ChatGPT・Codex CLIからの接続設定、部分更新（patch.カラム名による行単位の書き換え、base_hashによる楽観ロック）をカバー。MCP経由の管理操作、Issuer URLやprotected resource metadataの設定、大きなCSS/JS/テンプレートの一部だけの更新、MCPツールが見えない・権限不足で書き込めない等のトラブルシュートに使用。

diverta Bundle

Kurocoの会員認証・権限の設計判断を行う。会員グループ設計（権限の組み合わせによる昇格経路の回避）、登録フロー（即時登録/招待/仮登録）、コンテンツアクセス制限のスコープ（グループ制限/カスタム検索/自分の投稿のみ）、パスワードポリシー・2要素認証、代理ログイン、エンタープライズSSO（OAuth SP/SAML SP/IDaaS SP）・SCIMプロビジョニングを、将来の連結も見据えて決める。実装コードは kuroco-frontend-integration、既存設定の監査は kuroco-security-audit が担当。「会員機能を設計したい」「会員グループをどう分けるか」「登録フローをどうするか」「自分の投稿だけ見せたい」「代理ログインが必要か」「SSO/SAML/SCIMを後から繋げたい」等の設計相談で使用。

diverta Bundle

KurocoとVite / React / Nuxt.js / Next.jsなどフロントエンドフレームワークの統合パターン（SPA・SSG・SSRの実装）。SPA / SSGでのコンテンツ表示（SSR・ISRが必要な場合の公開先切り替えを含む）、ログイン・会員登録・認証状態管理（Cookie認証・動的アクセストークン）、サードパーティCookie問題の回避、XSS対策、公開先の決定（既定はKurocoFront、Vercel・Codex Sites指定時の確認事項）、KurocoFrontへのデプロイ（kuroco_front.json、GitHub連携、Admin MCP直接デプロイ）をカバー。フロントエンドからのKuroco連携、認証状態の管理、静的生成・動的ルート、デプロイ、公開先の選択の質問で使用。

lukasstrickler Bundle

Guide tasteful UI animation with easing, springs, layout animations, gestures, and accessibility. Covers Tailwind and Motion patterns. Use when: (1) Implementing enter/exit animations, (2) Choosing easing curves, (3) Configuring springs, (4) Layout animations and shared elements, (5) Drag/swipe gestures, (6) Micro-interactions, (7) Ensuring prefers-reduced-motion accessibility. Triggers: animate, animation, easing, spring, transition, motion, layout, gesture, drag, swipe, reduced motion, framer motion.