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.
-
monumentalsystems Skill AccessibilityWCAG 2.1 guidelines, screen reader compatibility, keyboard navigation, color contrast, semantic HTML, and ARIA attributes
-
steipete-agent-scripts Skill PeekaboomacOS screen capture, accessibility inspection, and background-first app/window/UI automation with Peekaboo v4.
-
steipete-agent-scripts Skill Markdown ConverterMarkdown conversion: PDF, Office, HTML, data, OCR, audio, ZIP, YouTube.
-
idanbeck Bundle Linkedin SkillPost, comment, and react on LinkedIn profiles and company pages. Use when the user asks to post on LinkedIn, check their LinkedIn posts, add comments, react to posts, or manage their LinkedIn presence. Supports multiple accounts.
-
patternsdev Skill ComponentsTeaches Vue component fundamentals including markup, logic, and styles. Use when building or structuring Vue single-file components as the foundational building blocks of your application.
-
patternsdev Skill ComposablesTeaches Vue composables for reusable stateful logic with the Composition API. Use when extracting shared reactive state, side effects, or computed logic that multiple components need.
-
patternsdev Skill React 2026Provides a comprehensive guide to the modern React 2026 stack. Use when starting a new React project or modernizing an existing one with current frameworks, build tools, routing, state management, or AI integration.
-
patternsdev Skill Script SetupTeaches Vue's script setup syntax for concise Composition API usage. Use when writing Vue 3 single-file components and you want a more ergonomic, less boilerplate syntax for the Composition API.
-
patternsdev Skill Hoc PatternTeaches the Higher-Order Component (HOC) pattern for logic reuse. Use when you need to share cross-cutting concerns like authentication, logging, or data fetching across multiple components.
-
patternsdev Skill Data ProviderTeaches the data provider pattern using renderless components and scoped slots. Use when you need to abstract data fetching or state management logic and expose it to child components via slots.
-
patternsdev Skill Provide InjectTeaches Vue's provide/inject API for dependency injection across components. Use when deeply nested components need access to ancestor data without threading props through intermediate layers.
-
patternsdev Skill Hooks PatternTeaches React Hooks for reusing stateful logic across components. Use when extracting shared behavior like form handling, subscriptions, or side effects into reusable custom hooks.
-
patternsdev Skill Streaming SsrTeaches streaming server-side rendering for chunked HTML delivery. Use when you need faster Time to First Byte and First Contentful Paint by streaming HTML as it's generated on the server.
-
patternsdev Skill AI UI PatternsTeaches design patterns for building AI-powered React interfaces. Use when creating chatbots, intelligent assistants, streaming UIs, or any AI-driven user experience in React.
-
patternsdev Skill Async ComponentsTeaches async component loading in Vue for performance optimization. Use when you have heavy components that aren't needed on initial render and can be loaded on demand.
-
patternsdev Skill Render FunctionsTeaches Vue render functions and JSX for programmatic template creation. Use when templates are too limiting and you need the full power of JavaScript to construct component output dynamically.
-
patternsdev Skill State ManagementTeaches Vue state management with stores, Pinia, and the Composition API. Use when you need to share and synchronize state across multiple components beyond what props and events can handle.
-
patternsdev Skill Compound PatternTeaches the compound component pattern for shared implicit state. Use when building related components like tabs, accordions, or dropdowns that need to coordinate without explicit prop passing.
-
patternsdev Skill Static RenderingTeaches static rendering (SSG) for build-time HTML generation. Use when your pages don't change per request and can be pre-rendered at build time for maximum cacheability and performance.
-
patternsdev Skill Dynamic ComponentsTeaches dynamic component switching with Vue's <component> element. Use when you need to render different components conditionally based on runtime state using the is attribute.
-
patternsdev Skill React Data FetchingTeaches modern React data fetching patterns with TanStack Query, SWR, and Suspense. Use when implementing caching, deduplication, optimistic updates, or parallel loading in React applications.
-
patternsdev Skill Renderless ComponentsTeaches the renderless component pattern for logic-only Vue components. Use when you want to encapsulate behavior without dictating markup, letting consumers control rendering via scoped slots.
-
patternsdev Skill Render Props PatternTeaches the render props pattern for flexible component composition. Use when you need to share rendering logic between components by passing a function that returns JSX as a prop.
-
patternsdev Skill Mediator PatternTeaches the mediator pattern for centralized component communication. Use when multiple components need to communicate and direct coupling between them creates complexity or tight dependencies.
-
patternsdev Skill Observer PatternTeaches the observer pattern for event-driven communication. Use when you need decoupled publish/subscribe behavior where multiple parts of your system react to state changes or events.
-
patternsdev Skill Provider PatternTeaches the provider pattern for sharing data across component trees. Use when multiple nested components need access to the same data and prop drilling becomes unwieldy.
-
patternsdev Skill Progressive HydrationTeaches progressive hydration for prioritized client-side interactivity. Use when server-rendered pages have non-critical sections whose JavaScript can be deferred to improve Time to Interactive.
-
patternsdev Skill React Composition 2026Teaches modern React composition patterns for 2025/2026. Use when designing component APIs, building shared UI libraries, or refactoring prop-heavy components.
-
patternsdev Skill Container PresentationalTeaches the container/presentational pattern for Vue components. Use when you want to separate data fetching and business logic from presentation for better testability and reuse.
-
patternsdev Skill React Server ComponentsTeaches React Server Components for zero-bundle server rendering. Use when components only need server-side data access and don't require client-side interactivity like state or event handlers.
-
patternsdev Skill React Render OptimizationTeaches React rendering performance optimization patterns. Use when reducing unnecessary re-renders, optimizing memoization, improving state design, or diagnosing React performance issues.
-
patternsdev Skill React Selective HydrationTeaches selective hydration combined with streaming SSR in React 18+. Use when you need to prioritize hydrating interactive components while streaming the rest of the page.
-
patternsdev Skill Incremental Static RenderingTeaches Incremental Static Regeneration (ISR) for updating static content post-build. Use when you have static pages that need periodic updates without a full site rebuild.
-
patternsdev Skill Presentational Container PatternTeaches the presentational/container pattern for separating view and logic. Use when you want to isolate data fetching and business logic from UI rendering for better testability and reuse.
-
vladm3105 Skill Doc TddCreate a Test-Driven Development guide (TDD) - Layer 7 of the SDD flow, defining test cases, BDD-to-test mapping, and quality thresholds from SPEC component contracts. Use after SPEC, before IPLAN. Single-document authoring primitive; for end-to-end or batch generation the autopilot (`doc-tdd-autopilot`) drives this skill.
-
vladm3105 Skill Doc SpecCreate a Technical Specification (SPEC) - Layer 6 of the SDD flow, defining component interfaces, data models, and behavior contracts. Use when ADR decisions are settled and you need an implementation-ready spec before TDD. Single-document authoring primitive; for end-to-end or batch generation the autopilot (`doc-spec-autopilot`) drives this skill.
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, peekaboo, markdown-converter. 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.