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 Accommodation Request 2Summarise what Accommodation Request does in one line. Use when asked to [trigger phrases the user would say]. Produces [the concrete artifact].
17 - gabrielmoreira Skill Frontend Design 10
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics. Do NOT use for design review or audit (use web-design-guidelines or web-quality-audit).
17 - gabrielmoreira Skill Applicationinsights Web TS
Instrument browser/web apps with the Application Insights JavaScript SDK (@microsoft/applicationinsights-web). Use for Real User Monitoring (RUM) — page views, clicks, AJAX/fetch dependencies, exceptions, custom events, and browser-side GenAI agent traces correlated to backend OpenTelemetry traces. Covers SDK Loader Script and npm setup, framework extensions (React, React Native, Angular), Click Analytics, telemetry initializers, and OTel GenAI semantic conventions for agent/tool/model spans emitted from the browser.
17 - gabrielmoreira Skill UI Widget Developer
Build MCP servers for Copilot Chat using the OpenAI Apps SDK or MCP Apps SDK widget rendering support (any language). Use this skill when: - Creating MCP servers that integrate with M365 Copilot declarative agents - Building rich interactive widgets (React + Fluent UI) that render in Copilot Chat - Implementing tools that return structuredContent for widget rendering - Adapting an existing MCP server to support Copilot widget rendering - Setting up devtunnels for localhost MCP server exposure - Configuring mcpPlugin.json manifests with RemoteMCPServer runtime Do NOT use this skill for general agent development (scaffolding, manifests, deployment) — use declarative-agent-developer instead. This skill is ONLY for MCP server + widget development. Triggers: "MCP server for Copilot", "OpenAI Apps SDK", "Copilot widget", "structuredContent", "MCP plugin", "devtunnels MCP", "OAI app", "widget rendering", "UI widget"
17 - gabrielmoreira Skill Accessible Travel Planner 2
Summarise what Accessible Travel Planner does in one line. Use when asked to [trigger phrases the user would say]. Produces [the concrete artifact].
17 - gabrielmoreira Skill Disability Benefit Appeal 2
Summarise what Disability Benefit Appeal does in one line. Use when asked to [trigger phrases the user would say]. Produces [the concrete artifact].
17 - gabrielmoreira Bundle React Best Practices
React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. Do NOT use for component API architecture or composition patterns (use react-composition-patterns instead).
17 - gabrielmoreira Skill Frontend Design React
Frontend Design React Skill
17 - gabrielmoreira Skill Algorithmic Art 2
Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).
17 - gabrielmoreira Skill Disability Disclosure Decision 2
Summarise what Disability Disclosure Decision does in one line. Use when asked to [trigger phrases the user would say]. Produces [the concrete artifact].
17 - gabrielmoreira Skill Nextjs Best Practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
17 - gabrielmoreira Skill Tailwind Patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
17 - gabrielmoreira Skill Expo Tailwind Setup
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
17 - gabrielmoreira Skill Matlab Generate Report
Unified skill for all MATLAB and Simulink report generation tasks. Covers report generation, PDF report, document generation, mlreportgen, Report Generator, template, TitlePage, Chapter, multipage HTML, HTMLPage, html-multipage, custom reporter, customizeReporter, template hole, page header, page border, company style package, branded reporters, buildTemplates, Simulink report, model documentation, slreportgen, block diagram report, model report, subsystem documentation, SystemDiagramFinder, SystemIO, ExecutionOrder, LookupTable, template style, page footer, TemplateSrc, report package, table variants, multiple HTML pages, PDF report generation, Word report, DOM API, FormalTable, BaseTable, Figure, FormalImage, Section.
17 - gabrielmoreira Skill UI A11Y
Audit a component or page for accessibility issues and fix them
17 - gabrielmoreira Skill Frontend Developer
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture.
17 - gabrielmoreira Skill Matlab Design Pcb Transmission Line
Microstrip, stripline, CPW, differential pairs, and crosstalk analysis for impedance-controlled PCB interconnects. TRIGGER: user asks to design or analyze a transmission line (microstrip, stripline, CPW, coplanar, differential pair), extract RLGC or per-unit-length parameters, compute trace impedance, analyze a PCB trace cross-section, or perform crosstalk/coupling analysis. Invoke BEFORE writing code — preferred over RF Toolbox analytical functions (txlineMicrostrip, txlineStripline, txlineCPW). SKIP: EM simulation/S-parameter extraction of an existing component (use matlab-analyze-em), material/stackup definition only (use matlab-manage-pcb-material), building custom non-catalog geometry (use matlab-assemble-pcb-layout), optimization sweeps (use matlab-optimize-pcb-design).
17 - gabrielmoreira Skill Mobile Developer
Develop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization.
17 - gabrielmoreira Skill UI UX Pro Max 2
Comprehensive design guide for web and mobile applications. Use when designing new UI components or pages, choosing color palettes and typography, or reviewing code for UX issues.
17 - gabrielmoreira Bundle Adk Agent Builder
Scaffold production-ready AI agents on Google's Agent Development Kit (ADK): ReAct-style single agents, multi-agent orchestration (Sequential/Parallel/Loop), tool wiring, evaluation, and optional Vertex AI Agent Engine deployment. Use when building, scaffolding, or deploying ADK agents on Google Cloud, or when wiring ADK tools and orchestration patterns. Trigger with "build an ADK agent", "scaffold an agent on ADK", or "deploy to Agent Engine".
17 - gabrielmoreira Skill 3d Web Experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.
17 - gabrielmoreira Skill Webapp Testing 2
To test local web applications, write native Python Playwright scripts.
17 - gabrielmoreira Bundle Playwright Skill 3
IMPORTANT - Path Resolution: This skill can be installed in different locations (plugin system, manual installation, global, or project-specific). Before executing any commands, determine the skill directory based on where you loaded this SKILL.md file, and use that path in all commands below.
17 - gabrielmoreira Skill Fixing Accessibility
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
17 -
tools-only Bundle 979 Skill 4f7d98deAgentic Patterns
7 - gabrielmoreira Skill Nutrient Document Processing 2
Nutrient DWS API を使用してドキュメントの処理、変換、OCR、抽出、編集、署名、フォーム入力を行います。PDF、DOCX、XLSX、PPTX、HTML、画像に対応しています。
17 - gabrielmoreira Skill Nutrient Document Processing 3
使用Nutrient DWS API处理、转换、OCR、提取、编辑、签署和填写文档。支持PDF、DOCX、XLSX、PPTX、HTML和图像文件。
17 -
demerzels-lab Bundle Colorkit 2Expert guidance on ColorKit, a Swift library for advanced color manipulation, conversion, and accessibility.
10 - demerzels-lab Bundle Agent Hq 2
Deploy the Agent HQ mission-control stack (Express + React + Telegram notifier / Jarvis summary) so other Clawdbot.
10 - demerzels-lab Bundle Loopwind 2
Generate images and videos from React + Tailwind CSS templates using the loopwind CLI.
10 - demerzels-lab Bundle Radon AI 2
Use Radon IDE's AI tools for React Native development - query library docs, view logs and network traffic, take.
10 - demerzels-lab Bundle React Perf 2
React and Next.js performance optimization patterns.
10 - demerzels-lab Bundle UI UX Dev 2
Generate and serve live HTML/CSS/JS UI designs from natural language prompts.
10 - demerzels-lab Bundle Mistral Ocr 2
Convert PDF/images to Markdown/JSON/HTML using Mistral OCR API.
10 - demerzels-lab Bundle Webcli 2
Browse the web, read page content, click buttons, fill forms, take screenshots, and get accessibility snapshots.
10 - demerzels-lab Bundle Context Viz 2
Visualize the current context window usage — token estimates per component (system prompt, tools, workspace files.
10
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 accommodation-request, frontend-design, applicationinsights-web-ts. 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.