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.
-
fusengine Bundle Apex Methodology 2Use when starting ANY development task -- feature, bug fix, refactor, hotfix (triggers: implement, create, build, fix, add feature, refactor, develop).
- fusengine Bundle Astro Assets 2
Use when optimizing images or other assets in Astro — <Image />, <Picture />, getImage(), Fonts API, or OG image generation.
- fusengine Bundle Better Auth 2
Use when implementing Next.js authentication with Better Auth — OAuth, 2FA, magic links, SSO, Stripe billing, or session management.
- fusengine Bundle Nextjs I18N 2
Use when implementing i18n in Next.js 16 — next-intl or DIY dictionaries, locale routing, language switch, or formatters.
- fusengine Bundle React Shadcn 2
shadcn/ui for React with TanStack Form. Use when building UI components, forms, dialogs, tables, toasts, or accessible components.
- fusengine Bundle Astro Actions 2
Use when handling form submissions, mutations, or server-side logic with type safety in Astro via defineAction / astro:actions.
- fusengine Bundle Astro Content 2
Use when managing structured content, blog posts, or typed data collections in Astro via the Content Layer API (content.config.ts).
- fusengine Bundle Astro Islands 2
Use when adding interactivity to Astro pages via client:* directives or rendering dynamic server content with server:defer.
- fusengine Bundle Astro Styling 2
Use when styling Astro components — scoped CSS, CSS Modules, Tailwind CSS, UnoCSS, Sass, the class:list directive, or global styles.
- fusengine Bundle Nextjs Stack 2
Use as the master reference for a full Next.js 16+ stack — Prisma 7, Better Auth, shadcn/ui, TanStack Form, Zustand. Not for core framework API details (use nextjs-16).
- fusengine Bundle Solid Nextjs 2
Use when applying SOLID principles to Next.js architecture — modular structure, file size limits, interface separation, JSDoc.
- fusengine Bundle React Testing 2
Testing Library for React 19 - render, screen, userEvent, waitFor, Suspense. Use when writing tests for React components with Vitest.
- fusengine Bundle Tailwindcss V4 2
Use when migrating a project from Tailwind v3 to v4, mapping @theme namespaces to generated utilities, or looking up renamed/removed v3 utilities.
- fusengine Bundle Astro Security 2
Use when configuring Content Security Policy (CSP) in Astro 7 — security headers, script/style hashes, nonces, or experimentalStaticHeaders.
- fusengine Bundle Design Motion 2
Use when adding or reviewing motion on an already-settled layout or component — never to hide or compensate for an unfinished one.
- fusengine Bundle Laravel Vite 2
Complete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.
- fusengine Bundle Nextjs Shadcn 2
Use when building UI components in Next.js App Router with shadcn/ui — forms, dialogs, tables, toasts, accessible components.
- fusengine Bundle React Effects Audit 2
Use when auditing React or Next.js components for unnecessary or unsafe useEffect usage -- detects 9 anti-patterns from "You Might Not Need an Effect".
- fusengine Bundle Astro Starlight 2
Use when building a documentation site with Astro Starlight — sidebar config, Pagefind search, plugins (blog/openapi/typedoc), i18n, llms.txt.
- fusengine Bundle Design Android 2
Use when designing an Android screen or flow — deliverable is a device-framed HTML mockup and developer handoff spec, never Compose code.
- fusengine Bundle Nextjs Zustand 2
Use when implementing global state, stores, persist, or hydration in Next.js 16 App Router Client Components with Zustand v5.
- fusengine Bundle Shadcn Theming 2
Use when defining or auditing shadcn/ui design tokens, OKLCH colors, or dark/light mode CSS variables.
- fusengine Bundle Tailwindcss Core 2
Use when configuring Tailwind CSS-first (no config.js), defining @theme tokens, or creating custom utilities/variants. Do NOT use for v3-to-v4 migration or category utility lookup.
- fusengine Bundle TS Testing 2
Use when writing or configuring TypeScript tests and choosing between bun test and Vitest. Not for framework-specific testing (React → react-testing).
- fusengine Bundle Astro Deployment 2
Use when deploying an Astro 7 app to Cloudflare, Vercel, Netlify, or Node.js — adapter setup, ISR patterns, edge middleware.
-
tractorjuice Bundle Plantuml Syntax 3PlantUML syntax reference, C4-PlantUML first, for writing or fixing a diagram in an artefact: sequence, class, activity, state, ER, component, deployment and use-case diagrams, skinparams and themes, C4 layout conflicts and rendering errors. Not needed for Mermaid (mermaid-syntax), or when the request is for a governed diagram artefact with document control, which /skill:arckit-diagram produces.
-
yuukias Bundle Scientific Figure QAAudit scientific figures for publication readiness, accessibility, grayscale readability, export quality, and venue visual constraints.
- yuukias Bundle Geniml
This skill should be used when working with genomic interval data (BED files) for machine learning tasks. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.
- yuukias Bundle Implementation React Tailwind
Implement production-ready frontend code with React, TypeScript, Tailwind CSS, and shadcn/ui. Use for components, pages, dashboards, forms, tables, navigation, themes, and responsive UI implementation.
- yuukias Bundle Research Product Frontend 2
High-density research product frontend planning for imaging, phenotype, model comparison, provenance, and experiment interfaces.
- yuukias Bundle Responsive Accessibility Review
Review and fix frontend responsiveness, accessibility, usability, keyboard behavior, text fitting, contrast, and visual regressions. Use before shipping UI or when asked to improve UX quality.
-
leoyeai-openclaw-master-skills Bundle Frontend UI SystemFrontend UI System
- leoyeai-openclaw-master-skills Bundle Frontend Design
Build polished, conversion-aware frontends with strong visual taste, clear hierarchy, and production-grade HTML/CSS/JS. Landing pages, dashboards, components, emails, redesigns — all as working files. Avoids generic AI aesthetics. Every design has a point of view.
- fusengine Bundle Shadcn Detection 2
Use when determining which primitive (Radix UI or Base UI) a shadcn/ui project uses, before any component work or migration.
- fusengine Bundle Tailwindcss Layout 2
Use when building flex or grid layouts, positioning elements (absolute/relative/fixed/sticky), managing z-index/inset, or @container queries.
- fusengine Bundle Tailwindcss Sizing 2
Use when setting element width/height, constraining min/max dimensions, using dynamic viewport height (h-dvh), or fixing an aspect ratio.
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 apex-methodology, astro-assets, better-auth. 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.