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.
-
srfinch17 Bundle Iterative Lesson RefinementUse when a teaching or study artifact (HTML page, study pack, explainer, interview-prep doc) must hold up under live questioning, when a lesson "reads fine" but the learner keeps failing follow-up questions, when asked to "battle-test / tighten / refine" a lesson, or when a learner needs to genuinely own a topic fast instead of reciting it.
-
sriptcollector Bundle Client Secret SweepProve no secret reaches the browser, by tracing which environment variables and constants actually get compiled into your client bundle rather than trusting naming conventions. Use before a public launch, after adding any API key, or when wiring a third-party service into a frontend.
-
syncfusion Bundle Syncfusion Aspnetmvc GridImplements Syncfusion EJ2 ASP.NET MVC Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
-
syncfusion Bundle Syncfusion Aspnetmvc Theme**THEMING & APPEARANCE GUIDE** — Assist with Syncfusion ASP.NET MVC EJ2 component theming, customization, size modes, dynamic theme switching, and icon integration. Use when: applying themes (Bootstrap, Material, Tailwind, Fluent, etc.), customizing via SCSS or Theme Studio, enabling touch/size modes, or managing appearance dynamically.
-
syncfusion Bundle Syncfusion Aspnetmvc Common**CONFIGURATION GUIDE** — Assist with Syncfusion ASP.NET MVC EJ2 components setup using HTML Helpers, script references, localization, and globalization. Use when: installing Syncfusion.EJ2.MVC5, configuring HTML Helpers, adding script/style references, setting up culture-specific configurations.
-
syncfusion Bundle Syncfusion Aspnetmvc KanbanImplement and configure Syncfusion ASP.NET MVC Kanban Board component for task management and workflow visualization. Use this when working with kanban boards, task tracking systems, agile project management, or workflow visualization. This skill covers card management, drag-and-drop functionality, swimlane grouping, and column-based layouts.
-
syncfusion Bundle Syncfusion Aspnetmvc Chat UIImplement a real-time Chat UI with Syncfusion ASP.NET MVC ChatUI component. Use when building chat interfaces, messaging apps, bot integrations, or interactive conversations. Covers messages, header/footer, templates, events, methods, file attachments, typing indicators, mentions, globalization, speech-to-text, and bot integrations.
-
syncfusion Bundle Syncfusion Aspnetmvc DiagramUse this skill whenever the user asks to create, configure, customize, or troubleshoot interactive diagrams using the Syncfusion ASP.NET MVC Diagram component with EJ2 Tag Helpers. Trigger this skill for requests involving flowcharts, organizational charts, BPMN diagrams, UML diagrams, swimlane diagrams, or mind maps, including node and connector definitions, shapes, styles, layouts, data binding, drawing tools, serialization, export, or advanced customization in ASP.NET MVC applications.
-
syncfusion Bundle Syncfusion Aspnetmvc TreegridImplements Syncfusion EJ2 ASP.NET MVC TreeGrid component for hierarchical data with editable parent–child tables. Use for nested datasets with sorting, filtering, paging, or Excel/PDF export. Covers data binding, templates, virtual scrolling, editing, selection, aggregates, and state persistence to deliver high‑performance tabular operations.
-
syncfusion Bundle Syncfusion Aspnetmvc SchedulerGuide for implementing Syncfusion ASP.NET MVC Scheduler component. Use this skill whenever users need to create scheduling interfaces, calendar views, event management systems, appointment booking, resource scheduling, timeline views, recurring events, drag-drop calendars, or any time-based data visualization. Covers setup, data binding, views configuration, CRUD operations, resources, customization, and integration with remote services.
-
syncfusion Bundle Syncfusion Aspnetmvc Gantt ChartImplement Syncfusion ASP.NET MVC Gantt Chart component (EJ2) for project management and task scheduling. Use this when working with Gantt charts, project timelines, task dependencies, or resource allocation in ASP.NET MVC applications using @Html.EJS().Gantt() Razor helpers. Covers data binding, task management, editing, filtering, sorting, export, timeline customization, events, and public methods.
-
syncfusion Bundle Syncfusion Aspnetmvc AI AssistviewImplement the Syncfusion ASP.NET MVC AI AssistView component — a conversational AI chat interface with prompt/response rendering, prompt suggestions, custom views, toolbar customization, file attachments, speech-to-text, AI backend integrations (Azure OpenAI, Gemini, Ollama, LiteLLM), generative UI with interactive tools, Chain of Thoughts reasoning visualization and text-to-speech audio playback. Use this skill when building AI chat UIs, integrating LLM backends, configuring assistant toolbars, customizing templates, rendering dynamic UI components, or handling voice input/output in ASP.NET MVC applications.
-
syncfusion Bundle Syncfusion Aspnetmvc RichtexteditorImplement Syncfusion ASP.NET MVC Rich Text Editor for HTML and Markdown editing. This skill covers editor setup with the EJ2 RichTextEditor HTML helper, including WYSIWYG and Markdown modes. Use this when working with toolbar configuration, editor modes (HTML, Markdown, IFrame, Inline), content management, media insertion, smart editing features (@mentions, emoji picker), paste cleanup, form validation, and AI assistant integration.
-
syncfusion Bundle Implementing Speech To TextImplement Syncfusion Speech To Text control in ASP.NET MVC applications using HTML Helpers. ALWAYS use this skill when the user needs ASP.NET MVC speech recognition, voice input, Web Speech API integration, speech-to-text transcription, or help with the Speech To Text control (@Html.EJS().SpeechToText()). Covers installation, HTML helper setup, speech recognition, customization, events, error handling, and accessibility patterns specific to ASP.NET MVC.
-
syncfusion Bundle Syncfusion Aspnetmvc Markdown ConverterGuides implementation of the Syncfusion ASP.NET MVC Markdown Converter (Syncfusion.EJ2.MVC5). Use this skill when the user needs to convert Markdown text to HTML, use the MarkdownConverter utility, configure MarkdownConverterOptions (async, gfm, lineBreak, silence), or integrate the Markdown Converter with the Syncfusion Rich Text Editor for live preview or side-by-side editing in ASP.NET MVC. Trigger when user mentions markdown to HTML conversion, MarkdownConverter, toHtml, markdown preview, or RTE markdown mode in an ASP.NET MVC project.
-
an8079 Skill API Contract TestingAPI contract testing: verify that API providers and consumers honor agreed-upon interfaces without running full integration. Use when building microservices, running Consumer-Driven Contract (CDC) tests, testing REST/GraphQL/Protobuf contracts, or ensuring frontend-backend API compatibility. Covers Pact, OpenAPI validation, GraphQL schema testing, and end-to-end contract suites.
Audited -
anarefin Skill Book SummarizerUse this skill whenever a user uploads a PDF book (technical or otherwise) and wants a beginner-friendly summary, study guide, or chapter breakdown. Triggers on phrases like: "summarize this book", "explain this book for beginners", "extract key takeaways", "make this book easier to understand", "chapter summary", "study guide for this book", "break down each chapter", "simplify this book", "explain the concepts in this book". Also trigger when a user uploads a PDF and asks anything like "help me understand this" or "what is this book about" — even if they don't explicitly say "summarize". Produces a polished single-file HTML document with a chapter nav sidebar, dark/light mode toggle, and a standardized beginner-friendly layout for every chapter.
-
atgreen Bundle Walking SkeletonUse when starting anything new and unsure where to begin, tempted to build the interesting component first, or when a prototype has many parts that don't yet connect end to end. Not for a throwaway probe to answer an unknown you'll then delete — that's spike-and-stabilize
-
atopile Skill DevLLM-focused workflow for working in this repo: compile Zig, run the orchestrated test runner, consume test-report.json/html artifacts, and discover/debug ConfigFlags.
-
atopile Skill LibraryHow the Faebryk component library is structured, how `_F.py` is generated, and the conventions/invariants for adding new library modules. Use when adding or modifying library components, traits, or module definitions.
-
exon-research Skill Genomi DecodeActivate this skill for "/genomi decode", "decode my genome", "decode my DNA", "show me the dashboard", "the Genomi dashboard", "one-shot rundown", or any all-at-once request that asks Genomi to compose every capability's findings into a single artifact. This is the whole-genome dashboard kicker — it sweeps every relevant Genomi capability in one shot, not a per-target lookup. Composes evidence from every relevant Genomi capability into a single self-contained Genomi Dashboard.html and returns localhost serve metadata. Active genome required.
-
michael-f-bryan Bundle HTML Rich CommunicationUse when creating a shareable HTML explainer, brief, report, review aid, evidence pack, or other rich communication artefact for a human reader.
Audited -
jazzenchen Skill Va PreviewStart a VibeAround Preview for either a running local web server or a Markdown file. Use after starting a dev server, after creating or updating Markdown, or when the user asks to preview a browsable artifact. Only available when the VibeAround MCP server is connected.
-
jschulte Bundle Portable ExtractExtract tech-agnostic portable component specs from StackShift reverse-engineering docs. Generates abstract epics and component specifications for ANY BMAD project. Bridges StackShift code analysis with reusable, platform-independent component specifications.
-
lassejlv Bundle No Vibe CodeReview frontend source and rendered UI for generic generated design patterns using the bundled static linter. Use for requests to remove AI-slop styling or a focused design-quality pass. Preserve intentional brand choices; this skill does not establish the primary visual direction.
-
lassejlv Bundle Build Gpui AppsBuild, scaffold, refactor, debug, review, and visually validate production Rust desktop interfaces with GPUI. Use for production-ready GPUI starter apps; new GPUI apps or components; Entity, Context, action, async, and lifecycle architecture; Apple-style macOS UI, materials, motion, gestures, focus, accessibility, text input, IME, clipboard, drag and drop, menus, multi-window behavior, restoration, packaging, CI, performance, testing, and broader app work that may use Paper.design as one input. When the primary task is faithfully translating a selected Paper.design frame into an existing GPUI view, use paper-to-gpui instead. Covers published GPUI and pinned Zed revisions, platform boundaries, narrow AppKit interop, and stability audits.
-
lassejlv Bundle Tcut Terminal VideoCreate, edit, test, render, and publish repeatable terminal demos with tcut (the termcut package). Use when Codex needs to turn CLI commands, interactive terminal programs, coding agents, or a terminal-plus-browser workflow into scripted or live MP4, WebM, GIF, WebP, SVG, HTML, screenshots, or frame sequences. Covers easy recordings, deterministic TypeScript video scripts, TUI automation, visual styling, re-rendering casts, and S3-compatible publishing; do not use for general screen recording that does not involve tcut.
-
lassejlv Bundle The Cloudflare StackBuild, migrate, review, and deploy full-stack React applications on Cloudflare Workers with TanStack Start, the official Cloudflare Vite adapter, Vite 8, Better Auth, Drizzle ORM, D1 or Hyperdrive-backed SQL, R2 object storage, Tailwind CSS v4, shadcn/ui, and coss ui. Use when creating or changing an app on this stack, wiring Cloudflare bindings, authentication, database migrations, storage, components, local development, or production validation.
-
mnhkahn Skill PDFMarkdown/HTML/Typst 转 PDF——输入 Markdown、HTML 或 Typst 文件,本地生成 PDF 文档。支持标题/列表/代码块/多列/自由排版。【重要】必须先读 skill 原文获取正确命令格式,禁止瞎猜。
-
mnhkahn Skill Cnote云端笔记——在 OneDrive 上管理轻量 HTML 笔记,支持查看、新建、追加、列表。需要 Microsoft 登录。想查电视节目去问 tv skill。【重要】必须先读 skill 原文获取正确命令格式,禁止瞎猜。
-
alexanderop Skill Principle Compose Vue ComponentsApply when building or refactoring Vue components. Design accessibility first, organize by responsibility, and express layout variants through composition.
Audited -
zongtingwei Bundle Atac SeqATAC-seq processing with assay QC, MACS3 peak calling, consensus peak matrices, differential accessibility, and motif or footprint follow-up.
-
nafisrayan Bundle SuperdesignSuperdesign is a design agent specialized in frontend UI/UX design. Use this skill before implementing any UI that requires design thinking. Common commands: superdesign create-project --title "X" (setup project), superdesign create-design-draft --project-id <id> --title "Current UI" -p "Faithfully reproduce..." --context-file src/Component.tsx (faithful reproduction), superdesign iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" --mode branch --context-file src/Component.tsx (design variations), superdesign execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx (extend to more pages), superdesign create-component --project-id <id> --name "NavBar" --html-file /tmp/navbar.html --props '[...]' (extract reusable component), superdesign update-component --component-id <id> --html-file /tmp/navbar.html (update existing component), superdesign list-components --project-id <id> (list existing components). Supports line ranges: --context-file path:startLine:endLine
-
nafisrayan Bundle Taste SkillPremium visual design and frontend taste skill suite covering brand identity, anti-slop frontend design, high-end visual design, image generation direction, image-to-code, UI style systems (minimalist, industrial-brutalist, stitch), redesign of existing projects, GPT-taste GSAP motion, and full output enforcement. Each sub-skill has a dedicated reference under references/ — load the matching file before executing.
-
nafisrayan Bundle Syntax RulesApply language-specific coding standards, conventions, and syntax rules across 18 languages plus universal common rules. Use when writing, reviewing, or refactoring code in any language — enforces coding style, testing patterns, security practices, error handling, naming conventions, immutability principles, and project structure. Triggers on "coding standards", "code style", "syntax rules", "coding conventions", "apply rules", "follow conventions", "enforce style", "lint rules", or when writing code in any supported language. Covers TypeScript, JavaScript, Python, Rust, Go, Java, Kotlin, Swift, C++, C#, PHP, Dart, Angular, ArkTS, F#, Perl, web/frontend, and Chinese-language rules.
-
nafisrayan Skill Clone WebsiteReverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.
Audited
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 syncfusion-aspnetmvc-gantt-chart, syncfusion-aspnetmvc-ai-assistview, iterative-lesson-refinement. 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.