UI Components
Code-based UI component generation and styling
1k-ui-recipes
by OneKeyHQ
Reference-only catalog of UI workaround recipes. Do NOT auto-load — invoke ONLY when the user explicitly asks for "1k-ui-recipes" or a specific recipe by name (iOS tab bar scroll offset, collapsible tab horizontal scroll, Android bottom tab touch intercept, keyboard avoidance, iOS overlay navigation freeze, web keyboardDismissMode, iOS modal Fabric frame animation, Android background thread timers/microtasks).
1k-implementing-figma-designs
by OneKeyHQ
Implements Figma designs 1:1 using OneKey component library (还原设计稿).
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.'
applying-brand-guidelines
by anthropics
This skill applies consistent corporate branding and styling to all generated documents including colors, fonts, layouts, and messaging
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-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.
modal
by lobehub
'LobeHub imperative modal conventions. Use when creating or migrating modals, dialogs, popups, confirm flows, ModalHost wiring, createModal, confirmModal, useModalContext, or base-ui modal APIs.'
typescript
by lobehub
'LobeHub TypeScript style and type-safety guide. Use when editing TS/TSX/MTS, fixing types, choosing interface vs type, avoiding any/object, import type, async flow, or ts-expect-error.'
testing
by lobehub
'Vitest testing guide. Use when writing or updating tests, fixing failing tests, improving coverage, debugging test issues, or setting up mocks.'
project-overview
by lobehub
'LobeHub open-source monorepo architecture map. Use when locating code layers, understanding apps/packages/src layout, business stubs, project structure, or onboarding to the repository.'
react
by lobehub
'LobeHub React component conventions. Use when editing TSX UI, choosing base-ui vs @lobehub/ui vs antd, styling with antd-style, component boundaries, local state, layouts, render performance, or memoization.'
1k-architecture
by OneKeyHQ
OneKey monorepo architecture, project structure, package relationships, and import hierarchy rules.
1k-cross-platform
by OneKeyHQ
OneKey cross-platform patterns, platform files, platformEnv, and supported OS/SDK requirements.
block-kit
by openclaw
"Use proactively for structured or interactive Slack replies, and when asked to author or validate native Slack Block Kit JSON."
figma-implement-design
by openai
"Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection."
figma
by openai
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
meme-maker
by openclaw
Search meme templates, suggest formats, and generate local or hosted image memes.
discord
by openclaw
"Discord messaging workflows through OpenClaw's message tool."
solid
by openclaw
Write, refactor, review, or test Solid 2 UI in OpenClaw (Control UI, plugin views, Canvas hosts), including state ownership, native custom elements, overlays, testing, performance, and lessons learned.
react-effects
by coder
Guidelines for when to use (and avoid) useEffect in React components
canvas
by elizaOS
"Display, present, and render HTML content on connected Otto nodes (Mac app, iOS, Android). Show on device, preview on mobile, push to screen, or navigate to a URL on any connected node. Use for games, visualizations, dashboards, interactive demos, and live-reloading development previews. Supports presenting, hiding, navigating, evaluating JavaScript, and capturing screenshots of canvas content across Mac, iOS, and Android devices."
generate-snapshot-tests
by getsentry
Generate snapshot test files for Sentry frontend React components. Use when asked to "generate snapshot tests", "add snapshot tests", "create visual snapshots", "write snapshot tests", "add visual regression tests", or "snapshot this component". Accepts an optional component path or name via $ARGUMENTS.