Skill Index

For frontend developers

48 skills // React, Vue, Svelte, CSS, UI engineering

Illustration for Frontend developers
Write the component once. Reuse for the next decade.
pair-agentOK

Pair a remote AI agent with your browser. (gstack)

gstack104138[skill]
scrapeOK

Pull data from a web page. (gstack)

gstack104138[skill]
skillifyOK

Codify the most recent successful /scrape flow into a permanent browser-skill on disk. (gstack)

gstack104138[skill]
defuddleOK

Extract clean markdown content from web pages using Defuddle CLI, removing clutter and navigation to save tokens. Use instead of WebFetch when the user provides a URL to read or analyze, for online documentation, articles, blog posts, or any standard web page. Do NOT use for URLs ending in .md — those are already markdown, use WebFetch directly.

obsidian-skills33445[skill]
firecrawl-cli-installationOK

Install the official Firecrawl CLI and handle authentication. Package: https://www.npmjs.com/package/firecrawl-cli Source: https://github.com/firecrawl/cli Docs: https://docs.firecrawl.dev/sdks/cli

cli425[skill]
writing-docs

Writes and updates Medusa documentation MDX files for the book, resources, ui, user-guide, and cloud projects. Use when making documentation changes based on code diffs, adding new pages, updating existing content, or updating component examples. ALWAYS load this skill before modifying any MDX file in www/apps/.

medusa34034[skill]
port-widget

Port or introduce an InstantSearch widget or connector-driven feature across this monorepo's JavaScript, React, and Vue flavors. Use when the task is to add a missing wrapper around an existing connector, bring a widget from one flavor to another, or implement a new shared widget end-to-end in `instantsearch.js`, `react-instantsearch`, and `vue-instantsearch`. Triggers include requests like "port X to vue", "add Y to react-instantsearch", "make Z available in all flavors", or "implement the missing InstantSearch wrapper for this connector".

instantsearch4047[skill]
frontend

Frontend standards for atopile extension webviews: architecture, contracts, design system, and testing workflow.

atopile3375[skill]
library

How the Faebryk component library is structured, how `_F.py` is generated, and the conventions/invariants for adding new library modules. Use when adding or modifying library components, traits, or module definitions.

atopile3375[skill]
agent

Core runtime behavior for the atopile sidebar agent: identity, persistence model, execution rules, and tool recipes.

atopile3375[skill]
solver

How the Faebryk parameter solver works (Sets/Literals, Parameters, Expressions), the core invariants enforced during mutation, and practical workflows for debugging and extending the solver. Use when implementing or modifying constraint solving, parameter bounds, or debugging expression simplification.

atopile3375[skill]
ato

Authoritative ato authoring and review skill: language reference, stdlib, design patterns, and end-to-end board design workflow.

atopile3375[skill]
compiler

How the atopile compiler builds and links TypeGraphs from `.ato` (ANTLR front-end → AST → TypeGraph → Linker → DeferredExecutor), plus the key invariants and test entrypoints. Use when modifying the compiler pipeline, grammar, AST visitors, or type resolution.

atopile3375[skill]
spectra-audit

Audit changed code for security sharp edges — dangerous defaults, type confusion, and silent failures

vue-recaptcha895[skill]
spectra-archive

Archive a completed change

vue-recaptcha895[skill]
spectra-ingest

Update an existing OpenSpec change from external context

vue-recaptcha895[skill]
refactor-safety

当用户要求重构代码(提取组件、合并重复逻辑、重命名变量、优化结构)时触发。提供重构安全检查清单,防止丢失原始上下文。

cc-use-exp755[skill]
ui-ux-pro-max

专业级 UI/UX 设计规范,需要高质量界面设计时手动触发或描述"设计感/专业UI"时自动触发。覆盖视觉层次、配色体系、排版节奏、交互微动效、响应式适配等。日常前端开发由 frontend-dev skill + frontend-design 插件覆盖。

cc-use-exp755[skill]
size-check

Review changed code for reuse, quality, and efficiency, then fix any issues found. Also scans project files for size limit violations.

cc-use-exp755[skill]
code-quality-principles

当编写新模块、设计接口、重构代码或代码审查时触发。提供经典模块化六原则检查清单(大小适中/调用深度/扇入扇出/边界清晰/作用域内聚/可预测性),适用于 PR/Review/新模块设计场景。

cc-use-exp755[skill]
field-mapping-safety

当重构涉及字段映射(dataIndex、枚举映射、类型转换)时触发。防止字段名推测错误,确保字段映射的正确性。

cc-use-exp755[skill]
ruanzhu

当用户执行 /ruanzhu 命令或请求生成软著源代码文档时触发。提供软著源代码 DOCX 生成规范。

cc-use-exp755[skill]
frontend-dev

前端开发规范,包含 Vue 3 编码规范、UI 风格约束、TypeScript 规范等

cc-use-exp755[skill]
chemical-mass-percent-calculation

Calculate mass percentages and stoichiometric ratios for chemical reactions and compound compositions.

InnoClaw381[skill]
variant-pharmacogenomics

Query PharmGKB (clinPGx) for pharmacogenomic clinical annotations — how a variant affects drug response, dosing, and adverse reactions.

InnoClaw381[skill]
drawnote-skill

智能笔记与流程图绘制工具(优化版-无权限读取)。根据用户提供的内容,自动生成精美的可视化笔记和流程图,支持多种风格(手写笔记、思维导图、流程图等),并导出为图片。使用内置模板,无需读取文件权限。适用于:(1) 学习笔记可视化,(2) 知识梳理与总结,(3) 流程图绘制,(4) 概念解释图表

ai-agent-team370[skill]
softcopyright

智能软件著作权申请材料生成工具。自动分析项目源码,生成符合软著申请要求的软件说明书和源代码文档。支持关键词搜索、智能源码分析、格式化输出和PDF导出。

ai-agent-team370[skill]
start-task

为任何角色创建独立线程并开始工作

ai-agent-team370[command]
vcad

Create 3D CAD models using vcad MCP tools. Use when the user asks to create 3D parts, mechanical components, enclosures, brackets, gears, or any parametric geometry. Supports primitives, sketch-based operations (extrude, revolve, sweep, loft), booleans, patterns, fillets, shell, assemblies, and export to STL/GLB.

claude-code364[skill]
vcad-step-import

Import and work with STEP files using vcad MCP tools. Use when the user mentions STEP files, .step, .stp, importing CAD from other software (Fusion 360, SolidWorks, Onshape), or converting between CAD formats.

claude-code364[skill]
new-part

Guided 3D part creation — describe what you want to build

claude-code364[command]
vcad

Create 3D CAD models using vcad MCP tools. Use when the user asks to create 3D parts, mechanical components, plates with holes, brackets, or any parametric geometry. Supports primitives (cube, cylinder, sphere, cone), boolean operations, transforms, patterns, and export to STL/GLB.

vcad364[skill]
ui-ux-pro-max

Guía de diseño UI/UX. Soporta 50 estilos, 97 paletas, 57 combinaciones de fuentes y 9 stacks. Se activa con solicitudes como 'Diseñar la interfaz', 'Crear un sistema de diseño', 'Revisión de pantalla', etc.

ai-agent-camp358[skill]
mv-composer

Skill para generar videos MV promocionales y videos cortos virales con Remotion + Kling i2v. Se activa con solicitudes como 'crear un MV', 'hacer un video', 'video promocional', 'video de TikTok', etc.

ai-agent-camp358[skill]
slack-task-manager

Sub-agente para búsqueda en Slack, extracción de TODOs y gestión de tareas. Extrae tareas de múltiples fuentes de datos y las prioriza. Se activa con solicitudes como 'Buscar en Slack', 'Extraer tareas', 'Verificar TODOs', 'Verificar menciones'.

ai-agent-camp358[skill]
sql-queries

Habilidad para escribir SQL preciso y de alto rendimiento en los principales dialectos de almacenes de datos. Se activa con solicitudes como 'Escribir SQL', 'Optimizar consulta', 'Agregar en BigQuery', etc.

ai-agent-camp358[skill]
youtube-clipper

Habilidad para extraer momentos destacados de videos de YouTube/múltiples plataformas usando IA y generar clips con subtítulos bilingües. Se activa con 'Recortar del video', 'Extraer momentos destacados', 'Clips con subtítulos', etc.

ai-agent-camp358[skill]
slack-search

Habilidad para búsqueda semántica de canales y mensajes de Slack. Se activa con solicitudes como 'Buscar en Slack', 'Encontrar canales', 'Buscar mensajes'.

ai-agent-camp358[skill]
video-frame-reader

Habilidad para extraer fotogramas clave de archivos de video, deduplicarlos y optimizarlos, y luego analizar su contenido. Se activa con 'Muéstrame el contenido del video', 'Extraer fotogramas clave', 'Analizar este video', etc.

ai-agent-camp358[skill]
plotly

Skill para crear gráficos interactivos y dashboards con Plotly. Compatible con hover, zoom y desplazamiento. Se activa con solicitudes como 'gráfico interactivo', 'chart con plotly', 'gráfico dinámico', etc.

ai-agent-camp358[skill]
schema-markup

Habilidad que agrega, corrige y optimiza datos estructurados y marcado schema. Se activa con solicitudes como 'Agregar datos estructurados', 'Crear JSON-LD', 'Configurar fragmentos enriquecidos'.

ai-agent-camp358[skill]
lp-designer

Flujo de trabajo para creación de LP/HP. Guía el flujo completo desde entrevista → organización de mensajes → wireframe → diseño en Pencil → implementación HTML → despliegue en Vercel. Se activa con solicitudes como 'crear un LP', 'creación de landing page', 'diseño de HP', 'producción de página web', etc.

ai-agent-camp358[skill]
marimo-notebook

Skill para crear notebooks marimo como archivos Python en el formato correcto. Se activa con solicitudes como 'crear un notebook marimo', 'notebook interactivo', 'notebook de Python', etc.

ai-agent-camp358[skill]
video-editor

Habilidad de edición de video para TikTok/YouTube. Incrusta subtítulos con ffmpeg, aplica efectos Ken Burns, combina escenas y sintetiza audio. Lee instrucciones de edición de scenes.json y produce el video final. También incluye componentes Remotion (para entornos locales). Se activa con 'Editar video', 'Agregar subtítulos', 'Crear video con subtítulos', etc.

ai-agent-camp358[skill]
screenshot-analyzer

Habilidad que genera automáticamente diagnósticos de errores o tutoriales de operación a partir de capturas de pantalla. Se activa con solicitudes como 'Analizar esta captura', 'Verificar el error de pantalla', 'Crear pasos de operación'.

ai-agent-camp358[skill]
team-executor

Lightweight session execution skill. Resumes existing team-coordinate sessions for pure execution via team-worker agents. No analysis, no role generation -- only loads and executes. Session path required. Triggers on "Team Executor".

maestro-flow340[skill]
quality-review

Use after execution to evaluate code quality across correctness, security, performance, and architecture

maestro-flow340[command]
maestro-ui-codify

Extract design system from code, generate reference package, persist as knowledge assets

maestro-flow340[command]