Web & Frontend
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
-
gabrielmoreira Skill Glean Security BasicsToken security: Indexing tokens have write access -- never expose in frontend. Trigger: "glean security basics", "security-basics".
17 -
gabrielmoreira Skill Audit Prep AssistantPrepares codebases for security review using Trail of Bits' checklist. Helps set review goals, runs static analysis tools, increases test coverage, removes dead code, ensures accessibility, and generates documentation (flowcharts, user stories, inline comments). Use when preparing your own codebase to be audited by someone else, getting a repository review-ready before an external security review, deciding what to fix before auditors start, or asking what assessors need from a project. For understanding unfamiliar code you are about to audit, use audit-context-building instead.
17 -
gabrielmoreira Bundle Bio Data Visualization Interactive VisualizationBuild interactive HTML/web visualizations with plotly (Python/R), bokeh (Python), and gganimate/plotly frames for animation, with awareness of current Kaleido static-export model (post-orca-EOL), HTML file-size bloat, and the limits of interactive-only output for journal submission. Use when producing zoomable/hoverable plots for notebook EDA, supplementary HTML, dashboards, or animated time-course / iteration visualizations.
17 -
gabrielmoreira Bundle Domain Identification GroupingGroups existing components into logical business domains to plan service-based architecture. Use when asking "which components belong together?", "group these into services", "organize by domain", "component-to-domain mapping", or planning service extraction from an existing codebase. Do NOT use for identifying new domains from scratch (use domain-analysis) or analyzing coupling (use coupling-analysis).
17 -
gabrielmoreira Skill Accessibility TestingWCAG 2.1/2.2 audit, axe, Lighthouse, manual testing, screen reader testing, and remediation
17 -
gabrielmoreira Skill Gameobject Component DestroyDestroy one or more Components from a target GameObject. Missing (null) components are skipped — they cannot be destroyed. Use 'gameobject-find' and 'gameobject-component-get' to identify the components first.
17 -
gabrielmoreira Skill Seaborn Statistical PlotsStatistical visualization on matplotlib with native pandas support. Auto aggregation, CIs, grouping for distributions (histplot, kdeplot), categorical (boxplot, violinplot), relational (scatterplot, lineplot), regression (regplot, lmplot), matrix (heatmap, clustermap), grids (pairplot, FacetGrid). Use for quick statistical summaries; matplotlib for fine control; plotly for interactive HTML.
17 -
gabrielmoreira Bundle Scanning AccessibilityValidate WCAG compliance and accessibility standards (ARIA, keyboard navigation). Use when auditing WCAG compliance or screen reader compatibility. Trigger with phrases like "scan accessibility", "check WCAG compliance", or "validate screen readers".
17 -
gabrielmoreira Bundle Vercel Webhooks EventsImplement Vercel webhook handling with signature verification and event processing. Use when setting up webhook endpoints, processing deployment events, or building integrations that react to Vercel deployment lifecycle. Trigger with phrases like "vercel webhook", "vercel events", "vercel deployment.ready", "handle vercel events", "vercel webhook signature".
17 -
gabrielmoreira Bundle Regulatory Deal Card Generator Patrick MunroGenerates standalone interactive HTML "deal cards" that translate complex regulations into negotiation-ready reference tools, systematically distinguishing mandatory obligations from negotiable implementation choices. Use when the user needs an interactive regulatory guide for (1) contract negotiation support, (2) client education or internal training, (3) regulatory briefings for commercial stakeholders, or (4) structured comparison between required and flexible compliance paths. Primary focus on EU digital regulation (Data Act, AI Act, CRA, DORA, NIS2, GDPR) but the structural pattern transfers to any regulation where separating hard obligations from implementation choice is the point. Supports bilingual output where the jurisdiction calls for it.
17 -
gabrielmoreira Skill React State ManagementMaster modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
17 -
gabrielmoreira Skill Tres Wallets UploadUpload and onboard multiple on-chain wallets or exchange accounts into Tres Finance. Use this skill whenever the user wants to add wallets, onboard wallets, import wallets, upload wallet addresses, ingest wallets, or connect exchanges into Tres — whether from a file (CSV/Excel) or by typing them manually. This skill guides Claude through the full flow: wallet type selection → input collection → validation → preview with editable HTML table → exchange credential collection (if exchange) → user confirmation → batch creation via the TRES MCP API. Always trigger this skill for wallet onboarding, wallet data ingestion, or any request to "add wallets to Tres".
17 -
gabrielmoreira Skill Vercel DeploymentsDeploy frontend and full-stack apps on Vercel with previews, edge functions, environment promotion, and production guardrails. Use when shipping Next.js, SvelteKit, or static sites with zero-config CI/CD.
17 -
gabrielmoreira Bundle Bio Atac Seq Differential AccessibilityIdentify differentially accessible chromatin regions across conditions using DiffBind, csaw, DESeq2, or edgeR. Use when comparing ATAC-seq accessibility between treatment groups, choosing between consensus-peak vs sliding-window approaches, picking the correct normalization (full library vs reads-in-peaks), correcting batch with SVA/RUVseq, or interpreting log2FC and FDR thresholds in a chromatin context.
17 -
gabrielmoreira Skill Component Design SystemsBuilding and maintaining scalable component libraries, design tokens, accessibility, and cross-team collaboration patterns
17 -
gabrielmoreira Bundle Frontend Dev GuidelinesFrontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
17 -
gabrielmoreira Skill Gameobject Component List AllList the fully-qualified C# type names of every concrete `UnityEngine.Component` subclass available in the project. Paginated (default 5/page, max 500). Use this to find a valid `componentName` for 'gameobject-component-add'.
17 -
gabrielmoreira Skill Algolia Security BasicsApply Algolia security best practices: API key scoping, secured API keys, frontend vs backend key separation, and key rotation. Trigger: "algolia security", "algolia API key security", "secure algolia", "algolia secrets", "algolia key rotation", "algolia secured key".
17 -
gabrielmoreira Bundle Engineer Design DiagramGenerate production-grade engineering design diagrams (architecture, sequence, delta, drift) as self-contained dark-themed HTML files with accessible inline SVG. Grounds every diagram in real repo topology via DCI — package manifests, docker-compose, k8s, terraform, import graph. Four modes: generate from a live repo, diff a PR, trace a stack into a sequence diagram, or watch for drift against a fingerprint. Semantic OKLCH palette; Mermaid fallback for large graphs. Use when visualizing system architecture, reviewing a PR for structural change, diagnosing an incident from a trace, onboarding to a codebase, or detecting architectural drift. Trigger with "/design:generate", "/design:diff", "/design:trace", "/design:watch", "draw the architecture", "diagram this PR", "engineer design diagram", or "architecture diagram".
17 -
gabrielmoreira Bundle Granola Webhooks EventsBuild event-driven automations with Granola's Zapier webhook triggers. Use when creating real-time notification systems, processing meeting events, or building custom integrations that react to Granola note creation. Trigger: "granola webhooks", "granola events", "granola triggers", "granola real-time", "granola event-driven".
17 -
gabrielmoreira Bundle Managing Snapshot TestsCreate and validate component snapshots for UI regression testing. Use when performing specialized testing. Trigger with phrases like "update snapshots", "test UI snapshots", or "validate component snapshots".
17 -
gabrielmoreira Skill Mbse ArchitectureUse this skill for the architecture phases of an MBSE workflow in MATLAB, when writing idempotent buildXxx.m scripts that produce a three-layer RFLPV architecture (Functional, Logical, Physical) with interface dictionaries, stereotype profiles, allocation sets, and requirements Implement links. Trigger for defining stereotype properties, functional-to-logical / logical-to-physical allocation, mapping requirements to components via slreq Implement links, or running quantitative roll-up analysis on the architecture. Do NOT trigger for ad-hoc structural edits to an already-built System Composer model (adding one component, rewiring a port) — use `building-simulink-models` with `model_edit` for that. Works alongside the `system-composer` skill for detailed SC API patterns.
17 -
gabrielmoreira Skill Project Setup Info LocalComprehensive setup steps to help the user create complete project structures in a VS Code workspace; this tool is designed for full project initialization and scaffolding, not for creating individual files. When to use this tool: user wants to create a new complete project from scratch; setting up entire project frameworks (TypeScript projects, React apps, Node.js servers, etc.); initializing Model Context Protocol (MCP) servers with full structure; creating VS Code extensions with proper scaffolding; setting up Next.js, Vite, or other framework-based projects; user asks for "new project", "create a workspace", "set up a [framework] project"; need to establish a complete development environment with dependencies, config files, and folder structure. When NOT to use this tool: creating single files or small code snippets; adding individual files to existing projects; making modifications to existing codebases; user asks to "create a file" or "add a component"; simple code examples or demonstrations; debugging
17 -
gabrielmoreira Bundle Detecting Indirect Prompt InjectionDetect and defend against indirect prompt injection hidden in web pages, documents, and images consumed by an agent, via content extraction (HTML/PDF/OCR), normalization, and scanning with LLM Guard's PromptInjection scanner or Hugging Face Prompt Guard 2. Use when an agent ingests untrusted external content and you need to screen it for injected instructions before the LLM processes it.
17 -
gabrielmoreira Skill Diagnosing Stacktrace SymbolicationHelp users debug PostHog Error Tracking stack-trace symbolication for any supported platform — JavaScript/TypeScript web, React Native (Hermes), Android (Proguard / R8), or iOS / macOS (dSYM). The PostHog symbol-set lookup flow is universal across platforms; build-tool and artifact details live in per-platform references (JavaScript is fleshed out, others come as we encounter them). Use when stack frames stay minified or obfuscated after symbols are uploaded, PostHog symbol sets show last_used but frames are not readable, chunk IDs or dSYM UUIDs do not match, "Token not found" appears, uploaded source maps / dSYMs / Proguard mappings look empty, or bundler / symbol-upload configuration needs troubleshooting.
17 -
gabrielmoreira Bundle Syncfusion Maui Toolkit PickerImplements Syncfusion .NET MAUI Picker (SfPicker) control. Use when working with picker controls, item pickers, selection pickers, multi-column pickers, or dialog pickers in .NET MAUI applications. This skill covers installation, configuration, modes (Default, Dialog, RelativeDialog), header/footer customization, column handling, data binding, events, and accessibility.
17 -
gabrielmoreira Skill Software LocalisationImplements production-grade i18n/l10n for React, Vue, Angular, and Next.js with ICU format and RTL support. Use when setting up or debugging localisation.
17 -
gabrielmoreira Skill Experiment Detail ComparatorCompare experimental method details between two Zotero PDF papers, identify protocol differences (ratios, dosages, timing, conditions), search supporting literature to explain why they differ, and generate an HTML report. Use when you need a parameter-level comparison of two methods and evidence-backed reasons for discrepancies.
17 -
gabrielmoreira Bundle Component Identification SizingMaps architectural components in a codebase and measures their size to identify what should be extracted first. Use when asking "how big is each module?", "what components do I have?", "which service is too large?", "analyze codebase structure", "size my monolith", or planning where to start decomposing. Do NOT use for runtime performance sizing or infrastructure capacity planning.
17 -
gabrielmoreira Skill Nextjs On CloudflareBuild, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between vinext and OpenNext, or setting up vinext for Workers. For setup, migration, or deployment, install vinext's upstream skills with `npx skills add cloudflare/vinext` if missing, then read and follow the applicable skill and docs.
17 -
gabrielmoreira Bundle Neb Irc Activation EnergyNEB-IRC activation energy pipeline for reaction barriers using GFN2-xTB and pysisyphus. Optimize reactant and product geometries, run CI-NEB path search, optimize the transition state with a Hessian, verify with IRC (one imaginary mode, endpoints matching reactant/product, single NEB maximum), and report the electronic and Gibbs barriers. Use when you need a transition state, reaction barrier, activation energy, minimum energy path, or intrinsic reaction coordinate. Covers reactant/product atom-ordering pitfalls, feasibility sizing for single-core runs, and thermochemistry corrections. Renders an IRC energy-profile plot and an animated TS imaginary-mode HTML viewer. For 2D reaction scheme drawing use rdkit-chemdraw-cdxml.
17 -
gabrielmoreira Skill Prism UIImplement a complete UI screen or feature from a Form visual spec. Use when asked to "build a page", "implement this screen", "build the frontend for this feature", or "create this UI".
17 -
gabrielmoreira Skill Anima Performance TuningOptimize Anima code generation performance with caching, parallelism, and output tuning. Use when reducing generation latency, optimizing batch component generation, or improving generated code quality for production use. Trigger: "anima performance", "anima slow", "anima optimization", "anima caching".
17 -
gabrielmoreira Bundle Apify Deploy IntegrationDeploy Apify Actors and integrate scraping into external applications. Use when deploying an Actor to the platform, integrating Actor results into a web app (Next.js, Express), wiring webhooks, or scheduling scraping pipelines. Trigger with "deploy apify actor", "apify Vercel integration", "apify production deploy", "integrate apify results", "apify API endpoint".
17 -
gabrielmoreira Skill Apple Notes Install AuthSet up macOS automation access for Apple Notes via AppleScript, JXA, and Shortcuts. Use when configuring accessibility permissions, setting up osascript access, or initializing Apple Notes automation on macOS. Trigger: "setup apple notes", "apple notes automation", "apple notes permissions".
17 -
gabrielmoreira Bundle Vercel Upgrade MigrationUpgrade Vercel CLI, Node.js runtime, and Next.js framework versions with breaking change detection. Use when upgrading Vercel CLI versions, migrating Node.js runtimes, or updating Next.js between major versions on Vercel. Trigger with phrases like "upgrade vercel", "vercel migration", "vercel breaking changes", "update vercel CLI", "next.js upgrade on vercel".
17
Frequently asked questions
What are Web & Frontend agent skills?
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
Which Web & Frontend skills are most installed?
Popular Web & Frontend skills on SkillMD right now include glean-security-basics, audit-prep-assistant, bio-data-visualization-interactive-visualization. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Web & Frontend skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.