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 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 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 - gabrielmoreira Skill Deck Product Launch
暗 hero + 亮内容, 橙→桃 accent, 特性卡 + 定价 + CTA
17 - gabrielmoreira Skill Social Media Matrix
电影感多平台社媒分析: 互动图、悬浮洞察、区间对比、明暗主题
17 - gabrielmoreira Skill Social Spotify Card
Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页
17 - gabrielmoreira Skill Web Proto Brutalist
Swiss industrial-print 风: 单字 grotesque、巨数字、ASCII 装饰
17 - gabrielmoreira Skill Web Proto Editorial
Editorial-minimalist: 暖色单色 canvas + serif display + grotesque body
17 - gabrielmoreira Skill Architecture Diagram 4
Generate dark-themed SVG diagrams of software systems and cloud infrastructure as standalone HTML files with inline SVG graphics. Semantic component colors (cyan=frontend, emerald=backend, violet=database, amber=cloud/AWS, rose=security, orange=message bus), JetBrains Mono font, grid background. Best suited for software architecture, cloud/VPC topology, microservice maps, service-mesh diagrams, database + API layer diagrams, security groups, message buses — anything that fits a tech-infra deck with a dark aesthetic. If a more specialized diagramming skill exists for the subject (scientific, educational, hand-drawn, animated, etc.), prefer that — otherwise this skill can also serve as a general-purpose SVG diagram fallback. Based on Cocoon AI's architecture-diagram-generator (MIT).
17 - gabrielmoreira Skill Deck Obsidian Claude
GitHub-dark + 紫蓝环境光 + 三色渐变标题 + GitHub 风代码
17 - gabrielmoreira Skill Frame Data Chart Nyt
NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)
17 - gabrielmoreira Skill Frame Liquid Bg Hero
WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报
17 - gabrielmoreira Skill Flowai Team Dashboard
三个 tab 的团队管理后台: 成员、详情、活动日志, 含图表 + CSV 导出
17 - gabrielmoreira Skill Frontend Testing 2
Comprehensive frontend testing strategy covering unit, integration, E2E, visual regression, and accessibility testing
17 - gabrielmoreira Skill Md To Eml
Convert Markdown to RFC 5322 email (.eml) with inline CSS and CID images
17 - gabrielmoreira Skill Generate
Generate Playwright tests. Use when user says "write tests", "generate tests", "add tests for", "test this component", "e2e test", "create test for", "test this page", or "test this feature".
17 - gabrielmoreira Skill Oma Coordination
Guide for coordinating PM, Frontend, Backend, Mobile, and QA agents on complex projects via CLI. Use for manual step-by-step coordination and workflow guidance.
17 - gabrielmoreira Skill Video 2
Programmatic video generation specialist using React and Remotion.
17 - gabrielmoreira Skill Frame Flowchart Sticky
SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm
17 - gabrielmoreira Skill Frame Light Leak Cinema
胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡
17 - gabrielmoreira Skill Frontend Design 9
Aesthetic direction for designs outside an existing brand system
17 - gabrielmoreira Skill Md To HTML
Convert Markdown to standalone HTML pages with embedded CSS, images, and Mermaid diagrams
17 - gabrielmoreira Skill Frame Macos Notification
拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告
17 - gabrielmoreira Skill Interface Designer
Use when a product flow needs interface structure, component planning, interaction details, or screen-level UX shaping before implementation.
17 - gabrielmoreira Skill Zustand Store TS
Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating global stores, or implementing reactive state patterns with Zustand.
17 - gabrielmoreira Skill Convert Blazor Server To Webapp
Guides conversion of a pre-.NET 8 Blazor Server app into a .NET 8+ Blazor Web App. USE FOR: migrating apps that use AddServerSideBlazor and MapBlazorHub to the AddRazorComponents/MapRazorComponents model, converting _Host.cshtml to an App.razor root component, replacing blazor.server.js with blazor.web.js, migrating CascadingAuthenticationState to a service, adopting new Blazor Web App features like enhanced navigation and streaming rendering. DO NOT USE FOR: apps that are already Blazor Web Apps (already use AddRazorComponents and MapRazorComponents), Blazor WebAssembly or hosted Blazor WebAssembly apps (different migration path), apps that should stay on the Blazor Server hosting model without converting, or apps still targeting .NET Framework.
17 - gabrielmoreira Skill Felo Web Fetch
Extract webpage content with Felo Web Extract API. Use for turning URLs into html/markdown/text, selecting specific page areas with CSS selectors, and controlling extraction options like crawl mode, cookies, user-agent, and timeout.
17 - gabrielmoreira Skill Recipe Front Plan
Create frontend work plan from design document and obtain plan approval
17 - gabrielmoreira Skill Vercel React Expert
Use when legacy prompts or older framework flows reference `vercel-react-expert` and you need the modern runtime to resolve that capability cleanly.
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 deck-graphify-dark, exec-briefing-memo, experiment-readout. 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.