mdskills

Web & Frontend skills

React, Next.js, Vue, Svelte, CSS, Tailwind, HTML — everything for the browser. All free to download, install any skill with one command.

62 skills in Web & Frontend

Stitch Loop

Skill

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

8.02.3k3by google-labs-code

Zustand Store Ts

Skill

Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating global stores, or implementing reactive state patterns with Zustand.

7.014k3by sickn33

Stitch to React Components Skill

Skill

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

9.02.4k3by google-labs-code

Upgrading React Native

Skill

React Native upgrade workflow covering updated templates, dependencies, and common pitfalls. Use when migrating a React Native app to a newer release.

6.01.2k3by callstackincubator

Web Performance Optimization

Skill

Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance

9.014k3by sickn33

Vercel Composition Patterns

Skill

A structured repository for React composition patterns that scale. These patterns help avoid boolean prop proliferation by using compound components, lifting state, and composing internals. - rules/ - Individual rule files (one per rule) - sections.md - Section metadata (titles, impacts, descriptions) - template.md - Template for creating new rules - area-description.md - Individual rule files - m

7.021k3by vercel-labs

D3 Viz

Skill

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

8.014k2by sickn33

Aeo Optimization

Skill

AI Engine Optimization - semantic triples, page templates, content clusters for AI citations

9.09592by alinaqi

Agoragentic

Skill

Use when an autonomous agent needs to register an identity, resolve agent:// aliases, discover capabilities, execute routed tasks, or list paid services on Agoragentic with USDC settlement on Base L2.

7.83982by rhein1

Shopify Apps

Skill

Expert patterns for Shopify app development including Remix/React Router apps, embedded apps with App Bridge, webhook handling, GraphQL Admin API, Polaris components, billing, and app extensions. Use when: shopify app, shopify, embedded app, polaris, app bridge.

3.013k2by sickn33

React State Management

Skill

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.

8.014k2by sickn33

React UI Patterns

Skill

Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.

9.014k2by sickn33

I18n Localization

Skill

Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.

7.014k2by sickn33

Web Perf

Skill

Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed.

8.07472by cloudflare

Autonomous Agents

Skill

Autonomous agents are AI systems that can independently decompose goals, plan actions, execute tools, and self-correct without constant human guidance. The challenge isn't making them capable - it's making them reliable. Every extra decision multiplies failure probability. This skill covers agent loops (ReAct, Plan-Execute), goal decomposition, reflection patterns, and production reliability. Key insight: compounding error rates kill autonomous agents. A 95% success rate per step drops to 60% b

4.013k2by sickn33

Project Templates

Skill

Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.

5.013k2by sickn33

Compress Images

Skill

Compress images for web/SEO performance using cwebp. Use when optimizing images for faster page loads, reducing file sizes, or converting JPG/PNG to WebP format.

8.04152by rameerez

BrowserAct

Skill

BrowserAct Skills Browser automation CLI built for AI agents. Get past anti-bot walls, hand off to humans across platforms when stuck, run parallel tasks without cross-contamination, and isolate multiple accounts in independent browsers. The browser an AI agent needs has to reach places standard tools can't, let a human seamlessly take over when the agent is stuck, keep parallel tasks from cross-c

8.23.5k1by ccmagia2-gif

Remotion Best Practices

Skill

Best practices for Remotion - Video creation in React

4.013k1by sickn33

Agent Skills

Skill

Use when the user asks to generate, remix, poll, list, download, or delete Sora videos via OpenAI\u2019s video API using the bundled CLI (`scripts/sora.py`), including requests like \u201cgenerate AI video,\u201d \u201cSora,\u201d \u201cvideo remix,\u201d \u201cdownload video/thumbnail/spritesheet,\u201d and batch video generation; requires `OPENAI_API_KEY` and Sora API access.

8.09.9k1by openai

Angular UI Patterns

Skill

Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.

9.014k1by sickn33

Vercel React Native Skills

Skill

A structured repository for creating and maintaining React Native Best Practices optimized for agents and LLMs. - rules/ - Individual rule files (one per rule) - sections.md - Section metadata (titles, impacts, descriptions) - template.md - Template for creating new rules - area-description.md - Individual rule files - metadata.json - Document metadata (version, organization, abstract) - AGENTS.md

8.021k1by vercel-labs

Welcome to KoliBri

Skill

KoliBri stands for "component library for accessibility" and was released as open source by the Informationstechnikzentrum Bund (ITZBund) for reuse and continued development. Together we make HTML accessible using reusable web components to ensure usability and accessibility. The HTML web standard is itself very “openly” specified in order to be as long-lasting and robust as possible. It therefore

3.03981by public-ui

title}

Skill

Per-component i18n AI-powered translation. Visual Editor. Multilingual CMS. React + Vite • Most i18n libraries are either too complex, too rigid, or not built for modern frameworks. Intlayer is a modern i18n solution for web and mobile apps. It’s framework-agnostic, AI-powered, and includes a free CMS & visual editor. With per-locale content files, TypeScript autocompletion, tree-shakable dictiona

6.08971by aymericzip