UI Components
Code-based UI component generation and styling
Uses and selection guide
Use these skills to build and refine interfaces. Compare framework support, keyboard interaction and responsive behavior; test generated components with real content at both narrow and wide viewport sizes.
implementing-mcp-ui-apps
by PostHog
'Guide for adding MCP UI apps — interactive visualizations that render tool results in MCP clients like Claude Desktop. Use when adding a new detail or list view for an MCP tool, creating view components in products/*/mcp/apps/, or linking tools to UI apps via YAML.'
survey-sdk-audit
by PostHog
Audit PostHog survey SDK features and version requirements
visualizing-change-over-time
by PostHog
Helps PostHog engineers and agents pick the right chart when a request is about visualizing change over time, before/after comparisons, or period-over-period movement while building UI with @posthog/quill-charts (dashboards, reports, the mcp_analytics frontend, custom visualizations). Use when a user asks how something "changed", "moved", "grew", "dropped", "improved", or "regressed" between two points or periods, or mentions "before/after", "period over period", "week over week", "delta", "slope graph", "slopegraph", or comparing many series across two snapshots. Surfaces both the SlopeChart quill component and the native ChartDisplayType.SlopeGraph insight display as options.
building-html-canvases
by PostHog
Author a PostHog canvas with semantic HTML, CSS, and direct browser APIs — documents, articles, generative graphics, 2D canvas and WebGL experiences, and focused experiments where React components add no useful structure. Use after building-canvases has routed a canvas request to a plain-HTML/browser-API implementation. Covers the thin component wrapper the current runtime requires, styling and theming without Quill, drawing surfaces, and animation/cleanup patterns.
building-product-empty-states
by PostHog
Guide for adding a product setup empty state — the skippable first-run screen a product scene shows until real data arrives, built on the shared ProductEmptyState component. Use when adding an empty state or first-run/setup screen to a product scene, declaring emptyState on a SceneExport, writing a product setup-status detection logic, building an animated example-data preview widget, or migrating away from the deprecated ProductIntroduction component. Covers the productSetupStatusLogic single-layer contract, real-data detection rules, local-only skip semantics, wizard commands, and design tokens.
building-canvases
by PostHog
Create or edit a PostHog freeform canvas — a sandboxed browser application (data board, document, form, small tool, graphics experiment) stored in PostHog and rendered by the desktop/web app. Use when a task asks to build, generate, update, or fix a standalone canvas app, or when a freeform canvas id is given as the publish target. For grid/home canvases, widget placements, or reusable components, use composing-grid-canvases instead. Covers resolving or creating the target canvas, choosing an implementation approach (React + Quill vs plain HTML/browser APIs), the read → edit → validate → publish → build loop, and which companion canvas skills to load for the details.
placing-product-frontend-code
by PostHog
Decide which tree a frontend file belongs in — products/<name>/frontend/ or frontend/src/scenes/<name>/ — and explain why the boundary is real rather than stylistic. Use when adding a new scene, component, or logic file for a product; when creating a new directory under frontend/src/scenes/; when a product has UI in both trees and you need to know which side to extend; or when moving a scene into its product. Covers the merge-queue lane cost of the split, the measurement showing a dependency graph cannot substitute for the path signal, and a report script that shows how far each product's move has gone.
writing-kea-logics
by PostHog
Guide for writing or reviewing PostHog kea logic files (*Logic.ts / *Logic.tsx). Use when creating a new logic, adding actions/reducers/selectors/listeners/loaders/forms/router bindings, choosing between reducer vs selector vs cache, deciding between listeners and kea-subscriptions, wiring React with useValues/useActions/BindLogic, or onboarding to kea conventions. Read keajs.org for upstream API; this skill captures PostHog-specific conventions and idioms.
improve-codebase-architecture
by mattpocock
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
build-mcp-app
by anthropics
This skill should be used when the user wants to build an "MCP app", add "interactive UI" or "widgets" to an MCP server, "render components in chat", build "MCP UI resources", make a tool that shows a "form", "picker", "dashboard" or "confirmation dialog" inline in the conversation, or mentions "apps SDK" in the context of MCP. Use AFTER the build-mcp-server skill has settled the deployment model, or when the user already knows they want UI widgets.
gpt-taste
by Leonxlnx
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
claude-automation-recommender
by anthropics
Analyze a codebase and recommend Claude Code automations (hooks, subagents, skills, plugins, MCP servers). Use when user asks for automation recommendations, wants to optimize their Claude Code setup, mentions improving Claude Code workflows, asks how to first set up Claude Code for a project, or wants to know what Claude Code features they should use.
cmux-custom-sidebar
by manaflow-ai
"Build a custom cmux sidebar from a plain-language request. Use when the user asks for a custom sidebar, a sidebar that shows their workspaces/tabs/PRs/clock, a vibe-coded sidebar, or anything involving files in ~/.config/cmux/sidebars/. Covers authoring the interpreted SwiftUI-style file, enabling the beta flag, selecting it, and iterating with hot reload."
n8n:design-system
by n8n-io
Guidelines on using Design System styles and components. Use when working on .vue files in packages/frontend. Triggers for tasks that include component architecture, styling, UI changes, or feature work.
n8n:experiments
by n8n-io
Guides work on packages/frontend/editor-ui experiments. Use when creating, extending, wiring, testing, reviewing, or retiring editor-ui experiments, PostHog feature flags, experiment key indexes, variants, stores/composables, persisted experiment state, or experiment telemetry.
n8n:conventions
by n8n-io
Quick reference for n8n patterns. Full docs /AGENTS.md
storybook
by langfuse
Use when writing or reviewing Storybook stories (.stories.tsx) for React components.
frontend-large-feature-architecture
by langfuse
Architect large or state-heavy Langfuse frontend features. Use for virtualized lists, large tables, controllers, Zustand stores, row selection, high-frequency state, rendering performance, or before adding useEffect, useMemo, useCallback, or form defaults derived from loaded data.
vercel-composition-patterns
by langfuse
React composition patterns that scale. Use when refactoring components with
refactor-react-effects
by langfuse
Refactor avoidable React useEffect usage in Langfuse frontend code. Use when adding, reviewing, or removing effects; initializing forms or local UI state from query data; synchronizing client and server state; moving mutations or async workflows out of components; cleaning every effect from a frontend submodule; or reviewing whether an effect has a valid external-system owner.
vercel-react-best-practices
by langfuse
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
react-component-guidelines
by langfuse
Guidelines for writing React components. Use this when creating a new react component.
react-component-cleaner
by langfuse
Use this skill to clean up a React component. Only use this skill when instructed to do so by the user.
vercel-composition-patterns
by open-metadata
React composition patterns that scale. Use when refactoring components with