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.
-
diegosouzapw Bundle React State Management V2React 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 Cc Skill Frontend Patterns
Frontend Development Patterns workflow skill. Use this skill when the user needs Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 -
cyberstrikeus Skill Cis Azure Foundations 8 1 3 2Ensure 'Vulnerability assessment for machines' component status is set to 'On'
Audited - cyberstrikeus Skill Cis Azure Foundations 8 1 3 3
Ensure 'Endpoint protection' component status is set to 'On'
Audited - cyberstrikeus Skill Cis Azure Foundations 8 1 3 4
Ensure 'Agentless scanning for machines' component status is set to 'On'
Audited - cyberstrikeus Skill Cis Azure Foundations 8 1 3 5
Ensure 'File Integrity Monitoring' component status is set to 'On'
Audited - diegosouzapw Bundle React Native Architecture V2
React Native Architecture workflow skill. Use this skill when the user needs Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle React Native Architecture V3
React Native Architecture workflow skill. Use this skill when the user needs Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle React Native Architecture V4
React Native Architecture workflow skill. Use this skill when the user needs Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Cc Skill Frontend Patterns V2
Frontend Development Patterns workflow skill. Use this skill when the user needs Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Component Flattening Analysis
Component Flattening Analysis workflow skill. Use this skill when the user needs Detects misplaced classes and fixes component hierarchy problems — finds code that should belong inside a component but sits at the root level. Use when asking "clean up component structure", "find orphaned classes", "fix module hierarchy", "flatten nested components", or analyzing why namespaces have misplaced code. Do NOT use for dependency analysis (use coupling-analysis) or domain grouping (use domain-identification-grouping) and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Nextjs App Router Patterns V2
Next.js App Router Patterns workflow skill. Use this skill when the user needs Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Nextjs App Router Patterns V3
Next.js App Router Patterns workflow skill. Use this skill when the user needs Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Domain Identification Grouping
Domain Identification and Grouping workflow skill. Use this skill when the user needs Groups existing components into logical business domains to plan service-based architecture. Use when asking "which components belong together?", "group these into services", "organize by domain", "component-to-domain mapping", or planning service extraction from an existing codebase. Do NOT use for identifying new domains from scratch (use domain-analysis) or analyzing coupling (use coupling-analysis) and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle React Component Performance V2
React Component Performance workflow skill. Use this skill when the user needs Diagnose slow React components and suggest targeted performance fixes and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Component Identification Sizing
Component Identification and Sizing workflow skill. Use this skill when the user needs Maps architectural components in a codebase and measures their size to identify what should be extracted first. Use when asking "how big is each module?", "what components do I have?", "which service is too large?", "analyze codebase structure", "size my monolith", or planning where to start decomposing. Do NOT use for runtime performance sizing or infrastructure capacity planning and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Frontend Developer V2
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 - diegosouzapw Bundle Frontend Developer V3
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 - diegosouzapw Bundle Health Trend Analyzer
健康趋势分析器 workflow skill. Use this skill when the user needs 分析一段时间内健康数据的趋势和模式。关联药物、症状、生命体征、化验结果和其他健康指标的变化。识别令人担忧的趋势、改善情况，并提供数据驱动的洞察。当用户询问健康趋势、模式、随时间的变化或"我的健康状况有什么变化？"时使用。支持多维度分析（体重/BMI、症状、药物依从性、化验结果、情绪睡眠），相关性分析，变化检测，以及交互式HTML可视化报告（ECharts图表）。 and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Magic UI Generator V2
Magic UI Generator workflow skill. Use this skill when the user needs Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Perf Web Optimization
Web Performance Optimization workflow skill. Use this skill when the user needs Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro) and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle React Flow Node TS V2
React Flow Node workflow skill. Use this skill when the user needs Create React Flow node components following established patterns with proper TypeScript types and store integration and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Spline 3d Integration
Spline 3D Integration Skill workflow skill. Use this skill when the user needs adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Tanstack Query Expert
TanStack Query Expert workflow skill. Use this skill when the user needs Expert in TanStack Query (React Query) — asynchronous state management. Covers data fetching, stale time configuration, mutations, optimistic updates, and Next.js App Router (SSR) integration and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Unity Ecs Patterns V2
Unity ECS Patterns workflow skill. Use this skill when the user needs Production patterns for Unity's Data-Oriented Technology Stack (DOTS) including Entity Component System, Job System, and Burst Compiler and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Xss HTML Injection V2
Cross-Site Scripting and HTML Injection Testing workflow skill. Use this skill when the user needs Execute comprehensive client-side injection vulnerability assessments on web applications to identify XSS and HTML injection flaws, demonstrate exploitation techniques for session hijacking and credential theft, and validate input sanitization and output encoding mechanisms and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
Audited 54 - diegosouzapw Bundle Zod Validation Expert
Zod Validation Expert workflow skill. Use this skill when the user needs Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Angular UI Patterns V2
Angular UI Patterns workflow skill. Use this skill when the user needs Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Context7 Auto Research
context7-auto-research workflow skill. Use this skill when the user needs Automatically fetch latest library/framework documentation for Claude Code via Context7 API. Use when you need up-to-date documentation for libraries and frameworks or asking about React, Next.js, Prisma, or any other popular library and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Perf Lighthouse
Lighthouse Audits workflow skill. Use this skill when the user needs Run Lighthouse audits locally via CLI or Node API, parse and interpret reports, and set performance budgets. Use when measuring site performance, understanding Lighthouse scores, setting up budgets, or integrating audits into CI. Triggers on: lighthouse, run lighthouse, lighthouse score, performance audit, performance budget. Do NOT use for fixing specific performance issues (use perf-web-optimization or core-web-vitals) or Astro-specific optimization (use perf-astro) and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle Shopify Apps V2
Shopify Apps workflow skill. Use this skill when the user needs Expert patterns for Shopify app development including Remix/React and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
54 - diegosouzapw Bundle UI Component V2
UI Component workflow skill. Use this skill when the user needs Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
Audited 54 - diegosouzapw Bundle Algorithmic Art V2
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 V3
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
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
AWT — AI-Powered E2E Testing (Beta) workflow skill. Use this skill when the user needs 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 and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
Audited 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 react-state-management-v2, cc-skill-frontend-patterns, cis-azure-foundations-8.1.3.2. 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.