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.
-
coupler-io Bundle Coupler Live ArtifactBuild a live Cowork artifact (persistent HTML widget) backed by a Coupler.io dataflow. Use this skill whenever the user wants a live dashboard, persistent widget, daily-check page, or interactive explorer over Coupler.io data — including phrases like "live artifact for Coupler", "Coupler dashboard widget", "build a widget over a Coupler dataset", "Coupler.io live dashboard", "build a daily dashboard from a Coupler dataflow", or any time they ask to render Coupler data in a re-openable view that auto-refreshes. Triggers even when the user does not say "skill" or "artifact" but describes the same outcome (e.g. "I want a page I can check every morning that pulls my Coupler data").
-
techwavedev Skill Cc Skill Project Guidelines ExampleProject Guidelines Skill (Example)
-
ngxtm-devkit Bundle Vue ExpertProvides Vue 3 expertise including Composition API, reactivity system, component patterns, performance optimization, state management with Pinia, and Nuxt.js integration. Use this skill for Vue component issues, reactivity problems, re-rendering issues, or state management challenges.
-
ngxtm-devkit Bundle Senior ArchitectComprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. Includes architecture diagram generation, system design patterns, tech stack decision frameworks, and dependency analysis. Use when designing system architecture, making technical decisions, creating architecture diagrams, evaluating trade-offs, or defining integration patterns.
-
ngxtm-devkit Bundle Senior FullstackComprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects, analyzing code quality, implementing design patterns, or setting up development workflows.
-
rysweet Bundle Transcript Viewer 4Convert and browse session transcripts as HTML or Markdown. Supports Claude Code JSONL logs (auto-saved to ~/.claude/projects/) and GitHub Copilot CLI JSONL logs (auto-saved to ~/.copilot/session-state/*/events.jsonl). Auto-detects log source based on available directories and file format. Supports viewing the current session, a specific session by ID, agent background task output files, or all project sessions with optional date-range filtering.
-
hironow Bundle Develop Web GameUse when building or iterating on a web game (HTML/JS) and a reliable development + testing loop is needed: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.
-
maslennikov-anton Bundle Frontend EngineerРеализовывать веб-интерфейсы: компоненты, состояние, API-интеграция, UX на уровне кода, производительность и качество frontend-кода.
-
maslennikov-anton Bundle Solution ArchitectПроектировать архитектуру: component boundaries, integrations, NFR, data flows, contracts, trade-offs; not task-level plan or ADR-only writeup.
-
jcdavis131 Skill A11Y GateStatically verify new UI primitives for accessibility — animations gated behind prefers-reduced-motion, keyboard accessible, ARIA present — before declaring the primitive done. Use when authoring or modifying a UI primitive (component, page section, interactive widget), especially interactive/animated ones. Pairs well as a fill-the-wait task while builds run.
-
jcdavis131 Skill Validate GateRun the cheapest non-trivial correctness gate for the change type — install (offline-preferring) + typecheck for frontend, smoke-import + targeted tests for Python — before declaring a task done. Use after any code edit, before marking a task complete, and before moving to the next board item.
-
kaiohenricunha Bundle Pulumi Specialist 2Deep-dive Pulumi stack review, component design, Automation API audit, and secrets management. Use for structured investigations of Pulumi stack drift, ComponentResource coupling, ESC configuration, and Automation API workflows. Triggers on: "Pulumi audit", "stack review", "Automation API review", "ComponentResource design", "ESC audit", "Pulumi secrets", "Pulumi testing".
-
majesticlabs-dev Skill Tailwind Coder 2Use when applying Tailwind CSS styling to Rails views. Uses utility classes, responsive design patterns, and integrates with Rails view helpers.
-
majesticlabs-dev Bundle Dialog Patterns 2Native HTML dialog patterns for Rails with Turbo and Stimulus. Use when building modals, confirmations, alerts, or any overlay UI. Triggers on modal, dialog, popup, confirmation, alert, or toast patterns.
-
majesticlabs-dev Bundle Frontend Design 2Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Includes framework-specific guidance for Tailwind, React, Vue, and Rails/Hotwire ecosystems.
-
majesticlabs-dev Bundle UI Code Auditor 2Review source code for UI quality, accessibility violations, and performance anti-patterns. Static code analysis (NOT screenshot-based). Provides file:line references with severity, WCAG refs, and fix suggestions.
-
majesticlabs-dev Skill Frontend Performance 2Use when modifying layouts, adding assets, or optimizing page speed. Frontend performance patterns for Core Web Vitals (LCP, CLS, INP). Covers font loading, resource preloading, asset scoping, and render-blocking elimination. Not for backend performance — use performance-reviewer instead.
-
openlinksoftware Bundle YouidGenerate, verify, and manage Web-scale verifiable digital identities (NetIDs) using semantic web standards. Produces X.509 certificates (self-signed or CA-signed via Let's Encrypt/ZeroSSL), WebID profile documents (Turtle, JSON-LD, RDFa HTML), identity card HTML pages with optional OPAL AI widget, vCard VCF, and complete linked-data identity bundles. Uploads identity documents to WebDAV/LDP endpoints via curl. Verifies existing WebID profiles by fetching and executing SPARQL queries against URIBurner. Triggers on phrases like "generate a NetID", "create a YouID identity card", "generate a WebID profile for", "create a WebID profile", "verify WebID", "verify identity at", "generate X.509 certificate for", "upload identity documents to", "delegate identity for", "what is a NetID", "define WebID", "explain YouID", "self-sovereign identity", "digital identity card", "WebID-TLS", "DPKI certificate". Compatible with the OpenLink YouID browser extension.
-
openlinksoftware Bundle PinchtabUse this skill when a task needs browser automation through PinchTab: open or inspect web pages, click through flows, fill forms, scrape page text, export screenshots or PDFs, manage persistent browser profiles, or collect article source material for RDF, HTML, and Markdown outputs. Prefer this skill for token-efficient browser work driven by fresh accessibility refs such as e5 and e12.
-
openlinksoftware Bundle Dbpedia Query SkillTransform natural language questions into SPARQL queries for DBpedia and generate beautiful HTML results pages. Query the DBpedia knowledge graph using plain English prompts.
-
openlinksoftware Bundle Screencast RecorderRecord screencast videos of web application interactions using shot-scraper video. Use when the user says: record a screencast, record a video demo, make a walkthrough of, record this session, record what you just did, add voice-over narration, or mix narration into a screencast. Handles mTLS-authenticated endpoints (linkeddata.uriburner.com:5443), local dev server demos, after-the-fact recording from curl session history, optional OpenAI TTS MP3 generation, dual-format storyboards (YAML/RDF Turtle), and DEFAULT distribution HTML that MUST embed the primary MP4 via HTML5 video (never download-only). Male default voice: onyx.
-
openlinksoftware Bundle Wc2026 Match ReportGenerate a complete single-file HTML intelligence report for the FIFA World Cup 2026 from live Knowledge Graph data. Three report types: match report (a fixture, Team A vs Team B), player report (a single player across the tournament), and analytics scatter report (tournament-wide player comparisons). Pick the player report for single-person requests and the analytics scatter report for cross-player metric comparisons; everything else defaults to the match report.
-
openlinksoftware Bundle Website From WebdavPublish a static HTML/CSS/JS website (generated by an RDF-Turtle + SHACL + Jinja2 pipeline, e.g. sites/openlink/rdf/build.py) to a Virtuoso WebDAV root and map a public route to it via isql/VHOST_DEFINE. Use for deploying or updating an already-built OpenLink-style portfolio site onto a WebDAV target, verifying a live route serves the generated content, or producing a deployable bundle when live credentials aren't available. Triggers on phrases like "publish this site to WebDAV", "deploy the generated site", "set up an initial OpenLink site from a WebDAV root", "is this site live", or any request to push a pre-rendered static site onto a Virtuoso WebDAV/VHOST target. Does not author or edit RDF content, run the SHACL/Jinja2 pipeline's internal logic, or render pages live from SPARQL — see references/rdf-content-mode.md for the boundary.
-
openlinksoftware Bundle Wikidata Query SkillTransform natural language questions into SPARQL queries for Wikidata and generate beautiful HTML results pages. Query the Wikidata knowledge base using plain English prompts.
-
openlinksoftware Bundle Infographic DescriberGenerate RDF-Turtle descriptions (schema:ImageObject, schema:VideoObject, schema:WebPage) for infographic files in a WebDAV directory, using SHACL shapes as the property contract. Trigger when: user asks to describe infographics, generate metadata for a DAV directory, create RDF descriptions for image/video collections, or apply a SHACL shape to bulk-describe files. Handles content negotiation (HTML describe pages vs SPARQL DESCRIBE), filename-derived metadata, thumbnail URL detection, and category inference.
-
thearchitectit Bundle Webapp TestingToolkit for interacting with and testing local web applications using Playwright. This skill should be used when verifying frontend functionality, debugging UI behavior, capturing browser screenshots, checking page content, or automating browser interactions for testing purposes.
-
thearchitectit Bundle IOS Simulator Skill29 production-ready scripts for iOS app testing, building, and automation. Provides semantic UI navigation, build automation, accessibility testing, and simulator lifecycle management. Optimized for AI agents with minimal token output.
-
hironow Bundle Add Request ProtectionProtect a server-side HTTP route or endpoint — API route, form handler, auth endpoint, webhook — with Arcjet, covering rate limiting, bot detection, email validation, and abuse prevention. Works across Next.js, Express, Fastify, SvelteKit, Remix, Bun, Deno, NestJS, and Python (Django/Flask). Use when the user says "add rate limiting", "block bots", "prevent brute force", or "secure my endpoint", even without mentioning Arcjet. Not for code with no HTTP request (tool calls, MCP handlers, agent loops, workers) — that is add-guard-protection. Uses the Arcjet CLI (`bunx @arcjet/cli` or `brew install arcjet`) for authentication, site/key setup, remote rule management, and traffic verification.
-
1t1scool Skill A11YAccessibility audit of a page against WCAG — runs axe-core via Playwright when available (static HTML fallback), plus a manual checklist (keyboard, focus, contrast, ARIA, landmarks, headings, alt, labels), and reports findings grouped by severity with WCAG Success Criterion references and concrete fixes. Use when user says "аудит доступности", "проверь a11y", "WCAG", "доступность сайта", "accessibility audit", or types /a11y.
-
1t1scool Skill SliceScaffold a Feature-Sliced Design slice (layer + name) in the current Next.js/FSD project — detects the repo's real conventions (TS/JS, CSS Modules, barrel format, naming) and generates the folder, segments, component stub and index.ts. Use when user says "создай слайс", "заскаффоль фичу", "новый widget/entity/feature", "scaffold slice", "new FSD slice", or types /slice.
-
1t1scool Skill DeployCodified release for a Next.js app on Jenkins + Traefik + Kubernetes — runs pre-flight checks (clean tree, branch, build, lint/tests), triggers the Jenkins deploy, then post-deploy verifies HTTP 200 smoke + real gzip/br compression (the two-Ingress/Traefik compress gotcha). Use when user says "задеплой", "выкати релиз", "релиз на прод/стейдж", "deploy", "release", or types /deploy.
-
1t1scool Skill InvoiceGenerate an invoice / счёт / акт from a deal scope (a proposal file or free-text line items), with auto-numbering and requisites from a billing profile — outputs a markdown invoice plus a standalone printable HTML (print-to-PDF). Defaults to RF self-employed/ИП, no VAT. Use when user says "выстави счёт", "сделай инвойс", "счёт клиенту", "акт", "invoice", or types /invoice.
-
1t1scool Skill 1t1scopyPixel-parity port of a page from a reference (original site or local HTML mirror) to the current Next.js/FSD project. Uses Playwright MCP to capture original + ours at multiple viewports, diffs layout/DOM/computed styles, then migrates legacy CSS to CSS Modules until parity. Trigger: /1t1scopy <route>
-
1t1scool Skill ProposalGenerate a commercial proposal (КП) for a web/frontend client from a frontend-audit result, a client URL, or a free-text scope — turns found problems into business impact, scope, three tiers, price ranges, timeline and a clear next-step CTA. Use when user says "сделай КП", "коммерческое предложение", "предложение клиенту", "напиши оффер", "proposal", or types /proposal.
-
1t1scool Bundle Frontend AuditRun a productized frontend audit and generate cold-outreach for it. Given a niche/segment or explicit URLs, finds candidate sites, measures them with Lighthouse + security headers + real compression, and produces per-site mini-audits plus personalized outreach drafts. Use when user says "прогони сайты", "аудит фронтенда", "найди клиентов на аудит", "outreach по сайтам", "frontend audit", or names a niche to audit.
-
moshe-ship Skill Raqeeb 2فاحص RTL — اكتشف مشاكل الاتجاه من اليمين لليسار في HTML/CSS واحصل على تقييم RTL (0-100)
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 coupler-live-artifact, cc-skill-project-guidelines-example, vue-expert. 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.