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 Hyperframes 3Render MP4/WebM videos from HTML compositions.
17 - gabrielmoreira Skill Clipboard History
Read, write, and manage Windows clipboard content including text, HTML, images, and clipboard history via PowerShell
17 - gabrielmoreira Skill Crit 10
Review code changes, a plan, a live page (running dev server), or a local HTML file with Crit inline comments and structured human feedback. Use only when the user explicitly invokes /crit or directly asks to use Crit; a generic review request does not count.
17 - gabrielmoreira Skill Support Prerendering
Make interactive Blazor components work correctly with prerendering. USE FOR fixing duplicate data loads, UI flicker during prerender-to-interactive handoff, null references during prerender, persisting state across prerender, disabling prerendering, excluding pages from interactive routing, or detecting whether a component is currently prerendering. DO NOT USE for choosing which render mode to use (see create-blazor-project) or general component authoring (see author-component).
17 - gabrielmoreira Skill Critique 2
Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.
17 - gabrielmoreira Skill Data Report
把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
17 - gabrielmoreira Skill Deck Replit
Replit Slides 八套主题 (helix/holm/vance/bevel/world/atlas/bluehouse)
17 - gabrielmoreira Skill Deck Simple
通用 horizontal-swipe HTML deck, 不要 magazine 调
17 - gabrielmoreira Skill Info Funnel
3-6 阶递减漏斗, 突出转化率 / 筛选比例 / 流量损耗。竖图适合 IG Story / 小红书
17 - gabrielmoreira Skill Od React Export
Export To React
17 - gabrielmoreira Skill Picking A Format
Use when choosing an output format for extracted documents — plain text, markdown, djot, HTML, JSON, or DocTags. Maps consumer (LLM, parser, archive) to the right `--format` / `--content-format` pair.
17 - gabrielmoreira Skill Brand Guidelines
Extract a brand's visual and verbal identity into an applicable guideline kit — tokens, voice rules, and do/don't pairs — then apply it consistently to any artifact. Use when asked to apply brand guidelines to a document/deck/page, to extract a brand kit from existing materials or a website, to keep AI-produced artifacts on-brand, or to write lightweight brand guidelines for a startup. Produces a compact brand kit (visual tokens + voice rules + application examples) and/or an artifact restyled to it. For a creator's personal voice use creator-brand-kit; for building new UI systems use frontend-design.
17 - gabrielmoreira Skill Frontend Design 7
🎨 Frontend Design (Premium)
17 - gabrielmoreira Skill Zustand 5
Zustand 5 state management patterns. Trigger: When managing React state with Zustand.
17 - gabrielmoreira Skill Coordinate Components
Share state between components that don't have a direct parent-child parameter relationship, using cascading values, scoped services with change events, or CascadingValueSource via DI. USE WHEN the user needs a CascadingParameter or CascadingValue that works across render mode boundaries, a shopping cart or notification count accessible from multiple pages, a theme or user preference cascaded app-wide, or when components in different parts of the tree must react when shared data changes. Also USE WHEN cascading values aren't reaching interactive children in per-page interactivity mode, or when the user needs to understand scoped vs singleton service lifetime for state on Blazor Server. DO NOT USE for direct parent-child parameter passing or EventCallback (see author-component), for persisting state across prerender-to-interactive transitions (see support-prerendering), or for service abstractions for data fetching in Auto/WebAssembly (see fetch-and-send-data).
17 - gabrielmoreira Skill Create Blazor Project
Create a new ASP.NET Core web application or web site using Blazor. USE FOR: creating a new Blazor web app, scaffolding a new web project, starting a new web site, choosing render modes (Static SSR, Interactive Server, Interactive WebAssembly, Auto), running dotnet new blazor with the right options, setting up initial project structure. DO NOT USE FOR: adding features to existing projects, changing how an existing app renders, or component authoring (use author-component).
17 - gabrielmoreira Skill Card Twitter
推特金句 / 数据卡, 适合配推文
17 - gabrielmoreira Skill Saas Landing 2
单页 SaaS 落地页, 含 hero/features/social-proof/pricing/CTA
17 - gabrielmoreira Skill Od Nextjs Export
Export To Next.js
17 - gabrielmoreira Skill Tailwind Mastery
🎨 Tailwind Mastery
17 - gabrielmoreira Skill Expo App Design
Build beautiful cross-platform mobile apps with Expo Router, NativeWind, and React Native.
17 - gabrielmoreira Skill Deck Xhs Post
9 页 3:4 竖版图文, 暖 pastel + 虚线 sticker 卡片
17 - gabrielmoreira Skill Meeting Notes 6
标题 + 出席 + 议程 + 决议 + action items + 下次
17 - gabrielmoreira Skill Prototype Web
可点击的功能性 Web 原型, 含导航、英雄区、特性区、CTA
17 - gabrielmoreira Skill Resume Modern
现代极简简历, A4 单页, 适合打印或导出 PDF
17 - gabrielmoreira Bundle Core Web Vitals 2
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts". Focuses specifically on the three Core Web Vitals metrics. Do NOT use for general web performance (use perf-web-optimization), Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).
17 - gabrielmoreira Bundle Morph 2
Converting document formats (Markdown/Word/Excel/PDF/HTML) and generating reusable conversion scripts. Use for distributable specs, accessibility-compliant PDFs, or Pandoc/LibreOffice pipelines.
17 - gabrielmoreira Bundle Architecture Diagram 2
Build interactive, click-through architecture diagrams for software systems — a self-contained single HTML file with animated step-by-step flows, mode toggles (dev/prod, offline/online, v1/v2), dark/light theme, and a side panel with payload details, plus a companion markdown description. Use when the user wants to visualize or design a system: architecture diagram, service map, data flow, RAG/agentic flow, microservices topology, integration diagram, CI/CD or data/ETL pipeline, multi-agent system, or onboarding diagram — or to design a new service's flows before building. Natural-language triggers: 'I'm building X, what should the flow look like', 'pokaż jak działa system', 'diagram architektury', 'wizualizacja systemu', 'klikany diagram'. Do NOT use for static diagrams that belong inline (Mermaid/PlantUML), slide decks, or printable/PDF handouts — this produces interactive HTML for browser consumption.
17 - gabrielmoreira Skill Architecture Diagram
Generate dark-themed system architecture and component diagrams as HTML/SVG for rendering in the browser
17 - gabrielmoreira Skill Nextjs Specialist
⚛️ Next.js Specialist
17 - gabrielmoreira Bundle Frontend Slides 3
从零开始创建令人惊叹、动画丰富的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面、或为演讲/路演创建幻灯片的场景。帮助非设计师用户通过视觉探索而非抽象选择来发现他们的审美偏好。
17 - gabrielmoreira Bundle Frontend Slides 4
从零开始或通过转换 PowerPoint 文件创建令人惊叹、动画丰富的 HTML 演示文稿（Presentations）。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面或为演讲/路演创建幻灯片（Slides）的场景。通过视觉探索而非抽象选择，帮助非设计师发掘其审美偏好。
17 - gabrielmoreira Bundle Coding Standards 2
适用于 TypeScript、JavaScript、React 和 Node.js 开发的通用编码标准、最佳实践与模式。
17 - gabrielmoreira Skill Deck Blueprint
奶油纸 + 锈红 + 蓝图网格 mask + 黑边硬卡片 + pipeline 盒
17 - gabrielmoreira Skill Deck Xhs White
纯白 + 顶部彩虹 bar + 渐变文字 + 马卡龙软卡片 + 黑底 pill
17 - gabrielmoreira Skill Digital Eguide 2
两页跨页电子指南, 封面 + 课程页 + pull-quote + 步骤列表
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 hyperframes, clipboard-history, crit. 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.