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.
-
fernandokylas Bundle Ground Inversion GuardKeep colour contrast and hierarchy intact when a page flips between light ("paper") and dark ("obsidian") grounds — dark hero on a light site, inverted footer, dark-mode toggle, alternating sections, cards on a dark band. Accent tokens are re-mapped per ground (a deep green *fill* on paper becomes a bright mint *text* colour on dark) instead of being reused as-is, and every text/background pair is checked against WCAG AAA. Use this whenever generating or reviewing CSS/Tailwind/design tokens that involve a dark section, `.dark`/`.inverted` modifier, `prefers- color-scheme`, theme variables, badges/links/buttons on coloured backgrounds, or when the user says "dark mode", "invert this section", "the green looks muddy on dark", "make sure it's accessible", or "contrast".
- fernandokylas Bundle Reduced Motion Enforcer
Make every animation, transition, transform, parallax, scroll effect, GSAP/JS timeline, autoplay video, or smooth-scroll respect `prefers-reduced-motion` — stripping displacement and scale under `reduce` while keeping opacity fades and state changes so nothing disappears. Use this whenever CSS or JS output includes transition, animation, @keyframes, transform, translate, scale, parallax, ScrollTrigger, gsap, framer-motion, scroll-behavior, autoplay, carousels, or hover/entrance effects — even if the user never mentions accessibility — and whenever the user says "reduced motion", "motion sickness", "vestibular", "accessible animations", "a11y", "WCAG 2.3.3", or asks to audit a page's motion.
- fernandokylas Bundle Z Index Coordinate Matrix
Replace arbitrary z-index numbers (999, 9999, 99999) with a declared depth matrix — --z-subground (-10), --z-ground (0), --z-rail-sticky (100), --z-navigation (200), --z-disclosure (300), --z-modal (400), --z-critical (500) — plus deliberate stacking contexts (isolation: isolate) at component roots and the browser top layer for dialogs/popovers. Use this whenever writing CSS with position: fixed/sticky/absolute, sticky headers or rails, dropdowns, popovers, tooltips, modals, toasts, overlays, parallax/background layers, or when the user says "z-index", "it's rendering behind/under", "the dropdown is hidden by the next card", "stacking", "overlay order", "the modal is under the header", or any layering bug.
- fernandokylas Bundle Gsap Timeline Orchestrator
Choreographed page and section entrances with GSAP timelines — a single master gsap.timeline() per section, elements arriving in reading order with 30–70ms staggers (stagger: 0.03–0.07), power4.out / expo.out easing, and small offsets (y: 15–30) — instead of CSS keyframes firing all at once or scattered gsap.to() calls. Use this whenever the user wants elements to "animate in", "fade in on load", "reveal on scroll", "stagger", "cascade", "waterfall", a "cinematic" or "premium" page load, hero/section entrance animation, or mentions GSAP, ScrollTrigger, timeline, or intro animation — and whenever a page already has entrance motion that fires simultaneously or feels chaotic.
- fernandokylas Bundle Tactile Interaction Curves
Physics-feeling micro-interactions for buttons, cards, list rows, toggles, menus, and modals — ease- out hover-in under 300ms, faster hover-out, a fast :active press with scale(0.97–0.98), and no `transition: all … linear`. Use this whenever writing or reviewing CSS/Tailwind/styled-components that includes :hover, :active, :focus, transition, transform, animation, or any interactive state, and whenever the user says "make it feel premium / tactile / responsive / snappy / alive", "hover effect", "click animation", "button feedback", "it feels flat / laggy / janky", or asks for a polished interactive component — even if they don't mention motion.
- fernandokylas Bundle Encapsulated Mockup Builder
Build front-end prototypes, mockups, landing pages, dashboards, component demos, and interactive UI concepts as ONE self-contained HTML file — a single <style> block in <head>, a single <script> block before </body>, tokens in :root, and every icon/graphic/image embedded inline (SVG or data URI) so the file opens and works with zero external dependencies, bundlers, or missing assets. Use this whenever the user asks for a prototype, mockup, demo, "quick page", "something I can open in the browser", "show me what it'd look like", an artifact/preview, a design handoff, or any front-end that isn't being wired into an existing build system — even if they don't say "single file". Also use when converting a React/Vue/Tailwind snippet into something runnable without npm.
-
mannyrodriguez-wk Skill Internal Apps Template BetaStep-by-step guide for deploying Workiva internal web apps using Google Apps Script, clasp, and AI-assisted development (Cursor). Use this skill whenever someone wants to build, deploy, or customize a small internal tool, dashboard, form, or automation that runs on Apps Script and embeds in Confluence — especially non-developers using Cursor to vibe-code their way through it. Trigger on: "deploy an internal app", "build a dashboard on Confluence", "host my HTML prototype", "set up clasp", "push my Apps Script project", "how do I deploy a Google Apps Script", "internal apps template", "workiva-apps-template", "clasp push", "embed app in Confluence", "set up SPREADSHEET_ID", "Apps Script web app", "I built a tool with Claude/ChatGPT and need to host it", or any request to take an AI-generated HTML prototype and turn it into a secure internal tool. Proactively invoke this skill before writing any code or giving deployment steps.
-
clearailhc Bundle Web Artifact【单文件网页制品】把数据渲染成一个自包含、能双击打开、可标注回传的网页，交给懂行的人挑错。 触发词：拓扑图、流程图、检查件、评审件、预览件、发给专家看、离线单文件、双击打开的 HTML、 可交互图表、annotations 反馈。 适用：内容由数据生成而非手写、要发给不在 Workbench 里的人、且没有活的可被驱动的状态。 典型是流程/空间拓扑确认、结构检查、参数对照、结论页。 不适用：有活状态就建 App（用 app-authoring 判断）；营销页与教学页； 从 PDF/会议记录做提取本身（那是 process-understanding-extraction 与 semantica 的事， 本技能只渲染提取结果）。
-
shreyp087 Bundle Experience StudioMake a working hackathon product immediately understandable through focused interaction design, visual hierarchy, accessibility, and visible system states.
-
candy14432 Skill Test規劃與執行可用性測試，蒐集行為與回饋，整理優先修正清單（可含 a11y 驗證）。
- candy14432 Skill Tailwind CSS
通用的 Tailwind CSS 最佳實踐與寫法規範，適用任何使用 Tailwind 的前端專案。當要寫或改 className / 樣式、調色、排版、做元件、設計 token、處理深淺主題或響應式、產生 Storybook 視覺時使用。強調 token 優先、禁寫死值、複用元件 class、無障礙；專案專屬規則以該專案的設計系統文件為準。
- candy14432 Skill Loading Screen
General, reusable methodology for designing and building loading / 載入 / 進站 / splash / waiting states in ANY project (React, Vue, Svelte, plain HTML; any CSS framework). Use this WHENEVER the user mentions a loading screen, splash, spinner, skeleton, progress indicator, 載入中 / 等待中 / 進站畫面, or "make a loading" — even if they just say "loading". It picks the right loading pattern for the wait, adapts to the host project's own design tokens and brand (never imposing a fixed palette or motif), and covers motion, accessibility, timing, and clean React / standalone-HTML implementations.
-
stifleur390 Skill SentrySentry pour Laravel 13 et Nuxt.js : error tracking, logs structurés, distributed tracing, profiling, source maps, alertes. Compatible avec Sentry cloud ou self-hosted (Rustrak). Utiliser quand on configure Sentry, on debug des erreurs, on met en place du monitoring, ou on optimise le tracing entre frontend et backend.
-
mzvonar Bundle DiffShow a rich visual diff of git changes. Generates an HTML side-by-side diff (like JetBrains) served over HTTP with the LAN URL printed (plus a Tailscale URL if Tailscale is installed). Falls back to formatted markdown if diff2html-cli is unavailable. Use when the user asks to "show the diff", "visual diff", "review my changes", or wants to see a diff on another device.
- mzvonar Skill Ngrok
Expose a local port (or a specific URL on a local server) via ngrok so the user can open it from another device or share it externally. Use whenever the user wants to share something running on localhost — phrases like "expose my dev server", "make this accessible on my phone", "share this via ngrok", "tunnel port X", "ngrok this", or after generating any local artifact (HTML report, dashboard, file viewer, diff page) that they want to view from a different machine. Also trigger if the user complains they can't reach a localhost URL from another device. The skill prints a copy-pasteable bare URL (no angle brackets), tracks the ngrok PID for clean teardown, and offers to open the URL in the default browser.
- mzvonar Skill Clean Dev
Kill the Next.js dev server on the project's dev port and start a fresh one with `.next` (plus any configured extra caches) cleared. Detects the port (svc → `PORT` in `.env.local` / `.env` → `-p`/`--port` in the dev script → explicit argument → 3000) and the package manager, and uses the repo's own kill / clean scripts when they exist. Use whenever the user wants a clean dev-server restart — "clean dev", "restart the dev server", "kill and restart next", "blow away .next and restart", "fresh dev server", `/next-js:clean-dev [port]` — after regenerating a Prisma client, or when a newly added route hangs compiling forever.
- mzvonar Bundle Showcase
Record and view a human-paced video + captioned screenshot walkthrough of a working feature, layered on the repo's existing Playwright e2e harness (same auth, page objects and seed helpers). Produces a self-contained `docs/showcases/<feature>/index.html` with the video and a captioned screenshot grid, verified frame by frame for error overlays and silent console errors, and served on the LAN for reviewers. Use when the user says "record a showcase for <feature>", "make me a feature showcase video", "show me <feature> working end to end", "generate the showcase page", "prove the feature works", or invokes `/workflow:showcase`. Bootstraps the vendored harness into the e2e package on first use. Optional tutorial mode turns retained specs into subtitled help videos. Never a regression suite, never in CI.
- mzvonar Bundle HTML Report
Generates a polished dark-themed HTML code review report and opens it in the browser. Use this whenever producing or presenting a code review, security review, PR review, or any structured finding report — especially after /review, /security-review, or ultrareview, or when the user asks to "show results as HTML", "generate a report", or "present me the result". The report renders collapsible finding cards grouped by severity (Critical / Important / Suggestion), numbered reference codes (C1, C2, I1…) the user can cite back in conversation, copyable full-path file locations with line numbers for IDE navigation, and before/after code diffs.
- mzvonar Bundle Codebase Map
Generate an interactive, zoomable map of any codebase — a high-level service/module call graph that drills into each module's endpoints and code structure. Project-agnostic. Scripts do all scanning and HTML generation; the LLM only adds semantic labels (roles, edge meanings). Use when the user asks to "map", "visualize", "diagram", "explore", or "understand the architecture of" a repo or multi-repo workspace, or to "refresh" an existing map after code changes.
- mzvonar Bundle Describe Changes
Present an implemented change to a human reviewer the way a human needs it: what was done and why, a visual map of the high-level change (who calls whom, where data flows, what moved/split/renamed), and a ranked, tiny list of the spots that genuinely need human eyes (critical / medium / low) — with renames, moves, formatting, lockfiles and import rewrites folded away. Renders in chat AND as a mobile-first interactive HTML report, then answers follow-up questions and collects feedback so the skill sharpens over time. Use proactively right after implementing a story/task/feature, before opening a PR, and whenever the user says "describe the changes", "walk me through what you changed", "what should I review", "explain this diff/PR/branch", "show me the implementation", or "/describe-changes" (installed as `/describe-changes:describe-changes`).
- fernandokylas Bundle Visual Weight Tuner
Optical balance corrections for UI — align icons to text cap-height instead of flexbox's ascender/descender box, give buttons and pills slightly heavier bottom padding so text doesn't look sunk, and scale circles/triangles up 10–15% so they read as the same size as squares. Use this whenever building or polishing buttons, pills, badges, chips, tags, icon+label rows, nav items, avatars, status dots, play/arrow icons, wordmarks, logos, or any component where an icon sits beside text or a shape sits beside another shape — including when the user says something "looks slightly off", "not quite centered", "icon looks low/high", "button text feels heavy", "make it feel more polished / premium / refined", or asks for a design-system component. Also use when reviewing CSS that relies on align-items: center or symmetric padding for icon-text pairs.
- fernandokylas Bundle Cls Dimension Anchor
Prevent layout shift (CLS) by reserving space before anything arrives — width/height attributes and aspect-ratio on images, video, iframes and embeds; min-height on async data regions, feeds, charts, ad slots and dashboards; font metric overrides so web-font swaps don't reflow; scrollbar-gutter; content-visibility with intrinsic size. Use this whenever generating or reviewing HTML/CSS that includes <img>, <picture>, <video>, <iframe>, embeds, lazy-loaded sections, fetched data, charts, third-party widgets, web fonts, or cookie/promo banners — and whenever the user says "layout shift", "CLS", "the page jumps", "content moves when it loads", "Core Web Vitals", "Lighthouse", or "things pop in and push stuff down".
- stifleur390 Skill Laravel Nuxt
API Laravel 13 optimisée pour Nuxt.js. Routes API, Sanctum SPA auth, SSR-friendly responses, typed endpoints, JSON:API. Utiliser quand on crée une API Laravel destinée à un frontend Nuxt, on configure l'auth entre Laravel et Nuxt, ou on structure les endpoints pour la consommation Nuxt.
- stifleur390 Skill Laravel Inertia
Développement Laravel avec Inertia.js et Vue 3 ou React. Pages, composants, loadings, prefetching, SSR. Utiliser quand on travaille sur un projet Laravel + Inertia, on crée des pages, ou on debug du code frontend.
- fernandokylas Bundle Html5 Native Fallback
Build accordions, disclosures, modals, popovers, dropdowns, toggles, progress bars, and page structure from native HTML5 elements — <details>/<summary>, <dialog>, the popover attribute, <button>, <main>/<nav>/<aside>/<article> — instead of div-and-span components driven by JavaScript state machines and hand-written ARIA. Use this whenever generating or reviewing HTML/JSX for any interactive component or page scaffold, and especially when the user asks for an accordion, FAQ, collapsible, expandable section, modal, dialog, drawer, dropdown, menu, tooltip, tabs, toggle, or "make it accessible / keyboard-friendly / work without JS" — even if they don't mention semantics. Also use when reviewing markup that has onclick on divs, href="#" links, or role="button" on non- buttons.
-
drdustinedwards Skill FoxingProject-specific conventions for the Foxing monorepo (apps/web Next.js + apps/mobile Expo). Encodes journal import boundaries, the Card variant system, font/token names, storage rules, Supabase access patterns, and platform-specific icon/styling rules. Load when working in apps/web or apps/mobile, when writing TSX with design tokens, when touching journal admin or public routes, when migrating the DB, or when uploading cover assets.
-
provectus Bundle Verify UIFrontend testing and web UI verification via DOM inspection in a Playwright browser. Verify component behavior, check layout, and test interactive elements after implementing or modifying features. Checks visibility, clickability, alignment, overflow, and state transitions — without screenshots. Use when verifying UI, investigating bugs, or testing acceptance criteria against a live app. Use when user reports a bug or asks to investigate how a feature works. Use BEFORE custom Playwright usage.
-
g-tavares14 Bundle Constraint Driven DevelopmentEstablishes a project's quality bar as a written contract and stops agents quietly lowering it. Use when the user runs /agent-skills:constraints. Interviews the user on which dimensions matter, supplies sane default thresholds when they have no number in mind, records everything in CONSTRAINTS.md, and watches the diff for a weakened bar — new @ts-ignore or eslint-disable suppressions, skipped or deleted tests, assertions stripped out, unimplemented stubs, thresholds edited down. Use when no quality bar is written down, when the user says "set up constraints" or "define our standards", when the user wants dimensions they care about — accessibility, web performance, coverage — set up as enforced constraints, when an agent keeps silencing checks or skipping tests to get to green, when you need a coverage or performance threshold and don't know what number to pick, or when an agent writes more code than anyone will read.
- provectus Bundle React Best Practices
React performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements.
- provectus Bundle React Feature Sliced Design
Enforces Feature-Sliced Design (FSD) architecture in React/TypeScript projects by scaffolding compliant folder structures, validating layer boundaries and import directions, detecting and fixing layer violations, and teaching FSD conventions during code generation and review. Use when asked to 'create a page', 'add an entity', 'build a widget', 'scaffold FSD structure', 'refactor to FSD', 'where should I put this code', 'what layer does X go in', 'organize my React code', 'fix layer violation', or 'review my FSD structure'. Triggers on any React/TypeScript task involving FSD layers, slices, segments, cross-layer imports, or public API boundaries.
- drdustinedwards Bundle Turnstile Spin
Set up, repair, or migrate to Cloudflare Turnstile bot verification in an existing frontend and backend, including server-side Siteverify.
- drdustinedwards Bundle Webapp Testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
- drdustinedwards Bundle Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
- drdustinedwards Skill Nextjs On Cloudflare
Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between vinext and OpenNext, or setting up vinext for Workers. For setup, migration, or deployment, install vinext's upstream skills with `npx skills add cloudflare/vinext` if missing, then read and follow the applicable skill and docs.
- g-tavares14 Skill API And Interface Design
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
-
insightfulanalytics Bundle Power Bi ThemeBrowse, visually compare, and apply Power BI report themes. Use when the user wants to "pick a theme", "choose a Power BI theme", "see all my themes", "preview themes", "compare themes", "open the theme gallery", or "apply a theme to my report/PBIP". Generates a visual HTML gallery of every theme in the library (each rendered as a mock report) so the user can choose by sight, then delegates apply to reports:modifying-theme-json. This skill BROWSES/CHOOSES a preset theme; for editing/enforcing a theme on a live report use reports:modifying-theme-json.
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 ground-inversion-guard, reduced-motion-enforcer, z-index-coordinate-matrix. 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.