hyperframes-cli: Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes,…; hyperframes: Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo,…; hyperframes-registry: Search, install, and wire registry blocks and components into HyperFrames compositions. Use BEFORE hand-building any named visua…
Updated 2026-09-14 15:47:29 +08:00
chakra-ui-builder: Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable…; chakra-ui-refactor: Review, convert, and improve UI code using Chakra UI v3. Use this skill whenever a user wants to review Chakra UI code for issues, convert plain HTML/CSS,…; chakra-ui-migrate: Migrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compo…
a11y
accessible
ark-ui
chakra-ui
component
css-in-js
dark-mode
design-system
react
react-components
reactjs
styled
ui-components
ui-library
uikit
wai-aria
Updated 2026-09-14 08:42:06 +08:00
plannotator-visual-explainer: Generate self-contained HTML visualizations with Plannotator theming. Use for implementation plans, PR explainers, architecture diagrams, data tables, slide…; plannotator-compound: Analyze a user's Plannotator plan archive to extract denial patterns, feedback taxonomy, evolution over time, and actionable prompt improvements — then produce…; plannotator-setup-goal: Turn an idea or objective into a goal package for /goal. Interviews the user, builds a reviewed fact s…
Updated 2026-09-14 05:45:50 +08:00
fixing-motion-performance: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations…; baseline-ui: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.; fixing-accessibility: Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form err…
Updated 2026-09-13 16:31:49 +08:00
chrome-devtools: Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions,…; chrome-devtools-cli: Use this skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.; a11y-debugging: Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, foc…
Updated 2026-09-13 08:06:24 +08:00
baoyu-post-to-wechat: Posts content to WeChat Official Account (微信公众号) via API or Chrome CDP. Supports article posting (文章) with HTML, markdown, or plain text input, and image-text…; baoyu-image-gen: AI image generation with OpenAI GPT Image 2.5, Azure OpenAI, Google, OpenRouter, DashScope, Z.AI GLM-Image, MiniMax, Jimeng, Seedream, Replicate and Agnes…; baoyu-infographic: Generate professional infographics with 21 layout types and 22 visual styles. Analyzes content, recommends layout×style com…
Updated 2026-09-10 23:13:43 +08:00
Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering…
Updated 2026-09-10 00:05:35 +08:00
ljg-card: Content caster (铸). Transforms text into PNG through precise HTML typography and, when the mold needs it, generated raster imagery. Four molds: -l (default)…; ljg-paper: Explain research papers to readers without a specialist background: what the paper studies, what the authors contribute, how the findings follow, and what the…; ljg-roundtable: 一个议题，一场圆桌：主持人请来 3-5 位真实人物，定义开场，逐轮交锋， 每轮收一张 ASCII 结构图，用户用指令控节奏（可/止/深入此节/引入新人物）， 散场后全文存入 org 笔记。Use when user says "圆桌讨论", "圆桌", "roundtable", "…
Updated 2026-09-09 00:18:30 +08:00
Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.
Updated 2026-08-13 23:05:30 +08:00
Use when editing .tsx/.jsx/.css/.html, React components, pages, routes, forms, styles, or layouts. Also when asked to test, verify, validate, QA, find bugs,…
Updated 2026-05-06 15:58:50 +08:00
excel-automation: >; html-slides: >; ppt-visual: Design presentation visuals and slide layouts. Create visual concepts, suggest graphics, and provide design specifications for impactful PowerPoint slides.; pdf-extraction: Extract text, tables, and metadata from PDFs using pdfplumber; smart-ocr: >; data-analysis: Analyze spreadsheet data, generate insights, create visualizations, and build reports from Excel/CSV data.; stock-analysis: Analyze stocks with fundamental and technical analysis. Suppo…
Updated 2026-01-31 22:03:44 +08:00