UI 组件
基于代码的 UI 组件生成与样式实现
1k-ui-recipes
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
OneKeyHQ
Implements Figma designs 1:1 using OneKey component library (还原设计稿).
implementing-mcp-ui-apps
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
anthropics
This skill applies consistent corporate branding and styling to all generated documents including colors, fonts, layouts, and messaging
building-html-canvases
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
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
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
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
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
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
lobehub
'Vitest testing guide. Use when writing or updating tests, fixing failing tests, improving coverage, debugging test issues, or setting up mocks.'
project-overview
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
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
OneKeyHQ
OneKey monorepo architecture, project structure, package relationships, and import hierarchy rules.
1k-cross-platform
OneKeyHQ
OneKey cross-platform patterns, platform files, platformEnv, and supported OS/SDK requirements.
block-kit
openclaw
"Use proactively for structured or interactive Slack replies, and when asked to author or validate native Slack Block Kit JSON."
figma-implement-design
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
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
openclaw
Search meme templates, suggest formats, and generate local or hosted image memes.
discord
openclaw
"Discord messaging workflows through OpenClaw's message tool."
solid
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
coder
Guidelines for when to use (and avoid) useEffect in React components
canvas
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
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.