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.
-
bkr-57 Skill Symfony UXSymfony UX frontend stack combining Stimulus, Turbo, TwigComponent and LiveComponent. Use when building modern Symfony frontends, choosing between UX tools, creating interactive components, handling real-time updates, or integrating multiple UX packages. Triggers - symfony ux, hotwire symfony, stimulus turbo, live component, twig component, frontend symfony, interactive ui, real-time symfony, which ux package, which tool should I use, how to make this interactive, SPA feel, reactive component, server-rendered component. Also trigger when the user asks a general question about frontend architecture in Symfony or wants to combine multiple UX packages together.
-
bkr-57 Bundle Live ComponentSymfony UX LiveComponent for dynamic server-rendered UI. Use when building interactive components that re-render via AJAX, real-time forms, data binding, live validation, or reactive UI without writing JavaScript. Triggers - live component, AsLiveComponent, LiveProp, LiveAction, data-model, real-time form, dynamic UI, AJAX component, reactive PHP, two-way binding, server re-render, live search, live filter, live validation, ComponentWithFormTrait, emit, LiveListener, polling, defer, lazy component, data-loading, writable prop, URL binding, component communication. Also trigger when the user wants a component that updates itself based on user input without writing JavaScript, or wants Vue/React-like reactivity in PHP.
-
commonstackai Skill Clawbox UI I18NUse when changing ClawBox React components, dialogs, settings pages, sidebar flows, or any user-facing copy that must stay aligned with react-i18next and the project's bilingual locale files.
-
commonstackai Skill Clawbox Chat StreamUse when changing or debugging ClawBox chat sending, SSE streaming, reasoning blocks, tool-call blocks, session synchronization, or title generation across the React frontend and the Bun OpenClaw bridge.
-
dragble Skill Dragble ExportExport content from the Dragble editor as HTML, JSON, plain text, image, PDF, or ZIP. Save and load designs, auto-save patterns, design JSON structure, and template validation.
-
dragble Skill Dragble IntegrationAdd the Dragble drag-and-drop editor to React, Vue, Angular, or vanilla JavaScript. Covers installation, component setup, lifecycle events, multiple instances, TypeScript types, and SDK/editor versioning.
-
dragble Skill Dragble Custom ToolsBuild custom drag-and-drop tools and property editor widgets for the Dragble editor. Covers tool registration, declarative templates, JS renderers, property definitions, widgets, property states, transformers, validators, canvas scripts, and email-safe HTML patterns.
-
emanuelvogt Bundle Grill My IdeaExpert, skeptical business analyst for a business / startup / product idea. Grills the user about the idea (one round of pointed questions at a time), then runs deep market research in the home country (default Brazil) and internationally — TAM/SAM/SOM, competitors, demand evidence, pricing, regulation, costs — builds a financial model with pessimistic / realistic / optimistic scenarios (cost to run, users needed to break even, cash needed), issues a critical verdict (GO / VALIDATE-FIRST / PIVOT / KILL) and compiles a complete dossier (one self-contained dossier.html plus its markdown sources) into ideas/<slug>/. Use it whenever the user describes a business idea, startup, SaaS, app, marketplace, side project, "estou pensando em fazer X", and wants to know if it is viable, how big the market is, who the competitors are, what it would cost, how many customers they need, or asks to validate / stress-test / grill / roast / "analisa essa ideia" / "vale a pena?" — even when they don't say "validate". Not for code
-
fab2295 Bundle Sap Cap Nodejs DevSAP Cloud Application Programming Model (CAP) development skill for the **Node.js runtime only**. Domain-first: prefers CDS schema, annotations, projections, and CAP's generic providers over hand-written handler code ("less code → less mistakes"). Use when the user asks to: build CAP applications, define CDS models, design entities / associations / views / projections, add annotations (validation, authorization, UI, search, drafts), configure databases (SQLite / HANA / PostgreSQL through CAP), deploy to SAP BTP (Cloud Foundry or Kyma), wire multitenancy / messaging, or add CAP plugins. Strict scope — this skill ONLY develops SAP CAP Node.js. It MUST refuse, and tell the user why, whenever a request is: - Frontend / UI implementation (Fiori Elements custom code, UI5 controls, React, Vue, HTML/CSS/JS UI work, any browser-side code). CAP-side `@UI.*` annotations in `.cds` are in scope; writing the UI itself is not. - Backend in any other language or stack (Java CAP, Spring, plain Node/Express, NestJS, Python, Go
-
gaming12325 Bundle Magazine Layout将文本内容转换为精美的杂志风格HTML页面,支持专业排版和多种视觉风格。触发场景:(1) 用户想将文本/文章转换为杂志风格HTML,(2) 用户提到"杂志排版"、"杂志设计"、"文章排版"、"专业排版"、"文本美化"、"magazine layout",(3) 用户需要优雅排版的HTML页面,(4) 用户需要将设计内容导出为PDF。支持12种独特视觉风格,使用Tailwind CSS。
-
gospeloflukeselfconcern1691 Bundle Open Claude DesignAccess the Anthropic product named Claude Design when the request contains that exact name, a claude.ai/design URL, or a .dc.html file. Use for its projects, files, design systems, previews, conversations, comments, sharing, and code-to-design or design-to-code synchronization; otherwise stay inactive.
-
gospeloflukeselfconcern1691 Bundle Open Claude UI ReviewReview or polish a product UI for accessibility, brand fidelity, hierarchy, rhythm, responsive behavior, themes, interaction states, and generic AI-template patterns. Use for visual audits, accessibility checks, UX polish, UI critique, or pre-ship design review. Do not use for generic code review, backend review, or API design.
-
guerthcastro Skill Solid ReviewAudit any C#, TypeScript, or Angular code against the five SOLID principles and Clean Architecture layering rules, then produce a severity ranked report with concrete refactorings. Use this skill whenever the user asks to review code for SOLID compliance, identify design violations, refactor toward Clean Architecture, or get a design quality report on a class, service, handler, component, or module. Also use when the user asks "does this follow SOLID?", "is this clean?", "what is wrong with this design?", or pastes code and asks for architectural feedback.
-
magnuscole Skill Landing Page LatamDiseña y genera landing pages de conversión usando Next.js 14+ App Router, Tailwind CSS y shadcn/ui, optimizadas para audiencia LATAM en español. Cubre arquitectura de secciones (hero, social proof, oferta, FAQ, CTA), Core Web Vitals (LCP <1s, CLS <0.1), métodos de pago locales (Stripe, MercadoPago, Culqi, Yape, PSE), y dolarización de precios. Use cuando el usuario diga "crea una landing page", "redesign de mi homepage", "página de ventas para [producto]", "landing para mi curso/SaaS", o necesite TSX listo para producción.
-
skillmedev Skill Next JS App RouterBuilds and reviews Next.js App Router code - server/client component boundaries, data fetching, caching and revalidation choices, streaming with Suspense, and Server Action mutations - and delivers routes where every dynamic-vs-cached decision is explicit. Use when someone asks "should this be a client component", "why is my data stale", "where do I put use client", "how do I stream this page", or "how do server actions work". Do NOT use for Vercel-specific runtime and cost tuning of an already-built app - use next-on-vercel-perf instead; for edge middleware and ISR deployment topology - use vercel-edge-and-isr instead; for framework-agnostic Core Web Vitals work - use web-performance instead; for designing an application-wide cache layer beyond the framework - use caching-strategy instead.
-
thilinatlm Bundle ConfluenceThis skill should be used when the user asks to manage Confluence Cloud content from the command line — list/search Confluence spaces, list/create/update/delete Confluence pages, **download existing pages locally** (JSONL + optional markdown) for offline reference or edit-and-reupload, upload attachments, configure Confluence authentication, store API tokens securely, switch between Confluence profiles, or publish a richdoc-generated Confluence bundle. Triggers include "publish to Confluence", "update Confluence page", "download Confluence page", "pull Confluence content", "export Confluence page to markdown", "list Confluence spaces", "Confluence auth", "Confluence login", "store Confluence token", "publish-bundle", or "send this to Confluence". For authoring polished HTML documents that will eventually be published to Confluence, use the `richdoc` skill first (`richdoc export confluence`) and then use this skill to publish the resulting bundle.
-
asgard-ai-platform Skill Release Canary發佈 @asgard-js/core 和 @asgard-js/react 的 canary 版本到 npm
-
azlekov Bundle ReactThis skill should be used when the user asks to "create a React component", "use React hooks", "handle state", "implement forms", "use useOptimistic", "use useActionState", "create Server Components", "add interactivity", or discusses React patterns, component architecture, or state management. Always use the latest React version and modern patterns.
-
azlekov Bundle NextjsThis skill should be used when the user asks to "create a Next.js app", "build a page", "add routing", "implement server components", "add caching", "create API routes", "use server actions", "add metadata", "set up layouts", or discusses Next.js architecture, App Router, data fetching, or rendering strategies. Always use the latest Next.js version and modern patterns.
-
azlekov Bundle ShadcnThis skill should be used when the user asks to "add a component", "use shadcn", "install Button", "create Dialog", "add Form", "use DataTable", "implement dark mode toggle", "use cn utility", or discusses UI components, component libraries, or accessible components. Always use the latest shadcn/ui version and modern patterns.
-
azlekov Bundle TailwindcssThis skill should be used when the user asks to "style with Tailwind", "add CSS", "configure theme", "use @theme", "add custom colors", "implement dark mode", "use container queries", "add responsive design", "use OKLCH colors", or discusses styling, theming, or visual design. Always use the latest Tailwind CSS version and modern patterns.
-
azlekov Bundle Supabase ExpertThis skill should be used when the user asks to "create a Supabase table", "write RLS policies", "set up Supabase Auth", "create Edge Functions", "configure Storage buckets", "use Supabase with Next.js", "migrate API keys", "implement row-level security", "create database functions", "set up SSR auth", or mentions 'Supabase', 'RLS', 'Edge Function', 'Storage bucket', 'anon key', 'service role', 'publishable key', 'secret key'. Automatically triggers when user mentions 'database', 'table', 'SQL', 'migration', 'policy'.
-
bholmesdev Skill Alt TextWrite concise alt text for a local image file. Use this when the user asks for alt text, accessibility text, or a brief image description for a specific local image path. Pass the target image path as `$0`.
-
browseros-ai Bundle Write Internal DocsWrite a doc into the private internal-docs repo as Markdown plus a rendered HTML sibling, tidy the repo's structure and index, and open a PR to browseros-ai/internal-docs.
-
bymaxone Bundle AuditWhole-system QA and security audit of a project, run as the Security QA engineer of a peer agent team. Point it at a target: a Jira ticket key (it verifies Jira access first, reads the acceptance criteria, and reports each PASS/FAIL/BLOCKED/NOT-VERIFIABLE with evidence), a branch or ref range or PR (it scopes the hunt to the change, the way a code review scopes a diff), or nothing (the whole system, via the signed scope in .claude/qa/scope.md). It maps the stack and its trust boundaries, hunts by domain (authentication, authorization and tenant isolation, injection and input, cache/Redis, database/Postgres, observability, transport and configuration, architecture, frontend, supply chain) with read-only finder agents, probes the running stack against allow-listed hosts only, and admits a finding only after verification: a runnable reproduction, captured evidence and verified impact, with an independent verifier for every hunted candidate. Findings carry ASVS 5.0, CWE and API Top 10 references and a CVSS vector
-
bymaxone Skill TesterWrite tests for a file or component. Detects the project's test stack (Jest/Vitest, React Native/React DOM/pure logic, or Rust cargo test), enforces 100% file coverage, every it() carries a comment, no fake classNames, real branches. Auto-runs tests and verifies coverage on completion.
-
canonical Bundle Test WriterUse whenever you need to write a unit, integration or component test.
-
canwhite Skill No UseeffectReact 无 useEffect 编码规范 - 禁止直接使用 useEffect,使用替代模式代替
-
chawkitariq Bundle Vue ComponentCrée ou modifie un composant Vue 3 conforme aux standards Fidely. Déclencher quand : création composant (CardItem, CardForm, Scanner, QRCodeDisplay ou nouveau), ajout prop/emit, refactoring template, UX mobile (touch target), choix composant Nuxt UI. Mots-clés : CardItem.vue, CardForm.vue, Scanner.vue, QRCodeDisplay.vue, defineProps, defineEmits, UCard, UButton, UForm, UFormField, UInput, UInputNumber, UProgress, UModal, size="lg", truncate, flex gap, ClientOnly, onMounted, onBeforeUnmount.
-
chawkitariq Bundle Nuxt StandardsStructure fichiers et conventions Nuxt 4 pour Fidely (dossier app/, pages/, components/, composables/). Déclencher quand : ajout/déplacement de fichier, création de layout, page Nuxt, SSR safety, routing (navigateTo, useRoute), pattern ClientOnly, dynamic import html5-qrcode/qrcode, performance. Mots-clés : app/, pages/, layouts/, components/, useDB, SSR, onMounted, ClientOnly, NuxtLink, navigateTo, definePageMeta, html5-qrcode, qrcode, onBeforeUnmount, v-for :key, v-html, UModal, UForm.
-
chawkitariq Bundle Security ChecksChecklist sécurité et RGPD avant tout commit ou ajout de feature dans Fidely. Déclencher quand : commit, ajout formulaire, manipulation IndexedDB/localStorage, scan QR, ajout dépendance, accès caméra, affichage HTML dynamique. Mots-clés : secret, API key, UUID, RGPD, données personnelles, localStorage, IndexedDB, v-html, html5-qrcode, validation input, .env, gitignore, pnpm audit.
-
chawkitariq Bundle Coding StandardsStandards de codage à appliquer sur tout code écrit ou modifié dans Fidely. Déclencher quand : écriture ou revue de TypeScript/Vue, création de composable (useDB, useClient), ajout de fonction dans utils/, revue de types (Card, ClientData, CardFormData), JSDoc manquant. Mots-clés : TypeScript strict, any, import type, JSDoc, @param, @returns, <script setup>, defineProps, defineEmits, computed, uuidv7, zod, eslint, interface Card, interface ClientData.
-
chawkitariq Bundle Testing PatternsPatterns de tests Fidely : Vitest + @nuxt/test-utils + fake-indexeddb + happy-dom. Déclencher quand : écriture de test, ajout composable (useDB, useClient), nouveau composant Vue, modification d'une fonction dans utils/, isolation IndexedDB, mock Nuxt (useToast, navigateTo). Mots-clés : describe, it, expect, beforeEach, IDBFactory, resetDB, mountSuspended, mockNuxtImport, fake-indexeddb, useDB.test.ts, CardItem.test.ts, CardForm.test.ts, updatePoints, consumeReward, addCard, getOrCreateClientId.
-
duckduckgo Skill Publicwww SearchSearch PublicWWW to find websites using specific HTML/JS/CSS snippets. Use this skill to check if a cookie popup is from a widespread third-party CMP, to find additional test URLs for a CMP rule, or to discover how many sites use a particular consent banner pattern.
-
ehyland Bundle MantineA fully featured React components library
-
xuzhougeng Bundle Wispterm DiagnosticsUse when a user wants to report, troubleshoot, or collect context for a WispTerm issue, including crashes, rendering/DPI glitches, high CPU, keyboard/input bugs, selection/copy/scrolling, SSH/SCP failures, SSH image preview failures, HTML preview/browser panel failures, SSH disconnects such as ssh_packet_write_poll/eother, file explorer behavior, updater failures, or remote console behavior.
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 symfony-ux, live-component, clawbox-ui-i18n. 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.