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.
-
pinkpixel-dev Skill Web Design ReviewThis skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
-
renatoxm Bundle Clean ArchitectureStructure software around the Dependency Rule: source code dependencies point inward from frameworks to use cases to entities. Use when the user mentions "architecture layers", "dependency rule", "ports and adapters (hexagonal)", "onion architecture", "screaming architecture", "where should business logic go", "decouple from the database", "swap the framework without a rewrite", or "keep business rules independent". Also trigger when deciding which layer code belongs in, isolating core logic from infrastructure, defining module boundaries, or debating whether the framework should call your code or the reverse. Covers component principles, boundaries, and SOLID. For code-level quality, see clean-code. For domain modeling, see domain-driven-design.
-
tsuzat Bundle Shadcn SvelteManages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-svelte, the CLI, design-system presets, or any project with a components.json file. Also triggers for "shadcn-svelte init", "add component", or registry URLs.
-
theakshits Bundle C4 ViewsGenerate and review C4 model software-architecture diagrams (System Context, Container, Component) in Mermaid, Structurizr DSL, or C4-PlantUML. Use when the user wants to create, draw, author, diagram, or visualize software architecture or system structure, or to review, critique, or sanity-check an existing architecture or C4 diagram — including requests mentioning 'C4', a 'context/container/component diagram', an 'architecture diagram', or 'mermaid C4', even when they don't say 'C4' explicitly.
-
alexanderop Bundle Vue AI AssistantAnswer questions about Vue or AI using alexop.dev as the primary knowledge source. Use this skill whenever the user asks about Vue 3, composables, Pinia, Vitest, VueUse, SSR, local-first Vue, GraphQL in Vue, browser AI, Transformers.js, embeddings, AI-assisted development workflows, or asks what Alex Opalic has written about these topics. Always fetch https://alexop.dev/llms.txt first, then delegate the deep research to runSubagent before answering.
-
argos-ci Skill Lucide Style IconsDesign original SVG icons that match the Lucide icon set used across the Argos frontend — grid, stroke and corner conventions, createLucideIcon wiring, Storybook documentation, 16px verification. Use when a concept has no fitting Lucide icon and needs a custom one, or when reviewing/adjusting the existing custom icons.
-
genius-cai Bundle TailwindcssTailwind CSS utility-first CSS framework. Use for responsive design, dark mode, utility classes, and component styling.
-
insforge Skill Insforge UIUse this skill when working in the InsForge/UI repository, which publishes @insforge/ui, the React primitives, design tokens, and Tailwind preset shared by InsForge apps. Covers package layout, working rules, validation, and where the release process lives.
-
ploi Skill Pest TestingUse this skill for Pest PHP testing in Laravel projects only. Trigger whenever any test is being written, edited, fixed, or refactored — including fixing tests that broke after a code change, adding assertions, converting PHPUnit to Pest, adding datasets, and TDD workflows. Always activate when the user asks how to write something in Pest, mentions test files or directories (tests/Feature, tests/Unit) or architecture tests. Covers: test()/it()/expect() syntax, datasets, mocking, browser testing, arch(), Livewire component tests, RefreshDatabase, and all Pest 3 features. Do not use for editing factories, seeders, migrations, controllers, models, or non-test PHP code.
-
wannabespace Bundle Vercel React Best PracticesReact 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.
-
webmaxru Skill Playbook OrchestrationThe wave-based workflow that coordinates the book's agent team (architect, theory-researcher, gh-aw-explorer, chapter-author, code-verifier, chapter-reviewer, frontend-builder) to produce the GitHub Agentic Workflows interactive book end to end. Use to plan and run the production pipeline for one or more chapters.
-
cybertheory Bundle ClrunRun and control interactive CLI sessions for AI agents. Handles TUI prompts (select lists, checkboxes, confirms), persistent shell state, and long-running processes. Use when you need to execute terminal commands, respond to interactive prompts, navigate scaffolding wizards like create-vue or create-vite, or manage dev servers.
-
martin98-afk Bundle Node GraphUse this skill any time a node-based workflow or graph structure is involved — creating nodes, connecting ports, configuring properties, selecting anchor nodes, or analyzing component capabilities. This includes: building automation flows, data processing pipelines, or logic graphs; querying available components; inspecting node inputs/outputs; linking data streams between nodes; setting runtime parameters; selecting specific nodes to define creation context. Trigger whenever the user mentions 'node', 'component', 'workflow', 'graph', 'connect', 'select', or references building a process flow. If a node needs to be created, linked, configured, or selected, use this skill.
-
midudev Skill Tailwind AnimationsUse the tailwind-animations npm package (CSS-only Tailwind CSS v4 plugin) to add ready-made animation utilities: fade, slide, zoom, flip, bounce, jelly, dialog entry/exit, scroll/view timelines, scroll-mask edge fades, duration/delay/steps/ iteration/fill-mode, and animate-slide-distance. Use when the user wants CSS animations with Tailwind, animate-* classes, motion utilities, dialog animations, scroll-driven CSS motion, scroll-mask fading edges, or to install/configure tailwind-animations. Triggers: "tailwind animations", "animate-fade-in", "animate-dialog", "scroll-mask", "slide-distance", "tailwind motion plugin", /tailwind-animations.
-
sonkd Bundle UX DesignerExpert UX design thinking, user psychology, and experience strategy. Activates when building, reviewing, or discussing any user-facing interface -- websites, apps, dashboards, forms, onboarding, checkout, sign-up, settings, landing pages, modals, navigation. Triggers on: user flows, wireframes, prototypes, usability, information architecture, content strategy, error handling, accessibility, interaction design, user testing, conversion. Also activates on: 'how should this flow', 'user experience', 'make it easier', 'onboarding', 'conversion', 'drop-off', 'friction', 'confusing', 'intuitive', 'usability', 'user journey'. Applies whenever a human uses an interface, even without saying 'UX'. Hands off to ux-copywriter for detailed microcopy work and to ui-designer for visual styling. Do NOT activate for purely visual styling, backend logic, database schemas, API design without UI, or DevOps.
-
zach22-1999 Bundle Zach Search Term Report Analyzer分析 Amazon Ads SP / SB / SD 搜索词报告。确定性脚本负责清洗、时间窗聚合、词根聚类和决策计算,AI 助手或人工负责词根级语义分类;通过词根继承减少长尾词的待判定比例,输出 Markdown、CSV、HTML 和 JSON 六类结果。 使用时机:判断搜索词是否应该否定、控成本、继续测试或放量,分析 7/14/30 天 CVR 与 ACOS 变化,或者提炼可反馈给 Listing 的属性词和场景词。 触发词:/zach-search-term-report-analyzer
-
acuris-gmbh Bundle Acuris AddressAcuris Address Validation & Geocoding APIs. Use when the user is building address autocomplete in a checkout or sign-up form, validating addresses on submit, forward geocoding to lat/lng for shipping or distance calculations, reverse geocoding from coordinates, batch-cleaning address data, integrating address validation into a React, Next.js, Node, or Centra storefront, or migrating from libAddressDoctor (Informatica), Loqate, Experian QAS, Melissa, or Smarty to Acuris.
-
dbjpanda Bundle Convex TenantsMulti-tenant organization and team management for Convex with @djpanda/convex-tenants and @djpanda/convex-authz. Use when (1) setting up or integrating multi-tenant SaaS with Convex, (2) working with organizations, teams, members, or invitations, (3) configuring authz permissions for tenants, (4) using TenantsProvider, OrganizationSwitcher, or related React components, or (5) the user mentions convex-tenants, @djpanda/convex-tenants, or multi-tenant Convex.
-
e-jung Skill Orca EmulatorControl a mobile (iOS) emulator / simulator stream from inside Orca using the `orca` CLI. Use for taps, gestures, typing, hardware buttons, camera injection, permissions, accessibility tree, and more — all while seeing the live view in Orca's emulator pane. Prefer this over raw `npx serve-sim` or direct simctl when running agents inside Orca (the orca surface handles device scoping, helper lifecycle, and worktree context). Complements the orca-cli skill for terminals, worktrees, and the built-in browser.
-
e-jung Skill Orca Emulator AndroidControl an Android emulator / device from inside Orca using the `orca` CLI. Use for listing/booting AVDs, taps, swipes, typing, hardware buttons (incl. Back and Recents), rotation, app install/launch, runtime permissions, the accessibility tree, and logcat — driving a real adb-connected device or emulator. Cross-platform (Windows, Linux, macOS). Complements the orca-emulator (iOS) and orca-cli skills.
-
ivanboring Bundle Drupal ThemeBuild a Drupal 11 theme (or other-framework theme) from the Magoo component catalog — search components, pull them in as SDC or Code Components, generate paragraph/custom_field config, and scaffold a themed site with a Tailwind build. Use when the user wants to create or extend a theme/site from these components.
-
ivanboring Bundle Drupal Theme SpecSpec-kit for generating a Drupal theme from the Magoo component catalog — takes a design reference (a Refero style URL, a live site, a screenshot, or a description) plus what the site is for, then picks and styles at least 15 components and scaffolds a child theme. Use when the user wants a new themed Drupal site or a theme built to match a design.
-
kasonye Bundle UI AestheticsRaise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and coherent depth systems. Use in any supported agent or IDE when generating, reviewing, or refactoring UI that feels generic, cluttered, flat, over-styled, theatrically animated, visually imprecise, or AI-generated, or when the user asks for a cleaner, more premium, more polished, more minimal, more refined, or more product-grade interface.
-
kaushal-205 Bundle Clawlogic TraderUse this skill when the agent needs to interact with CLAWLOGIC prediction markets. This includes: registering as an agent on-chain, creating new prediction markets, analyzing market questions to form opinions, buying YES/NO positions, asserting market outcomes via UMA Optimistic Oracle, disputing incorrect assertions from other agents, settling resolved markets to claim winnings, and posting bet narratives ("what I bet and why") to the frontend feed. Triggers: - "create a market about..." - "what do you think about [market question]?" - "buy YES/NO on market..." - "assert the outcome of market..." - "dispute the assertion on market..." - "check my positions" - "settle market..." - Any discussion about prediction markets, trading, or information markets
-
lynx-family Bundle Lynx OpenuiGenerate valid OpenUI Lang v0.5 functional-notation programs for the Lynx OpenUI renderer. Use when Codex must turn a natural-language UI request into raw OpenUI DSL for OpenUiRenderer, including static mobile UI, $state, Query/Mutation tool flows, Action plans, streaming-friendly output, or catalog-constrained revisions. Do not use for JSX, HTML, CSS, A2UI JSON, or implementing new ReactLynx components.
-
modelengine-group Skill Frontend DesignCreate 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.
-
mr-karan Skill Logchef DevSet up and manage the LogChef local development environment. Use this skill whenever the user mentions dev setup, dev environment, running logchef locally, starting the backend/frontend, docker compose, seeding data, resetting the dev database, or wants to get logchef running for development. Also trigger when the user asks about login credentials, Dex OIDC setup, ClickHouse dev tables, or sample log ingestion.
-
oss-apps Bundle ShadcnManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
-
seasonedcc Skill Safe Element ComparisonMaintain element type comparison safety in remix-forms. Use when modifying component mappings, adding new components to mapChildren, investigating unexpected HTML attributes or prop injection, writing docs about component customization, or responding to user issues about wrong elements receiving props.
-
talmolab Skill Tauri PilotInspect, interact with, and test the running SLEAP desktop (Tauri) app via the `tauri-pilot` CLI. Use when driving the desktop GUI, automating clicks/typing/navigation, taking screenshots, reading the DOM/accessibility tree, or debugging the desktop build's console/network. Only works against `bun run tauri:dev` (debug builds); the plugin is a no-op in release.
-
upamune Bundle TailwindTAILWIND documentation assistant
-
vitalets Skill Debug Cucumber HTML ReportDebug or inspect the Cucumber HTML reporter output in the playwright-bdd project. Use when: investigating DOM structure changes in the Cucumber HTML reporter, updating test selectors or POMs after reporter upgrades, verifying what attachments/hooks/steps look like in the generated HTML report.
-
wbh604 Bundle Fund Manager Alpha基金经理独立决策能力尽调。以基金经理为主角,基金作为其长期行为记录,核心回答"他和公司主流观点不一样的时候,有没有反复证明自己是对的"。当用户要求分析某只基金、某个基金经理、判断能不能买、经理能力如何、独立性如何、Alpha 是真本事还是运气时触发。产出 Independent Decision Alpha 取证 + Manager Profile + Alpha 尸检 + IC 结论 + 传播级 HTML 报告。关键词:基金、基金经理、公募、Alpha、独立决策、抱团、House Divergence、逆向、持仓分析、业绩归因、能不能买。
-
privatenumber Skill LintrollOpinionated ESLint configuration and CLI for TypeScript, Vue, React, JSON, YAML, and Markdown. Use when linting code, fixing style issues, or configuring ESLint in projects using lintroll.
-
pseudoyu Bundle Operators NotebookOperator's Notebook design register — a dense BI/admin dashboard visual language built on OKLCH ink-blue tokens, hairline dividers, Bricolage Grotesque display, and 60/30/10 accent discipline. Use when designing or migrating admin dashboards, internal tools, BI consoles, or operator-facing surfaces that need editorial clarity over SaaS chrome. Triggers on tasks involving shadcn/ui dashboards, Next.js admin apps, Tailwind v4 token migration, or rewriting "default shadcn" SaaS-flavored UIs into a disciplined editorial register.
-
publisher-skill Bundle PublisherPublish HTML frontend projects to the PushWebly publishing platform, list published projects, obtain shareable project URLs, change a published app's public/private visibility, and package published HTML projects into Android APKs. Use when Codex needs to publish a local zip project, publish and build an APK, build an APK for an existing published project, toggle an app between public and private, list a user's published projects, or log in/register for this publishing platform. Codex should use HTTP APIs with curl when remote MCP tools are not mounted.
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 web-design-review, clean-architecture, shadcn-svelte. 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.