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.
-
humaisali Skill Trpc FullstackBuild end-to-end type-safe APIs with tRPC — routers, procedures, middleware, subscriptions, and Next.js/React integration patterns.
- humaisali Skill Wiki Vitepress
Transform generated wiki Markdown files into a polished VitePress static site with dark theme and interactive Mermaid diagrams. Use when user asks to "build a site" or "package as VitePress", user runs the /deep-wiki, or user wants a browsable HTML output from generated wiki pages.
- humaisali Bundle Algorithmic Art
Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).
- humaisali Skill Awt E2e Testing
AI-powered E2E web testing — eyes and hands for AI coding tools. Declarative YAML scenarios, Playwright execution, visual matching (OpenCV + OCR), platform auto-detection (Flutter/React/Vue), learning DB. Install: npx skills add ksgisang/awt-skill --skill awt -g
- humaisali Bundle Expo Brownfield
Integrate Expo and React Native into an existing native iOS or Android app. Use when the user mentions brownfield, embedding React Native in a native app, AAR/XCFramework, or adding Expo to an existing Kotlin/Swift project. Covers both the isolated approach and the integrated approach.
- humaisali Bundle Frontend Slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.
- humaisali Skill Lovable Cleanup
Audits and strips Lovable scaffolding from Vite + React projects — removes lovable-tagger, swaps placeholder assets, prunes unused Radix deps, and cleans generated docs so the codebase ships as yours.
- humaisali Skill Markstream Nuxt
Integrate markstream-vue into Nuxt 3 or 4 with SSR-safe client boundaries, renderer modes, explicit CSS, and browser-only optional peers.
- humaisali Skill Markstream Vue2
Integrate markstream-vue2 into Vue 2.6 or 2.7 with correct Composition API decisions, CSS, streaming state, optional peers, and scoped overrides.
- humaisali Skill Accesslint Audit
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.
- humaisali Skill Markstream React
Integrate the beta markstream-react renderer into React 18+ or Next.js with correct client/server entrypoints, CSS, streaming state, and component overrides.
- humaisali Skill Mobile Developer
Develop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization.
-
diegosouzapw Bundle Nextjs Supabase Auth 2Next.js + Supabase Auth workflow skill. Use this skill when the user needs Expert integration of Supabase Auth with Next.js App Router and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle React Best Practices 3
Vercel React Best Practices workflow skill. Use this skill when the user needs React and Next.js performance optimization guidelines from Vercel Engineering. Use 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. Do NOT use for component API architecture or composition patterns (use react-composition-patterns instead) and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle React Flow Architect 3
ReactFlow Architect workflow skill. Use this skill when the user needs Build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Design Taste Frontend 2
High-Agency Frontend Skill workflow skill. Use this skill when the user needs building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Screen Reader Testing 2
Screen Reader Testing workflow skill. Use this skill when the user needs Practical guide to testing web applications with screen readers for comprehensive accessibility validation and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Web Artifacts Builder 3
Web Artifacts Builder workflow skill. Use this skill when the user needs To build powerful frontend claude.ai artifacts, follow these steps: and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Azd Deployment V2 2
Azure Developer CLI (azd) Container Apps Deployment workflow skill. Use this skill when the user needs Deploy containerized frontend + backend applications to Azure Container Apps with remote builds, managed identity, and idempotent infrastructure and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Azd Deployment V3 2
Azure Developer CLI (azd) Container Apps Deployment workflow skill. Use this skill when the user needs Deploy containerized frontend + backend applications to Azure Container Apps with remote builds, managed identity, and idempotent infrastructure and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Fp React V2 2
Functional Programming in React workflow skill. Use this skill when the user needs Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15 and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Mobile Developer 3
mobile-developer workflow skill. Use this skill when the user needs Develop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle 3d Web Experience 3
3D Web Experience workflow skill. Use this skill when the user needs Expert in building 3D experiences for the web - Three.js, React and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Angular Migration 3
Angular Migration workflow skill. Use this skill when the user needs Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle React UI Patterns 2
React UI Patterns workflow skill. Use this skill when the user needs Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Tailwind Patterns 2
Tailwind CSS Patterns (v4 - 2025) workflow skill. Use this skill when the user needs Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Vercel Deployment 2
Vercel Deployment workflow skill. Use this skill when the user needs Expert knowledge for deploying to Vercel with Next.js and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle HTML Injection Testing 3
HTML Injection Testing workflow skill. Use this skill when the user needs Identify and exploit HTML injection vulnerabilities that allow attackers to inject malicious HTML content into web applications. This vulnerability enables attackers to modify page appearance, create phishing pages, and steal user credentials through injected forms and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle React State Management 2
React State Management workflow skill. Use this skill when the user needs Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Algorithmic Art V3 2
algorithmic-art workflow skill. Use this skill when the user needs Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms) and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Algorithmic Art V4 2
algorithmic-art workflow skill. Use this skill when the user needs Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms) and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Awt E2e Testing V2 2
AWT \u2014 AI-Powered E2E Testing (Beta) workflow skill. Use this skill when the user needs AI-powered E2E web testing \u2014 eyes and hands for AI coding tools. Declarative YAML scenarios, Playwright execution, visual matching (OpenCV + OCR), platform auto-detection (Flutter/React/Vue), learning DB. Install: npx skills add ksgisang/awt-skill --skill awt -g and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Bevy Ecs Expert V2 2
Bevy ECS Expert workflow skill. Use this skill when the user needs Master Bevy's Entity Component System (ECS) in Rust, covering Systems, Queries, Resources, and parallel scheduling and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Frontend Design V4 2
Frontend Design (Distinctive, Production-Grade) workflow skill. Use this skill when the user needs You are a frontend designer-engineer, not a layout generator and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Frontend Design V6 2
Frontend Design (Distinctive, Production-Grade) workflow skill. Use this skill when the user needs You are a frontend designer-engineer, not a layout generator and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Frontend Developer 4
frontend-developer workflow skill. Use this skill when the user needs Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54
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 trpc-fullstack, wiki-vitepress, algorithmic-art. 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.