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.
-
jmagly Skill Color Accessibility 2WCAG accessibility analysis for color palettes including contrast ratios, compliance checking, and remediation suggestions. Use when user needs to verify colors meet accessibility standards.
-
18816132863 Bundle Markitdown 2Convert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more.
-
18816132863 Bundle Frontend Design 2Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
-
18816132863 Bundle Xiaoyi XLSX 2Create, edit, or fix spreadsheet files (.xlsx/.xlsm/.csv/.tsv). Trigger whenever the task produces or modifies a spreadsheet — even if the user never says 'Excel'. Covers: data analysis, sorting, filtering, pivot summaries, formulas (VLOOKUP/INDEX+MATCH/SUMIFS), charts, cross-sheet references, conditional formatting, financial models, budgets, trackers, and invoices. Implicit triggers include: '帮我做个表', '整理/分析/汇总/对比数据', 'organize this data', 'build a budget', 'chart this'. More broadly, if the user asks to analyze, summarize, compare, track, or visualize data and a spreadsheet is the natural output, use this skill. Always trigger for uploaded .xlsx/.csv/.tsv files. Keywords: 表格/数据分析/汇总/对比/图表/跨表/财务/dashboard/chart. Do NOT trigger when the primary deliverable is a Word doc, HTML report, standalone script, or database pipeline.
-
18816132863 Skill Gesture HTML 2创建一个通过摄像头进行手势交互的网页,利用MediaPipe实时识别手势,实现对网页元素的直观操控。当需要「通过摄像头识别手势」与网页交互时使用这个Skill。
-
18816132863 Skill HTML UX Guidance 2该skill提供了很专业的html生成指导。当用户需求与html相关,请参考本skill指导。
-
mk-organization-1 Skill Agency Senior Developer 3Premium implementation specialist - Masters Laravel/Livewire/FluxUI, advanced CSS, Three.js integration
-
mk-organization-1 Skill Agency Frontend Developer 3Expert frontend developer specializing in modern web technologies, React/Vue/Angular frameworks, UI implementation, and performance optimization
-
mk-organization-1 Skill Agency Accessibility Auditor 3Expert accessibility specialist who audits interfaces against WCAG standards, tests with assistive technologies, and ensures inclusive design. Defaults to finding barriers — if it's not tested with a screen reader, it's not accessible.
-
mk-organization-1 Skill Backend Patterns 3Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
-
mk-organization-1 Skill Coding Standards 3TypeScript、JavaScript、React、Node.js開発のための汎用コーディング標準、ベストプラクティス、パターン。
-
mk-organization-1 Skill Backend Patterns 4后端架构模式、API设计、数据库优化以及针对Node.js、Express和Next.js API路由的服务器端最佳实践。
-
mk-organization-1 Skill Coding Standards 4适用于TypeScript、JavaScript、React和Node.js开发的通用编码标准、最佳实践和模式。
-
mk-organization-1 Skill Frontend Patterns 3React、Next.js、状態管理、パフォーマンス最適化、UIベストプラクティスのためのフロントエンド開発パターン。
-
mk-organization-1 Skill Frontend Patterns 4React、Next.js、状态管理、性能优化和UI最佳实践的前端开发模式。
-
ulpi-io Bundle Sentry React Native Sdk 2Full Sentry SDK setup for React Native and Expo. Use when asked to "add Sentry to React Native", "install @sentry/react-native", "setup Sentry in Expo", or configure error monitoring, tracing, profiling, session replay, or logging for React Native applications. Supports Expo managed, Expo bare, and vanilla React Native.
-
ulpi-io Bundle Frontend Design System 2Produce production-grade UI designs using clear design tokens, layout rules, motion guidance, and accessibility checks for consistent, scalable frontend development.
-
ulpi-io Bundle Presentation Builder 2Build editable presentations with slides-grab. Use when creating slide decks as HTML slides, iterating visually in a browser, and exporting approved decks to PPTX or PDF.
-
ulpi-io Bundle React State Machines 2Building reusable React state machine skills with XState v5 and the actor model
-
gigik2a Bundle Check Tlc Express 2Genera un pagellino TLC rapido (punteggio 0-100) sulla complessita e prontezza di un sito telecomunicazioni. Trigger: "check TLC", "verifica sito TLC", "punteggio sito telecomunicazioni", "quanto e complesso il sito", "analisi TLC express", "score TLC", "check rapido sito", "il sito e fattibile?", "TLCBoost". Input: tipo sito (rawland/rooftop/colocation), operatore (Iliad/Cellnex/altro), coordinate, vincoli noti, tipo intervento (new site/upgrade/transfer). Output: pagella HTML visiva con semafori verde/giallo/rosso, score globale, top 5 criticita spiegate in italiano semplice, stima complessita progettuale, CTA verso progetto esecutivo PE completo. Lead magnet TLCBoost per operatori, towerco e progettisti TLC.
-
gigik2a Bundle Check Host Express 2Genera un pagellino ricettivo rapido 0-100 per strutture italiane (agriturismi, B&B, piccoli hotel, case vacanza 5-30 camere) partendo da 6-8 numeri essenziali. Trigger "check ricettivo", "check agriturismo", "pagella hotel", "come va il mio agriturismo", "RevPAR rapido", "quanto rende la mia struttura", "check B&B", "diagnosi rapida ricettivo", "score ricettivo", "semaforo hotel", "il mio agriturismo e messo male?", "HostCheck". Input minimi camere, giorni apertura, notti vendute anno, ricavi camera anno, rating Booking, quota Booking.com, zona/regione, tipologia. Calcola 6 KPI (RevPAR vs zona, Occupancy, ADR, Dipendenza OTA, Rating reputation, Quota diretto) con semaforo verde/giallo/rosso, soglie per tipologia e regione. Output pagella HTML single-page con score globale 0-100, 6 semafori, 3 priorita, CTA verso flusso-hostboost-ricettive. Lead magnet gratuito o 49 EUR per PMI ricettive italiane. Primo touchpoint HostBoost.
-
18816132863 Bundle Xiaoyi Doc Convert 2统一的文档格式转换工具。 支持 Word (DOCX/DOC)、PowerPoint (PPTX/PPT)、Excel (XLSX/XLS)、PDF、Markdown (MD)、HTML 等多种格式互转。 适用场景: - 在多种格式间转换文档(HTML↔PDF、Word↔PDF、Markdown→Word 等) - 批量或单文件转换 - 支持多种格式描述方式,如 excel/xls/xlsx、doc/docx/word、md/markdown 触发方式: - 用户说 "转换文档格式"、"docx转pdf"、"html转ppt"、"excel转pdf"、"md转word" - 使用 "/xiaoyi-doc-convert <文件> <目标格式>" 格式 关键触发词: - 通用:文档转换、格式转换、doc convert、file convert - PDF:转pdf、转PDF、export to pdf、保存为pdf - Word:转word、转doc、转docx、word转换、doc转pdf、docx转pdf - Excel:转excel、转xls、转xlsx、xls转pdf、xlsx转pdf、excel转pdf、表格转pdf - PPT:转ppt、转pptx、转powerpoint、ppt转pdf、pptx转pdf、幻灯片转pdf - Markdown:md转word、md转pdf、markdown转word、markdown转pdf、md转docx、markdown转excel - HTML:html转pdf、网页转pdf、html转word、html转ppt
-
18816132863 Bundle Vercel React Best Practices 2React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
-
18816132863 Bundle Baoyu Url To Markdown 2Fetch any URL and convert to markdown using Chrome CDP. Saves the rendered HTML snapshot alongside the markdown, uses an upgraded Defuddle pipeline with better web-component handling and YouTube transcript extraction, and automatically falls back to the pre-Defuddle HTML-to-Markdown pipeline when needed. If local browser capture fails entirely, it can fall back to the hosted defuddle.md API. Supports two modes - auto-capture on page load, or wait for user signal (for pages requiring login). Use when user wants to save a webpage as markdown.
-
18816132863 Bundle Slidev 2Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, or teaching materials.
-
18816132863 Skill Frontend UI UX Engineer 2A designer-turned-developer who crafts stunning UI/UX even without design mockups. Code may be a bit messy, but the visual output is always fire.
-
gigik2a Bundle Cruscotto Direzionale 2Dashboard KPI mensile per titolari PMI italiane (5-50 dipendenti). Genera un cruscotto direzionale con le 4 prospettive Balanced Scorecard (finanziaria, cliente, processi interni, crescita) adattate alla realta delle piccole e medie imprese. Raccoglie dati mensili (fatturato, costi, incassi, clienti, ore lavorate, scarti), calcola KPI con confronto vs target/budget, mese precedente e stesso mese anno prima, genera sistema alert a semaforo (verde/giallo/rosso) con cause probabili e azioni suggerite. Output: dashboard HTML interattiva self-contained con Chart.js, file XLSX con input/KPI/storico/grafici, JSON strutturato. Servizio ricorrente mensile: il titolare inserisce i dati, riceve il cruscotto aggiornato in 5 minuti. Ogni anomalia salta all'occhio. Tono sintetico, visivo, actionable.
-
gigik2a Bundle Check Edilizia Express 2Genera un pagellino edilizio rapido (punteggio 0-100) sulla prontezza ai permessi edilizi. Trigger: "check edilizia", "verifica permessi", "punteggio pratica edilizia", "posso fare la ristrutturazione", "analisi edilizia express", "score edilizio", "check rapido permessi", "la mia pratica e in regola?", "BuildBoost". Input: tipo intervento (ristrutturazione/ampliamento/nuova costruzione/cambio uso), comune, zona PRG, vincoli noti. Output: pagella HTML visiva con semafori verde/giallo/rosso, score globale, top 5 criticita spiegate in italiano semplice, stima rischio bocciatura pratica, CTA verso progetto architettonico completo. Lead magnet BuildBoost per committenti e imprese edili.
-
gigik2a Bundle Check Impianti Express 2Genera un pagellino impiantistico rapido (punteggio 0-100) sulla conformita impianti elettrici e HVAC. Trigger: "check impianti", "verifica impianti", "punteggio impianti", "i miei impianti sono a norma", "analisi impiantistica express", "score impianti", "check rapido impianti", "impianto elettrico a norma?", "MEPBoost". Input: tipo edificio, anno impianti, potenza impegnata, sistema riscaldamento, classe energetica attuale (se nota). Output: pagella HTML visiva con semafori verde/giallo/rosso, score globale, top 5 criticita spiegate in italiano semplice, stima rischio non conformita, CTA verso audit impiantistico completo / diagnosi energetica. Lead magnet MEPBoost per proprietari, amministratori e facility manager.
-
gigik2a Bundle Flusso Mepboost Studio 2Orchestratore MEPBoost — consulenza energetica e diagnostica impiantistica per edifici. Funnel 3 livelli: Check Express (score 0-100, lead magnet), Audit Impiantistico (conformita DM 37/2008, 299-499 EUR), MEPBoost Studio completo (audit elettrico+termico, diagnosi energetica UNI TS 11300, piano EEM, analisi costi-benefici, 699-1.299 EUR). Attivati quando l'utente dice "MEPBoost", "diagnostica impiantistica", "audit impianti", "bolletta troppo alta", "quanto risparmio con fotovoltaico", "pompa di calore conviene", "cappotto termico costi", "Conto Termico come funziona", "classe energetica migliorare", "caldaia da sostituire", "efficientamento energetico", "diagnosi energetica", "riqualificazione energetica", "TEE certificati bianchi", "impianti a norma", oppure quando BuildBoost rileva necessita adeguamento impianti o l'utente ha fatto check-impianti-express. Produce report DOCX, XLSX piano interventi, dashboard HTML e JSON.
-
gigik2a Bundle Flusso Tlcboost Studio 2Orchestratore TLCBoost — project management completo per siti telecomunicazioni, dal PE alla consegna BEF, con iter autorizzativo D.Lgs. 259/2003 art. 45, sicurezza cantiere e gestione fasi. Usa SEMPRE questa skill quando l'utente dice "progetto sito TLC completo", "TLCBoost", "PE completo iliad", "PE completo Cellnex", "gestione sito telecomunicazioni", "dalla progettazione alla consegna antenna", "iter completo sito radio", "quanto tempo per un new site", "consegnare siti piu velocemente", "PE iliad quanto tempo", "vincolo paesaggistico antenna", "BEF cosa serve", "coordinare tutte le fasi del sito", "project management TLC", "dal PE al BEF", "gestione cantiere antenna completo". Attivala anche per transfer, upgrade, swap, colocation, dismissioni. Produce report DOCX 15-20 pagine, XLSX tracker fasi, dashboard HTML e output JSON strutturato.
-
gigik2a Bundle Check Sicurezza Express 2Genera un pagellino sicurezza cantiere rapido (punteggio 0-100) sulla conformita D.Lgs. 81/2008. Trigger: "check sicurezza", "verifica sicurezza cantiere", "punteggio sicurezza", "il mio cantiere e in regola", "analisi sicurezza express", "score sicurezza", "check rapido cantiere", "devo fare il PSC?", "SafetyBoost". Input: tipo cantiere/attivita, numero imprese, durata presunta, entita lavoro (uomo/giorno), tipo committente. Output: pagella HTML visiva con semafori verde/giallo/rosso, score globale, top 5 criticita spiegate in italiano semplice, stima rischio sanzioni, CTA verso redazione PSC completo / DVR. Lead magnet SafetyBoost per committenti, imprese e coordinatori.
-
gigik2a Bundle Flusso Financeboost Pmi 3Orchestratore FinanceBoost — diagnosi finanziaria completa e controllo di gestione per PMI italiane (5-50 dipendenti), con riclassificazione bilancio, analisi indici, marginalita, proiezioni e piano d'azione. Usa SEMPRE questa skill quando l'utente dice "diagnosi finanziaria", "FinanceBoost", "analisi finanziaria PMI", "controllo di gestione", "come sta la mia azienda", "margini", "bilancio", "budget", "KPI aziendali", "cruscotto direzionale", "non so se guadagno", "cash flow", "liquidita", "quanto vale la mia azienda", "indici di bilancio", oppure quando fornisce dati di bilancio o chiede una valutazione economico-finanziaria di una PMI italiana. Attivala anche per analisi BEP, leva operativa, Du Pont, EVA, benchmark settore, budget previsionale. Emette il payload-dati strutturato (schemas/output-schema.json) da cui il renderer costruisce report DOCX executive, cruscotto XLSX con formule, dashboard HTML e output JSON.
-
gigik2a Bundle Check Salute Finanziaria 2Genera un semaforo finanziario con 5 KPI colorati per PMI italiane partendo da 5-6 numeri di bilancio. Trigger: "check finanziario", "come sta la mia azienda", "salute finanziaria", "semaforo bilancio", "KPI azienda", "check bilancio rapido", "la mia azienda va bene?", "controllo finanziario veloce", "pagella finanziaria". Input minimi: fatturato, utile netto, totale attivo, debiti totali, crediti commerciali, settore. Opzionali: magazzino, debiti commerciali, patrimonio netto. Calcola 5 KPI (ROE, Current Ratio, Indebitamento D/E, Margine Netto, Giorni Crediti) con semaforo verde/giallo/rosso e soglie specifiche per settore tramite benchmark-italia-business. Output: pagella HTML responsiva con score globale 0-100, 5 semafori KPI con confronto settore, 3 aree da approfondire, CTA verso analisi-bilancio-pmi. Tono: comprensibile dal titolare senza competenze contabili. Lead magnet gratuito o 49 euro per PMI italiane 5-50 dipendenti.
-
gigik2a Bundle Flusso Buildboost Studio 2Orchestratore BuildBoost — diagnostica edilizia completa per iter autorizzativo, conformita urbanistica, progettazione architettonica e coordinamento cantiere. Usa SEMPRE questa skill quando l'utente dice "diagnostica edilizia", "BuildBoost", "iter autorizzativo completo", "pratica edilizia completa", "ristrutturazione cosa serve", "ampliamento come fare", "cambio destinazione d'uso iter", "nuova costruzione permessi", "CILA SCIA PDC quale serve", "conformita urbanistica totale", "quanto costa e quanto tempo per i permessi", "dalla pratica al cantiere", oppure quando descrive un intervento edilizio chiedendo supporto completo dall'analisi urbanistica alla chiusura lavori. Attivala anche per demolizione-ricostruzione, sanatoria edilizia, varianti in corso d'opera, fine lavori e agibilita. Produce report DOCX, XLSX cronoprogramma, dashboard HTML e output JSON.
-
gigik2a Bundle Flusso Strategyboost Pmi 2Orchestratore StrategyBoost — diagnosi strategica completa e piano di crescita per PMI italiane (5-50 dipendenti), con analisi 5 forze Porter, VRIO, catena del valore, mappa posizionamento, opzioni Ansoff e piano strategico 1-3 anni. Usa SEMPRE questa skill quando l'utente dice "diagnosi strategica", "StrategyBoost", "analisi strategica PMI", "strategia aziendale", "dove va la mia azienda", "come crescere", "vantaggio competitivo", "posizionamento", "piano strategico", "come differenziarmi", "analisi competitor", "entrare in un nuovo mercato", oppure quando descrive la propria azienda chiedendo direzione, posizionamento o crescita. Attivala anche per analisi settore, SWOT, strategie di differenziazione, diversificazione, alleanze, integrazione verticale, corporate strategy PMI. Produce report DOCX 15-20 pagine, mappa strategica XLSX, dashboard HTML e output JSON strutturato.
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 color-accessibility, markitdown, frontend-design. 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.