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 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 - gabrielmoreira Skill Generate 2
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 Recipe Front Build
Execute materialized frontend task files in autonomous execution mode
17 - gabrielmoreira Skill Blog Chart 2
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 whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data).
17 - gabrielmoreira Skill Blog Write 2
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, citation capsules, 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".
17 - gabrielmoreira Skill React Flow Node TS
Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components.
17 - gabrielmoreira Skill Frontend UI Dark TS
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
17 - gabrielmoreira Skill Moai Domain Frontend
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
17 - gabrielmoreira Skill Article Sketchnote Editorial
把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节
17 - gabrielmoreira Bundle Supabase 3
Configure Supabase for Next.js SaaS: Drizzle + pooler, Google-only Auth, RLS, cost optimization. Use when setting up Supabase, connecting Drizzle, SSR auth, or optimizing costs.
17 - gabrielmoreira Skill Venue Access Check 2
Summarise what Venue Access Check does in one line. Use when asked to [trigger phrases the user would say]. Produces [the concrete artifact].
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-product-launch, social-media-matrix, social-spotify-card. 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.