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 GenimlMachine learning toolkit for genomic interval (BED) data; use it when you need to tokenize BED collections and train embeddings for regions/cells/labels, build consensus peak universes, or run similarity search and downstream ML on chromatin accessibility datasets.
17 - gabrielmoreira Skill Accessibility 5
Achieve and maintain WCAG compliance through inclusive design practices, proper ARIA usage, and comprehensive testing methodologies.
17 - gabrielmoreira Bundle Speech 3
Use when the user asks for text-to-speech narration or voiceover, accessibility reads, audio prompts, or batch speech generation. OpenAI remains the default; Atlas Cloud is an explicit optional backend for asynchronous multilingual speech. Custom voice creation is out of scope.
17 - gabrielmoreira Skill Article Magazine
Substack / Medium 高级感长文排版, 适合公众号、博客发布
17 - gabrielmoreira Skill Card Xiaohongshu
小红书风格知识卡片, 多张联排可滑动浏览
17 - gabrielmoreira Skill Deck Dir Key Nav
8 页单色背景, 160px display + 4px accent + Mono 箭头列表
17 - gabrielmoreira Skill Deck Ljg Present
把 outline 1:1 铸成色块大字宣言 deck, 原文不动只做美化。三档主题 black / red / yellow
17 - gabrielmoreira Skill Mockup Device 3d
iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图
17 - gabrielmoreira Skill Oma Mobile
Mobile specialist for Flutter, React Native, and cross-platform mobile development. Use for mobile app, Flutter, Dart, iOS, Android, Riverpod, and widget work.
17 - gabrielmoreira Skill Screenshot
Capture high-fidelity screenshots of any website using Playwright — supports custom viewports, dark/light mode, mobile/tablet/desktop presets, split-screen, element-based capture by CSS selector, and text-based area capture. Integrates with Telegram or any output channel for delivery.
17 - gabrielmoreira Skill Tailwind CSS
Best practices for utility-first CSS with Tailwind, responsive design, and component patterns
17 - gabrielmoreira Skill Deck Hermes Cyber
黑底 + CRT 网格扫描线 + $ 命令行标题 + 薄荷绿大字 + 三档 tag
17 - gabrielmoreira Skill Deck Magazine Web
电子杂志 × 电子墨水风, WebGL 流体背景 + 衬线 display
17 - gabrielmoreira Skill Deck Safety Alert
红琥珀警示色 + hazard 条纹 + L1/L2/L3 tier 卡片 + 删除线标题
17 - gabrielmoreira Skill Deck Tech Sharing
GitHub-dark + JetBrains Mono + 终端代码块, 含 agenda + Q&A
17 - gabrielmoreira Skill Video Hyperframes
Hyperframes / Remotion 兼容的连续帧动画, 可自动播放
17 - gabrielmoreira Skill CLI Anything Macrocli
Use when the agent wants to define, list, inspect, or execute GUI macros via the MacroCLI CLI. Macros are parameterized, CLI-callable workflows — the agent invokes `macro run <name>` and the system handles backend routing (plugin, file transform, accessibility, compiled GUI replay).
17 - gabrielmoreira Skill Backend Patterns 3
后端架构模式、API 设计、数据库优化以及 Node.js、Express 和 Next.js API 路由的服务端最佳实践。
17 - gabrielmoreira Skill Coding Standards 4
TypeScript、JavaScript、React、Node.js 开发的通用编码标准、最佳实践和模式。
17 - gabrielmoreira Skill Backend Patterns 4
后端架构模式、API设计、数据库优化以及适用于Node.js、Express和Next.js API路由的服务器端最佳实践。
17 - gabrielmoreira Skill Coding Standards 5
适用于TypeScript、JavaScript、React和Node.js开发的通用编码标准、最佳实践和模式。
17 - gabrielmoreira Skill XLSX 11
Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
17 - gabrielmoreira Skill Frontend Patterns 3
适用于 React、Next.js、状态管理、性能优化和 UI 最佳实践的前端开发模式。
17 - gabrielmoreira Skill Frontend Patterns 4
React、Next.js、状态管理、性能优化和UI最佳实践的前端开发模式。
17 - gabrielmoreira Skill Deck Course Module
暖纸背景 + Playfair, 左侧学习目标常驻, 含 MCQ 自测页
17 - gabrielmoreira Skill Deck Graphify Dark
深夜渐变 + 漂浮 orbs + SVG 力导向图谱 + JetBrains Mono
17 - gabrielmoreira Skill Exec Briefing Memo
Decision needed + recommendation + evidence + tradeoffs, 把复杂材料压成可拍板的一页
17 - gabrielmoreira Skill Experiment Readout 3
假设 + 指标 + 结果 + 解释 + 决策, 把 A/B 或产品实验转成行动建议
17 - gabrielmoreira Skill Frame Glitch Title
数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero
17 - gabrielmoreira Skill Social Reddit Card
拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享
17 - gabrielmoreira Skill Social X Post Card
拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享
17 - gabrielmoreira Skill Accessibility Audit 2
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).
17 - gabrielmoreira Skill Oma Frontend
Frontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment. Use for UI, component, page, layout, CSS, Tailwind, and shadcn work.
17 - gabrielmoreira Skill Computer Use 3
Desktop control with accessibility-first observation and actions, pixel fallback, screenshots, zoom, screen recording, and switching between registered computers. Qualified on macOS; Windows, Linux and HarmonyOS backends are experimental.
17 - gabrielmoreira Skill Hyperframes 4
Create, compose, animate, and render HTML-based video compositions using HyperFrames — an open-source video rendering framework built for AI agents. Covers composition authoring with data attributes, GSAP timelines, caption/subtitle generation, text-to-speech narration, audio-reactive animations, scene transitions, variable-driven parametrized renders, and the full video production workflow.
17 - gabrielmoreira Skill Deck Presenter Mode
tokyo-night 默认主题, T 切换 5 主题, S 打开提词器 popup
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 geniml, accessibility, speech. 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.