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.
-
incomestreamsurfer Skill Frontend DesignGenerates distinctive, high-quality frontend designs avoiding generic AI aesthetics. Use when building landing pages, UI components, dashboards, web apps, or any frontend/web design task.
-
dotnet Skill Update Existing BranchRefresh an existing .NET release-notes milestone branch set incrementally. Checks whether the VMR ref moved, regenerates `changes.json` only when needed, merges the delta into `features.json`, integrates new material into existing markdown clusters across the per-component branches, and responds to review feedback. USE FOR: reruns on a populated release-notes branch set. DO NOT USE FOR: first-pass generation of a new milestone (use generate-changes, generate-features, and release-notes).
4k -
narcisolcf Bundle Pca UI V2Gera prototipos React (SPA) visuais completos num unico ficheiro HTML para o PCA Camocim. Versao 2 com shadcn/ui.
-
narcisolcf Bundle Pca SlidesGera e manipula apresentacoes PowerPoint (.pptx) para o PCA Camocim. Converte dashboards HTML em slides e preenche templates oficiais.
-
izmailovilya Bundle Team FeatureLaunch Agent Team for feature implementation with review gates (coders + specialized reviewers + tech lead). Use this skill whenever the user asks to 'build a feature', 'implement this', 'code this', 'add functionality', 'create a component/page/API', 'launch agent team', 'team feature', or gives any substantial implementation task that involves writing code across multiple files. Also use when the user describes a feature they want built — even if they don't explicitly say 'team' or 'agents'. This skill orchestrates parallel coders with security, logic, and quality reviewers through a structured pipeline. Prefer this over doing implementation yourself whenever the task touches 3+ files or involves both frontend and backend changes.
-
narcisolcf Bundle Webapp TestingExecuta testes end-to-end em aplicacoes React locais (Vite) usando Playwright. Permite validar formularios, capturar logs e inspecionar UI.
-
wlfmnstr Skill Component PatternsReact component architecture and composition patterns for type-safe development. Use when designing component APIs, implementing composition patterns, or structuring component libraries.
-
narcisolcf Bundle Pca UI BuilderGera prototipos React (SPA) visuais completos num unico ficheiro HTML. Utiliza Tailwind e shadcn/ui. Ideal para visualizar dashboards do PCA Camocim.
-
seifbenayed Skill XLSXUse 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.
-
mizoreww Bundle Storage AnalyzermacOS / Windows / Linux 只读存储分析助手(自动识别系统)。扫描整机磁盘占用,找出 占空间大户,把每一项分成 🟢可自动清理 / 🟡需人工判断 / 🔴谨慎清理 三级并给出 可执行处置方案,生成排版精美、可折叠、命令可一键复制的交互式 HTML 报告,并可 起本地服务在网页上一键删除(移废纸篓/直接删)。扫描全程只读。务必在以下场景 使用:用户说"存储分析""磁盘满了""C盘/硬盘满了""空间不够""清理空间" "清理磁盘""占空间""哪些东西占地方""帮我看看存储""看一下电脑存储/空间" "存储空间""电脑空间不够""内存满了/不够/不足""看下内存/存储"(中文口语里 "内存"常指存储空间)"storage analysis""disk cleanup""清缓存""磁盘清理" "No space left on device""inode 用完了";或用户抱怨电脑没空间、想知道什么 东西吃硬盘、想要清理建议时。注意:若用户明确 指运行内存/RAM(如"哪个进程吃内存""内存占用高"想看活动监视器),那是 RAM 不是存储,不属于本 skill。
-
tomique34 Bundle Tmq Markdown2anythingConvert markdown files to visually appealing PDF, Word, or HTML documents with Slovak diacritics support, professional themes (professional, minimalist, technical, basic), and advanced table formatting. Use when converting markdown documentation to presentation-ready documents, creating professional web pages from markdown, reports from markdown notes, or batch-converting markdown files to styled PDF/DOCX/HTML formats.
-
leovido Skill ToolingPackage management, project setup, and development tooling standards. Use this when users need guidance on using pnpm for package management, setting up new projects with automated scripts, configuring environment variables with dotenv, or initializing development tooling for React and React Native projects.
-
leovido Skill DevelopmentCore development standards, patterns, and best practices for React and React Native projects. Use this when users need guidance on code quality (Biome, TypeScript), testing (Jest), project structure (Domain-Driven Design), React best practices (useEffect guidelines), or React Native development with Expo.
-
smnandre Bundle TurboHotwire Turbo for Symfony UX -- SPA-like speed with zero JavaScript. Covers Drive (navigation), Frames (partial page sections), and Streams (multi-target updates). Use when building ajax navigation, lazy-loaded sections, inline editing, pagination without reload, modals from the server, flash messages via streams, or real-time updates via Mercure/SSE. Code triggers: turbo-frame, turbo-stream, data-turbo-frame, data-turbo, data-turbo-action, turbo-stream-source, TurboStreamResponse, <twig:Turbo:Frame>, <twig:Turbo:Stream:Append>, <twig:Turbo:Stream:Replace>, turbo:before-fetch-request. Also trigger when the user asks "how to update part of the page without reload", "how to make navigation feel like SPA", "how to lazy-load a section", "how to do inline editing", "how to push real-time updates from server", "how to use Mercure with Turbo". Do NOT trigger for client-side JS behavior (use stimulus), server-rendered reactive components (use live-component), or reusable static UI (use twig-component).
-
smnandre Bundle UX MapSymfony UX Map for interactive maps with Leaflet or Google Maps in Symfony. Covers markers, polygons, polylines, circles, info windows, and LiveComponent integration. Use when displaying maps, placing markers, drawing shapes or routes, handling map events, building store locators, using custom tile layers, or making maps reactive with LiveComponent. Code triggers: <twig:ux:map />, Map(), Point(), Marker(), Polygon(), Polyline(), Circle(), InfoWindow(), MapOptionsInterface, ComponentWithMapTrait, fitBoundsToMarkers, ux:map:marker:before-create, ux:map:connect, SYMFONY_UX_MAP_DSN. Also trigger when the user asks "how to display a map", "how to add markers", "how to draw a polygon on a map", "how to handle map click events", "how to make a reactive map", "how to use Leaflet in Symfony", "how to use Google Maps in Symfony", "map not showing", "map has zero height". Do NOT trigger for SVG icons (use ux-icons) or general frontend interactivity (use stimulus).
-
smnandre Bundle StimulusStimulus JS framework for Symfony UX -- client-side behavior via HTML data attributes, zero server round-trips. Use when creating controllers for DOM manipulation, handling click/input/submit events, managing targets and values, wiring outlets between controllers, wrapping third-party JS libraries, or building toggles, dropdowns, modals, tabs, clipboard interactions. Code triggers: data-controller, data-action, data-target, data-*-value, data-*-class, data-*-outlet, stimulusFetch lazy, connect(), disconnect(), static targets, static values. Also trigger when the user asks "how do I add a click handler", "how to toggle a class", "how to build a dropdown/modal/tabs", "how to wrap a JS library in Symfony", "add keyboard shortcuts", "lazy-load a controller", "listen to global events", "communicate between controllers". Do NOT trigger for partial page updates without JS (use turbo), server-rendered reactivity (use live-component), or reusable Twig templates (use twig-component).
-
smnandre Bundle UX IconsSymfony UX Icons for rendering SVG icons in Twig templates. Supports 200,000+ Iconify icons (Lucide, Heroicons, Tabler, Material Design, etc.), local SVG files, and custom icon sets with aliases. Use when displaying icons, configuring icon defaults, importing or locking on-demand icons, creating icon aliases, or styling SVG icons with CSS. Code triggers: <twig:ux:icon />, ux_icon(), UX_ICONS_DEFAULT_ICON_ATTRIBUTES, icon.yaml, icons/, iconify:, lucide:, heroicons:, tabler:, mdi:, bin/console ux:icons:lock, bin/console ux:icons:import. Also trigger when the user asks "how to add an icon", "how to use Lucide/Heroicons/Tabler icons", "how to render an SVG icon in Twig", "how to lock icons for production", "how to create icon aliases", "how to style an icon", "icon not found", "icon not rendering". Do NOT trigger for interactive maps (use ux-map) or general Twig components (use twig-component).
-
smnandre Skill Symfony UXSymfony UX frontend stack -- decision tree and orchestrator for choosing between Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons, and UX Map. Use when the user is unsure which tool fits, wants to combine multiple UX packages, or asks a general frontend architecture question in Symfony. Also trigger when the user asks "which UX package should I use", "how to make this interactive", "should I use Stimulus or LiveComponent", "how to structure my Symfony frontend", "what is the difference between Turbo and LiveComponent", "should this be a Frame or a LiveComponent", "how do these UX packages work together", "what is the Symfony way to do frontend". Do NOT trigger when the user clearly names a specific tool (stimulus, turbo, twig-component, live-component, ux-icons, ux-map) -- defer to the specialized skill instead.
-
smnandre Bundle Live ComponentSymfony UX LiveComponent for reactive server-rendered UI -- components that re-render via AJAX on user interaction, zero JavaScript required. Use when building live search, real-time filtering, dynamic forms, inline validation, dependent selects, auto-save, polling, deferred/lazy rendering, or any UI that updates itself based on user input. Code triggers: AsLiveComponent, LiveProp, LiveAction, data-model, data-loading, data-live-action-url, ComponentWithFormTrait, LiveListener, emit, defer, lazy, polling. Also trigger when the user asks "how to build a search that filters as I type", "how to validate a form in real-time", "how to make a reactive component in PHP", "how to build dependent selects", "how to defer component rendering", "how to communicate between components via emit", "how to bind a form to a LiveComponent". Do NOT trigger for static reusable UI without reactivity (use twig-component), pure client-side JS behavior (use stimulus), or page-level navigation (use turbo).
-
yorch Bundle Typescript Unknown Jsx ExpressionFix TypeScript error "Type 'unknown' is not assignable to type ReactNode" when using Record<string, unknown> values directly in JSX && short-circuit expressions. Use when: (1) JSX expression {someObj.field && <Component />} fails with TS2322, (2) Reading from a JSON or untyped object via bracket notation in JSX conditionals, (3) Values typed as unknown appear in JSX even when wrapped in String() or guarded with truthiness checks. Fix: use !! to coerce to boolean before the && operator.
-
rehan-ul-haq Bundle Fetch Library DocsFetches official documentation for external libraries and frameworks (React, Next.js, Prisma, FastAPI, Express, Tailwind, MongoDB, etc.) with 60-90% token savings via content-type filtering. Use this skill when implementing features using library APIs, debugging library-specific errors, troubleshooting configuration issues, installing or setting up frameworks, integrating third-party packages, upgrading between library versions, or looking up correct API patterns and best practices. Triggers automatically during coding work - fetch docs before writing library code to get correct patterns, not after guessing wrong.
-
developer-overheid-nl Bundle Ls PubLogius publicatieworkflow voor standaardenrepos: ReSpec, GitHub Actions, markdownlint, WCAG/a11y, Muffet linkvalidatie, tech radar. Niet voor API of code linting.
-
imwyvern Bundle Codex AutopilotMulti-model AI coding automation system with intelligent task routing and built-in CI/CD. Watchdog-driven loop that orchestrates Codex (backend) and Gemini (frontend) sessions in tmux, auto-routes tasks by type, manages context compaction, runs incremental code reviews, dispatches tasks from a priority queue, and includes a test-agent that auto-detects failures, enqueues fixes, and ratchets coverage. v0.8.0 adds GitClaw workspace backup, PR/review monitoring, Codex session health monitoring via watch-codex.sh, and production-friendly OpenClaw/Hermes agent integration hooks. Recommended unattended Codex setup uses `codex --yolo`. Use when managing multiple concurrent AI coding sessions, automating development workflows, orchestrating parallel AI-assisted coding across projects, routing frontend vs backend tasks to different models, tracking tmux Codex health, following up on upstream PR/CI activity, or running continuous testing with auto-fix. Triggers: autopilot, watchdog, codex automation, tmux codex, multi-
-
geoffreycrofte Bundle Raam CodeDevelop accessible mobile applications (iOS and Android) conforming to RAAM 1.1 (Luxembourg Mobile Accessibility Assessment Framework, based on EN 301 549 v3.2.1 / WCAG 2.1). Use when building native mobile apps, React Native, Flutter, or any mobile UI that must meet Luxembourg accessibility law. Covers all 15 RAAM themes with platform-specific code guidance. Default conformance target: Level AA.
-
geoffreycrofte Bundle Raam AuditAudit mobile applications (iOS and Android) against RAAM 1.1 (Luxembourg Mobile Accessibility Assessment Framework). Use when reviewing existing mobile app code for accessibility compliance, generating audit reports, checking conformance levels, or preparing for Luxembourg accessibility certification. Covers all 15 themes with platform-specific test procedures. Default target: Level AA.
-
geoffreycrofte Bundle Raweb CodeWrite accessible HTML, CSS, and JavaScript that conforms to RAWeb 1.1 (Luxembourg Web Accessibility Framework, based on EN 301 549 / WCAG 2.1). Use when developing web interfaces, components, forms, navigation, or any front-end code that must meet Luxembourg accessibility law. Covers all 17 RAWeb themes with code-level guidance, accessible patterns, and anti-patterns. Default conformance target: Level AA.
-
geoffreycrofte Bundle Raweb AuditAudit web pages and components against RAWeb 1.1 (Luxembourg Web Accessibility Framework). Use when reviewing existing code for accessibility compliance, generating audit reports, checking conformance levels, or preparing for Luxembourg accessibility certification. Covers all 17 themes with systematic test procedures. Default target: Level AA.
-
jawwadfirdousi Bundle Svg Creatorcreate, edit, review, validate, and package high-quality svg graphics, icons, illustrations, diagrams, logos, charts, patterns, and inline svg code. use when the user asks to make a beautiful svg, generate an .svg file, fix or optimize svg markup, convert a visual concept into svg, design an icon system, or verify svg accessibility, safety, path data, viewbox, gradients, masks, filters, and browser-safe rendering.
-
darwin-agent Bundle XLSXUse 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.
-
darwin-agent Skill ReferenceComponent-authoring reference for HarnessX evolve rounds. Covers the @tool signature and TOOL_SPEC workflow, MultiHookProcessor (hook dispatch table, event fields, messages-mutation contract), system-prompt template editing (Cases A/B/C), config.yaml shape, and the signal→knob guide for the Configuration lever. Read when implementing any lever — Action, Control, Instruction, or Configuration.
-
blencorp Bundle NextjsNext.js 15+ App Router development patterns including Server Components, Client Components, data fetching, layouts, and server actions. Use when creating pages, routes, layouts, components, API route handlers, server actions, loading states, error boundaries, or working with Next.js navigation and metadata.
-
blencorp Bundle Shadcnshadcn/ui component library patterns with Radix UI primitives and Tailwind CSS. Use when creating tables, forms, dialogs, cards, buttons, or any UI component using shadcn/ui, installing shadcn components, or styling with shadcn patterns.
-
blencorp Bundle TailwindcssTailwind CSS v4 utility-first styling patterns including responsive design, dark mode, and custom configuration. Use when styling with Tailwind, adding utility classes, configuring Tailwind, setting up dark mode, or customizing the theme.
-
acejou27 Bundle VercelVercel deployment platform documentation - use for deploying Next.js apps, serverless functions, edge middleware, and CI/CD workflows
-
acejou27 Bundle Shadcn UIShadcn UI component library - beautifully designed React components built with Radix UI and Tailwind CSS
-
acejou27 Bundle Chrome DevtoolsUse this skill when working with Chrome DevTools, browser debugging, performance profiling, network analysis, JavaScript debugging, CSS inspection, element inspection, console usage, or any web development debugging workflows.
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 update-existing-branch, vercel, shadcn-ui. 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.