For frontend developers
48 skills // React, Vue, Svelte, CSS, UI engineering

- Component scaffolds with tests included
- Accessibility audits on the first pass
- Design-system tokens that survive refactors
- Migration helpers when the framework changes again
Write the component once. Reuse for the next decade.
Pair a remote AI agent with your browser. (gstack)
Pull data from a web page. (gstack)
Codify the most recent successful /scrape flow into a permanent browser-skill on disk. (gstack)
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.
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
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/.
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".
Frontend standards for atopile extension webviews: architecture, contracts, design system, and testing workflow.
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.
Core runtime behavior for the atopile sidebar agent: identity, persistence model, execution rules, and tool recipes.
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.
Authoritative ato authoring and review skill: language reference, stdlib, design patterns, and end-to-end board design workflow.
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.
Audit changed code for security sharp edges — dangerous defaults, type confusion, and silent failures
Archive a completed change
Update an existing OpenSpec change from external context
当用户要求重构代码(提取组件、合并重复逻辑、重命名变量、优化结构)时触发。提供重构安全检查清单,防止丢失原始上下文。
专业级 UI/UX 设计规范,需要高质量界面设计时手动触发或描述"设计感/专业UI"时自动触发。覆盖视觉层次、配色体系、排版节奏、交互微动效、响应式适配等。日常前端开发由 frontend-dev skill + frontend-design 插件覆盖。
Review changed code for reuse, quality, and efficiency, then fix any issues found. Also scans project files for size limit violations.
当编写新模块、设计接口、重构代码或代码审查时触发。提供经典模块化六原则检查清单(大小适中/调用深度/扇入扇出/边界清晰/作用域内聚/可预测性),适用于 PR/Review/新模块设计场景。
当重构涉及字段映射(dataIndex、枚举映射、类型转换)时触发。防止字段名推测错误,确保字段映射的正确性。
当用户执行 /ruanzhu 命令或请求生成软著源代码文档时触发。提供软著源代码 DOCX 生成规范。
前端开发规范,包含 Vue 3 编码规范、UI 风格约束、TypeScript 规范等
Calculate mass percentages and stoichiometric ratios for chemical reactions and compound compositions.
Query PharmGKB (clinPGx) for pharmacogenomic clinical annotations — how a variant affects drug response, dosing, and adverse reactions.
智能笔记与流程图绘制工具(优化版-无权限读取)。根据用户提供的内容,自动生成精美的可视化笔记和流程图,支持多种风格(手写笔记、思维导图、流程图等),并导出为图片。使用内置模板,无需读取文件权限。适用于:(1) 学习笔记可视化,(2) 知识梳理与总结,(3) 流程图绘制,(4) 概念解释图表
智能软件著作权申请材料生成工具。自动分析项目源码,生成符合软著申请要求的软件说明书和源代码文档。支持关键词搜索、智能源码分析、格式化输出和PDF导出。
为任何角色创建独立线程并开始工作
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.
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.
Guided 3D part creation — describe what you want to build
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.
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.
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.
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'.
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.
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.
Habilidad para búsqueda semántica de canales y mensajes de Slack. Se activa con solicitudes como 'Buscar en Slack', 'Encontrar canales', 'Buscar mensajes'.
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.
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.
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'.
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.
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.
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.
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'.
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".
Use after execution to evaluate code quality across correctness, security, performance, and architecture
Extract design system from code, generate reference package, persist as knowledge assets