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.
-
laurigates Bundle Accessibility ImplementationWCAG 2.1/2.2 compliance, ARIA patterns, keyboard nav, focus management, a11y testing. Use when implementing accessible components or user mentions WCAG/ARIA/screen readers.
- laurigates Skill Components Version Badge
Version badge with build-info tooltip (version, commit, changelog). Use when adding version display to app header/footer for Next.js, Nuxt, SvelteKit, Vite, React, Vue, or Svelte.
-
thebushidocollective Skill Ink Hooks StateUse when managing state and side effects in Ink applications using React hooks for terminal UIs.
- thebushidocollective Skill React Performance
Use when React performance optimization including memoization, lazy loading, and virtualization. Use when optimizing React applications.
- thebushidocollective Skill Vue Composition API
Use when Vue 3 Composition API with reactive refs, computed, and composables. Use when building modern Vue 3 applications.
- thebushidocollective Skill Tailwind Components
Use when building reusable component patterns with Tailwind CSS. Covers component extraction, @apply directive, and composable design patterns.
- thebushidocollective Skill Nextjs App Router
Use when next.js App Router with layouts, loading states, and streaming. Use when building modern Next.js 13+ applications.
- thebushidocollective Skill Tailwind Performance
Use when optimizing Tailwind CSS for production, reducing bundle size, and improving performance. Covers PurgeCSS, JIT mode, and build optimization.
- thebushidocollective Skill Vue Reactivity System
Use when Vue reactivity system with refs, reactive, computed, and watchers. Use when managing complex state in Vue applications.
- thebushidocollective Skill Ink Component Patterns
Use when building terminal UIs with Ink component patterns for React-based CLI applications.
- thebushidocollective Skill React Hooks Patterns
Use when React Hooks patterns including useState, useEffect, useContext, useMemo, useCallback, and custom hooks. Use for modern React development.
- thebushidocollective Skill Vue Component Patterns
Use when Vue component patterns including props, emits, slots, and provide/inject. Use when building reusable Vue components.
- thebushidocollective Skill Nextjs Data Fetching
Use when next.js data fetching patterns including SSG, SSR, and ISR. Use when building data-driven Next.js applications.
- thebushidocollective Skill React Context Patterns
Use when React Context patterns for state management. Use when sharing state across component trees without prop drilling.
- thebushidocollective Skill Storybook Args Controls
Use when configuring interactive controls and args for Storybook stories. Helps create dynamic, explorable component demonstrations with proper type constraints.
- thebushidocollective Skill Storybook Story Writing
Use when creating or modifying Storybook stories for components. Ensures stories follow CSF3 format, properly showcase component variations, and build successfully.
- thebushidocollective Skill Gluestack MCP Tools
Use when discovering, exploring, or retrieving gluestack-ui components via MCP tools. Provides access to component source code, variants, demos, and metadata.
- thebushidocollective Skill Storybook Play Functions
Use when adding interaction testing to Storybook stories. Enables automated testing of component behavior, user interactions, and state changes directly in stories.
- thebushidocollective Skill Gluestack Components
Use when building UI with gluestack-ui components. Covers component composition, variants, sizes, states, accessibility props, and platform-specific considerations for React and React Native.
- thebushidocollective Skill Relay Fragments Patterns
Use when relay fragment composition, data masking, colocation, and container patterns for React applications.
- thebushidocollective Skill Zustand Store Patterns
Use when creating and managing Zustand stores for React state management. Covers store creation, selectors, actions, and basic usage patterns.
- thebushidocollective Skill Tailwind Responsive Design
Use when building responsive layouts and mobile-first designs with Tailwind CSS. Covers breakpoints, container queries, and responsive utilities.
- thebushidocollective Skill Nextjs Server Components
Use when next.js Server Components for optimal performance. Use when building data-intensive Next.js applications.
- thebushidocollective Skill Reactflow Custom Nodes
Use when creating custom React Flow nodes, edges, and handles. Covers custom node components, resizable nodes, toolbars, and advanced customization.
- thebushidocollective Skill Reactflow Fundamentals
Use when building node-based UIs, flow diagrams, workflow editors, or interactive graphs with React Flow. Covers setup, nodes, edges, controls, and interactivity.
- thebushidocollective Skill Atomic Design Quarks
Use when working with design tokens, CSS custom properties, and primitive values that form the foundation below atoms. Quarks are the sub-atomic building blocks.
- thebushidocollective Skill Apollo Client Patterns
Use when implementing Apollo Client patterns for queries, mutations, cache management, and local state in React applications.
- thebushidocollective Skill Gluestack Accessibility
Use when ensuring accessible gluestack-ui implementations. Covers WAI-ARIA patterns, screen reader support, keyboard navigation, focus management, and WCAG 2.1 AA compliance.
- thebushidocollective Skill React Native Styling
Use when styling React Native components with StyleSheet, Flexbox layout, responsive design, and theming. Covers platform-specific styling and design systems.
- thebushidocollective Skill React Native Platform
Use when handling platform-specific code in React Native for iOS and Android. Covers Platform API, platform-specific components, native modules, and cross-platform best practices.
- thebushidocollective Skill Svelteflow Custom Nodes
Use when creating custom Svelte Flow nodes, edges, and handles. Covers custom node components, resizable nodes, toolbars, and advanced customization.
- thebushidocollective Skill Svelteflow Fundamentals
Use when building node-based UIs, flow diagrams, workflow editors, or interactive graphs with Svelte Flow. Covers setup, nodes, edges, controls, and interactivity.
- thebushidocollective Skill React Native Components
Use when building React Native UI components with core components, custom components, and component patterns. Covers View, Text, Image, ScrollView, FlatList, and component composition.
- thebushidocollective Skill React Native Navigation
Use when implementing navigation in React Native apps with React Navigation. Covers stack, tab, drawer navigation, deep linking, and navigation patterns.
- thebushidocollective Skill React Native Performance
Use when optimizing React Native app performance. Covers FlatList optimization, memoization, image optimization, bundle size reduction, and profiling techniques.
- thebushidocollective Skill Atomic Design Integration
Use when integrating Atomic Design methodology with React, Vue, Angular, or other frameworks. Framework-specific implementation patterns.
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 accessibility-implementation, components-version-badge, ink-hooks-state. 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.