Web & Frontend

gabrielmoreira Skill

Developer onboarding guide that composes architecture mapping, tooling review, and agentic setup review with setup, troubleshooting, and next-steps agents to produce a comprehensive guide at .turbo/onboarding.md and .turbo/onboarding.html. Use when the user asks to "onboard me", "onboard to this project", "generate onboarding guide", "new developer guide", "how do I get started", or "help me ramp up".

gabrielmoreira Bundle

Odoo 16 development reference for Python models and ORM (search, domain, read_group, compute fields), XML/CSV data and views, OWL/JS client code, QWeb reports, security (ACL, record rules, groups), cron and server actions, migrations and module upgrades, tests, i18n, and performance. Use this skill whenever work involves Odoo 16 or custom addons—even if the user only pastes a traceback, mentions addons/ or __manifest__.py, describes form/tree/kanban/XML errors, HTTP controllers, or business rules on models—including building features, fixing bugs, refactoring, or reviewing addon code. Includes CSS/SCSS asset authoring and review for Odoo addons.

gabrielmoreira Bundle

Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase. Installs react-leaflet and a Map component, then renders the map for the chosen dataset. Use when a dataset's data is geographic and a map view is needed alongside the showcase's default metadata and download.

gabrielmoreira Skill

Design component architecture, REST API contracts, and data models (Pydantic schemas) before implementation. Use when planning how to build a feature, defining endpoints, or modeling data. Trigger on "design the architecture", "design the API", "data model", "how should I structure this feature".

gabrielmoreira Bundle

Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.

gabrielmoreira Skill

Use when the user has a coding or engineering prompt and wants it refined into a detailed, executable plan before any code is written — the planning stage of a prompt → plan → execute → debug pipeline. It decomposes the prompt from first principles (objective, end state, environment, building blocks, tools, packages), breaks the work into PR-sized tasks each tied to a component with its files, tests, and dependencies, orders them topologically, splits each into atomic subtasks, then a separate principal-engineer agent critiques the plan for alignment, coverage, sizing, and executability; it revises until the critique passes, emitting a plan.md layout and a structured tasks.json that a junior engineer or a smaller model can execute correctly. Not for executing, scaffolding, or debugging the plan (those are downstream loops), and not for research proposals or experiment plans.

gabrielmoreira Skill

Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.

gabrielmoreira Bundle

Builds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR/SSG projects, sets up Pinia stores, scaffolds Quasar/Capacitor mobile apps, implements PWA features, and optimises Vite builds. Use when creating Vue 3 applications with Composition API, writing reusable composables, managing state with Pinia, building hybrid mobile apps with Quasar or Capacitor, configuring service workers, or tuning Vite configuration and TypeScript integration.

gabrielmoreira Bundle

Embeds Zoom Meeting SDK Web Client View through the ZoomMtg singleton: system check, WASM preload, init/join with passWord (capital W), and inMeetingServiceListener. Use for full-page Zoom meeting embeds or debugging blank-screen, black-overlay, and join-payload failures. Not for Zoom Component View custom tile layouts or Zoom Video SDK canvases.

gabrielmoreira Skill

Writes and debugs Detox gray-box E2E tests for React Native (Jest-circus, .detoxrc.js, testID matchers, device sync). Use when authoring, running, configuring, or fixing flaky Detox tests on iOS simulators or Android emulators. Not for web or hybrid browser E2E (browser-automation) and not for YAML-first Maestro suites.

gabrielmoreira Bundle

Builds Expo native modules and views with the Expo Modules API (Swift, Kotlin, TypeScript), including create-expo-module, expo-module.config.json, config plugins, and lifecycle hooks. Use when adding native functionality, native views, or platform support to an Expo module. Not for Expo Router screens, JS-only Expo app features, or React Native Turbo Modules outside the Expo Modules API.

gabrielmoreira Skill

Indexes SKILL.md trees by reading name and description frontmatter, inferring categories, and emitting README marker tables, JSON, or standalone HTML. Use when generating or refreshing a skills catalog, README skills table, or skills-list embed. Not a /create-skill authoring or quality-refresh pass. Never invent missing YAML fields, nest one skill under another, or add Co-Authored-By on the optional catalog commit.

gabrielmoreira Bundle

Create and format WeChat Official Account (公众号) articles with proper Markdown-to-WeChat HTML conversion, rich formatting, cover image guidance, and both API and manual publishing workflows.

gabrielmoreira Bundle

Produces Manim Community Edition explainer videos: Scene classes, MathTex, ffmpeg stitch, optional TTS — 3Blue1Brown-style math, algorithms, and architecture diagrams. Use when the user wants programmatic math/technical animation with Manim. Not for Remotion/React video (remotion-video), character cinema (Blender/AE), or interactive apps.

gabrielmoreira Skill

Authors and reviews 2026 Baseline HTML: document head, semantic landmarks, native dialog/popover/invoker commands, web components, forms, WCAG 2.2, JSON-LD, loading/CLS, and HTML security (CSP/SRI). Use when writing or auditing markup rather than CSS or framework state. Not for CSS layout/animation (modern-css), React/Vue architecture, or bundler config.

gabrielmoreira Skill

Generate an HTML coverage report for all Go tests via bazel + genhtml, then open it in the browser.

gabrielmoreira Skill

Configure file watching hooks to auto-react to config changes, env file updates, and dependency modifications. Use to set up reactive workflows.

gabrielmoreira Bundle

Write, review, and run TypeScript/React tests for this Next.js 16 App Router project. Use whenever writing or modifying *.test.ts or *.test.tsx files, adding test coverage to components, hooks, Server Actions, or utilities, setting up Vitest configuration, or asked about testing strategy. Covers Vitest (the project's test runner, not Jest), React Testing Library v16, accessibility-first queries, user-event for interactions, AAA structure, parameterized tests with describe.each and it.each, Prisma mock patterns, next/navigation and next/headers mocking, and the RSC boundary testing strategy. Do NOT use for Playwright end-to-end tests or performance benchmarks.

gabrielmoreira Bundle

Audit the developer experience of a product, SDK, docs site, or SKILL.md by dropping multiple Claude subagents at it with only a tiny task prompt and real tools (WebFetch, Bash, Write). Agents must discover the docs themselves, install deps, ask for credentials if needed, and attempt real execution. The skill captures each agent's trace — tool calls, retries, wall time, errors — and scores on Setup Friction, Speed, Efficiency, Error Recovery, and Doc Quality, then emits an HTML report with an A–F grade and concrete fixes. Use when the user asks to audit agent experience, test a skill, audit docs for agents, check if a SDK is agent-friendly, validate a SKILL.md, measure agent DX, or benchmark how painful onboarding is for an AI agent. Triggers: 'audit agent experience', 'test this skill', 'audit docs for agents', 'is my SDK agent-friendly', 'run a DX audit', 'agent experience test', 'test my docs', 'how do agents do with my product'.

gabrielmoreira Bundle

React frontend patterns for Opik. Use when working in apps/opik-frontend, on components, state, or data fetching.

gabrielmoreira Skill

Build a self-contained local prototype at .turbo/prototypes/<slug>.html, drive it, and hand it to the user to settle unknowns that prose cannot answer. Use when the user asks to "prototype this", "build a prototype", "mock this up", "show me what it would look like", "let me try the interaction first", or when a decision waits on seeing a surface or using it firsthand.

gabrielmoreira Skill

Cross-platform mobile development with React Native and Expo. Use when building iOS/Android apps with JavaScript/TypeScript, implementing native features, or optimizing mobile performance.

gabrielmoreira Skill

Backport a merged Next.js pull request from canary to a previous release branch such as next-16-2. Use when the user asks to backport, cherry-pick, or open a backport PR from a PR number to an older Next.js version. Covers finding the merged PR commit, creating a backport branch from the target release branch, cherry-picking from canary, validating, and opening the PR with the release branch as the base.

gabrielmoreira Skill

Maintain @next/rspack-core and @next/rspack-binding packages. Use when editing rspack/package.json, rspack/crates/binding/Cargo.toml, rspack/rust-toolchain.toml, or packages/next-rspack/package.json. Covers upgrading @rspack/core npm version, rspack_* crate versions, Rust toolchain version, building and linking for local testing, and NEXT_RSPACK environment variable usage. Does NOT apply to root rust-toolchain.toml (that's for Turbopack).

gabrielmoreira Bundle

This skill should be used when the user asks to "update documentation for my changes", "check docs for this PR", "what docs need updating", "sync docs with code", "scaffold docs for this feature", "document this feature", "review docs completeness", "add docs for this change", "what documentation is affected", "docs impact", or mentions "docs/", "docs/01-app", "docs/02-pages", "MDX", "documentation update", "API reference", ".mdx files". Provides guided workflow for updating Next.js documentation based on code changes.

gabrielmoreira Skill

Generates technical guides that teach real-world use cases through progressive examples. **Auto-activation:** User asks to write, create, or draft a guide or tutorial. Also use when converting feature documentation, API references, or skill knowledge into step-by-step learning content. **Input sources:** Feature skills, API documentation, existing code examples, or user-provided specifications. **Output type:** A markdown guide with YAML frontmatter, introduction, 2-4 progressive steps, and next steps section.

gabrielmoreira Skill

Integrate AuthOS into browser, React, Vue, or plain TypeScript applications using @drmhse/sso-sdk and the AuthOS React/Vue adapters. Use when adding OAuth redirects, password login, magic links, passkeys, MFA callback handling, token refresh, or frontend session state.

gabrielmoreira Bundle

Run end-to-end web quality audits with Playwright and Lighthouse using existing project scripts first. Use when the user says /tester, e2e test, smoke test, Playwright audit, Lighthouse audit, performance audit, accessibility audit, dark mode audit, mobile audit, or asks for 100/100 Lighthouse improvement guidance.

gabrielmoreira Bundle

Pattern: create or update WordPress block patterns (starter pages, templates, template parts, Query Loop layouts), review pattern registration, block markup, categories, accessibility, or i18n/escaping, or improve pattern design quality. Route custom blocks to wp-block-development; route frontend interactivity to wp-interactivity-api.

gabrielmoreira Bundle

Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", or "visualize data".

gabrielmoreira Bundle

Write new blog articles from scratch optimized for Google rankings and AI citations. Generates full articles with template selection, answer-first formatting, Key Takeaways summary box, information gain markers, evidence-backed explanations, sourced statistics, Pixabay/Unsplash images, built-in SVG chart generation, optional FAQ sections, internal linking zones, and proper heading hierarchy. Supports MDX, markdown, and HTML output. Use when user says "write blog", "new blog post", "create article", "write about", "draft blog", "generate blog post".

gabrielmoreira Bundle

Designs one-off local HTML artifacts — landing pages, decks, prototypes, component labs, motion studies — for CLI/API agents that lack hosted Claude Design. Use when the user wants a designed artifact with process and taste. Not for DESIGN.md token specs (design-md), brand-clone vocab (popular-web-designs), or 2-3 throwaway layout variants (sketch).

gabrielmoreira Skill

Design UI, build components, write Playwright E2E tests, run WCAG accessibility audits, and do visual review. Use when building or testing frontend/UI work. Trigger on "build a component", "frontend", "E2E test", "accessibility audit", "a11y", "visual review", "make this look good".

gabrielmoreira Skill

Stack-specific security implementation guidance (backend, frontend, database, infrastructure, operations) with auto-detection from your changes. Use when implementing a feature securely or hardening code as you write it. Trigger on "how do I secure this", "security best practices", "is this secure", "harden this". For scanning existing code use /security-verify.

gabrielmoreira Skill

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/.

gabrielmoreira Skill

Build a self-contained local prototype at .turbo/prototypes/<slug>.html, drive it, and hand it to the user to settle unknowns that prose cannot answer. Use when the user asks to "prototype this", "build a prototype", "mock this up", "show me what it would look like", "let me try the interaction first", or when a decision waits on seeing a surface or using it firsthand.