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.

loopyluci Bundle

IOS Application Dev

**Trigger**: Use when developing native iOS applications — SwiftUI, UIKit, navigation, accessibility, and App Store deployment.

1 Sep 21
loopyluci Skill

Astro Implementation

Use when applying astro development implementation.

1 Sep 21
loopyluci Skill

CSS Flexbox Patterns

Use when building flexbox layouts.

1 Sep 21
loopyluci Skill

React Testing Library

Use when testing React components.

1 Sep 21
loopyluci Bundle

Google Cloud Global Frontend Configuration

Google Cloud global external Application Load Balancer Configuration Skill

1 Sep 21
khalilbenaz Skill

Vue Guide

Développement d'applications Vue.js 3 avec Composition API, Pinia, Vue Router, composants réactifs et bonnes pratiques. Se déclenche avec "Vue", "Vue.js", "Composition API", "Pinia", "Vue Router", "composant Vue". Also triggers on "Vue 3 app", "Pinia store".

Sep 21
khalilbenaz Skill

Dev Vue Guide

Développement d'applications Vue.js 3 avec Composition API, Pinia, Vue Router, composants réactifs et bonnes pratiques. Se déclenche avec "Vue", "Vue.js", "Composition API", "Pinia", "Vue Router", "composant Vue". Also triggers on "Vue 3 app", "Pinia store".

Sep 21
khalilbenaz Skill

Django Guide

Développement d'applications Python Django avec models, views, templates, ORM, admin et Django REST Framework. Se déclenche avec "Django", "Django REST", "DRF", "ORM Django", "model Django", "vue Django". Also triggers on "Django app", "Django ORM query".

Sep 21
khalilbenaz Skill

Nextjs Guide

Développement d'applications Next.js avec App Router, Server Components, SSR, ISR, API routes et middleware. Se déclenche avec "Next.js", "NextJS", "App Router", "Server Components", "SSR", "getServerSideProps". Also triggers on "Next.js App Router", "ISR and SSR".

Sep 21
khalilbenaz Skill

Svelte Guide

Développement d'applications Svelte et SvelteKit avec réactivité native, stores, SSR, routing et transitions. Se déclenche avec "Svelte", "SvelteKit", "store Svelte", "réactivité Svelte", "$:", "svelte:component". Also triggers on "Svelte component", "SvelteKit routing", "Svelte stores".

Sep 21
khalilbenaz Skill

Dev Django Guide

Développement d'applications Python Django avec models, views, templates, ORM, admin et Django REST Framework. Se déclenche avec "Django", "Django REST", "DRF", "ORM Django", "model Django", "vue Django". Also triggers on "Django app", "Django ORM query".

Sep 21
khalilbenaz Skill

Dev Nextjs Guide

Développement d'applications Next.js avec App Router, Server Components, SSR, ISR, API routes et middleware. Se déclenche avec "Next.js", "NextJS", "App Router", "Server Components", "SSR", "getServerSideProps". Also triggers on "Next.js App Router", "ISR and SSR".

Sep 21
khalilbenaz Skill

Dev Svelte Guide

Développement d'applications Svelte et SvelteKit avec réactivité native, stores, SSR, routing et transitions. Se déclenche avec "Svelte", "SvelteKit", "store Svelte", "réactivité Svelte", "$:", "svelte:component". Also triggers on "Svelte component", "SvelteKit routing", "Svelte stores".

Sep 21
khalilbenaz Skill

Dev Game Design Patterns

Patterns de conception spécifiques au développement de jeux vidéo. Se déclenche avec "game pattern", "game architecture", "ECS", "game loop", "state machine game", "component pattern", "game programming patterns". Also triggers on "game design patterns", "entity component system".

Sep 21
khalilbenaz Skill

Dev Mobile App Architect

Architecture d'applications mobiles (native, cross-platform, hybrid). Se déclenche avec "architecture mobile", "app mobile", "native vs cross-platform", "Flutter vs React Native", "MVVM", "Clean Architecture mobile", "offline first". Also triggers on "mobile app architecture", "offline-first mobile".

Sep 21
khalilbenaz Skill

Accessibility Checker

Vérifie et améliore l'accessibilité web (WCAG 2.1/2.2). Se déclenche avec "accessibilité", "a11y", "WCAG", "screen reader", "ARIA", "contraste", "accessible", "handicap", "lecteur d'écran". Also triggers on "accessibility audit", "WCAG compliance", "screen reader issues".

Sep 21
khalilbenaz Skill

Dev Accessibility Checker

Vérifie et améliore l'accessibilité web (WCAG 2.1/2.2). Se déclenche avec "accessibilité", "a11y", "WCAG", "screen reader", "ARIA", "contraste", "accessible", "handicap", "lecteur d'écran". Also triggers on "accessibility audit", "WCAG compliance", "screen reader issues".

Sep 21
loopyluci Skill

Vue JS Composition API

Use when building Vue apps with Composition API.

1 Sep 21
loopyluci Skill

React Native Navigation

Use when implementing RN navigation.

1 Sep 21
loopyluci Skill

React Render Performance

Use when implementing react render performance.

1 Sep 21
loopyluci Skill

Svelte Reactivity Stores

Use when implementing Svelte stores.

1 Sep 21
loopyluci Skill

CSS Grid Advanced Layouts

Use when building layouts with CSS Grid.

1 Sep 21
loopyluci Skill

Color Theory Accessibility

Use when implementing color accessibility.

1 Sep 21
loopyluci Skill

CSS Animations Performance

Use when implementing CSS animations.

1 Sep 21
loopyluci Skill

React State Management Zustand

Use when using Zustand for state.

1 Sep 21
khalilbenaz Skill

Tailwind Expert

Maîtrise de Tailwind CSS — utility-first, configuration custom, plugins, responsive design et dark mode. Se déclenche avec "Tailwind", "Tailwind CSS", "utility-first", "tailwind.config", "classes Tailwind". Also triggers on "Tailwind classes", "Tailwind config", "dark mode with Tailwind".

Sep 21
khalilbenaz Skill

Dev Tailwind Expert

Maîtrise de Tailwind CSS — utility-first, configuration custom, plugins, responsive design et dark mode. Se déclenche avec "Tailwind", "Tailwind CSS", "utility-first", "tailwind.config", "classes Tailwind". Also triggers on "Tailwind classes", "Tailwind config", "dark mode with Tailwind".

Sep 21
khalilbenaz Skill

AI Agent Builder

Conception et implémentation d'agents IA autonomes avec outils, mémoire et orchestration. Se déclenche avec "agent IA", "AI agent", "autonomous agent", "tool use", "function calling", "agent framework", "LangChain agent", "CrewAI", "AutoGen", "agent loop", "ReAct". Also triggers on "build an AI agent", "agent with tools and memory".

Sep 21
khalilbenaz Skill

Dev AI Agent Builder

Conception et implémentation d'agents IA autonomes avec outils, mémoire et orchestration. Se déclenche avec "agent IA", "AI agent", "autonomous agent", "tool use", "function calling", "agent framework", "LangChain agent", "CrewAI", "AutoGen", "agent loop", "ReAct". Also triggers on "build an AI agent", "agent with tools and memory".

Sep 21
khalilbenaz Skill

CSS Layout Solver

Résout les problèmes de layout CSS avec Flexbox, Grid et techniques modernes. Se déclenche avec "CSS", "layout", "Flexbox", "Grid", "centrer", "aligner", "responsive", "mon layout est cassé", "overflow", "z-index". Also triggers on "CSS layout issue", "flexbox centering", "grid layout", "why is my div misaligned".

Sep 21
khalilbenaz Skill

Web3 Dapp Builder

Développement d'applications décentralisées (dApps) Web3. Se déclenche avec "dApp", "Web3", "blockchain app", "ethers.js", "wagmi", "Hardhat", "Foundry", "MetaMask", "wallet connect". Also triggers on "build a dApp", "connect a wallet", "smart contract frontend".

Sep 21
khalilbenaz Skill

Dev CSS Layout Solver

Résout les problèmes de layout CSS avec Flexbox, Grid et techniques modernes. Se déclenche avec "CSS", "layout", "Flexbox", "Grid", "centrer", "aligner", "responsive", "mon layout est cassé", "overflow", "z-index". Also triggers on "CSS layout issue", "flexbox centering", "grid layout", "why is my div misaligned".

Sep 21
khalilbenaz Skill

Dev Web3 Dapp Builder

Développement d'applications décentralisées (dApps) Web3. Se déclenche avec "dApp", "Web3", "blockchain app", "ethers.js", "wagmi", "Hardhat", "Foundry", "MetaMask", "wallet connect". Also triggers on "build a dApp", "connect a wallet", "smart contract frontend".

Sep 21
khalilbenaz Skill

Pencil UI Designer

Agent designer UI/UX autonome qui génère des interfaces complètes en fichiers HTML autonomes (Tailwind CSS + JS vanilla). À utiliser quand l'utilisateur veut créer, générer ou maquetter une interface, un écran, une app, un site web, un dashboard, une landing page ou un formulaire. Se déclenche avec "design moi", "crée une interface", "génère une maquette", "build me a UI", "create a mockup", "design a screen", "/pencil". Also triggers on "design a UI", "generate an interface mockup", "landing page design".

Sep 21
khalilbenaz Skill

React Native Guide

Guide de développement React Native avec Expo et navigation. Se déclenche avec "React Native", "Expo", "RN", "react-navigation", "native modules", "bridge", "mobile JavaScript", "Hermes". Also triggers on "React Native app", "Expo setup", "mobile navigation".

Sep 21
khalilbenaz Skill

React Component Builder

Crée des composants React/Vue/Angular/Svelte optimisés et réutilisables. Se déclenche avec "composant React", "component", "Vue component", "Angular component", "Svelte", "hooks", "state management", "créer un composant". Also triggers on "React component", "reusable component", "hooks and props design".

Sep 21

Frequently asked questions

What are Web & Frontend agent skills?

Which Web & Frontend skills are most installed?

Popular Web & Frontend skills on SkillMD right now include ios-application-dev, astro-implementation, css-flexbox-patterns. 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.