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.
-
tomevault-io Bundle Gpui StylingStyling GPUI elements with Tailwind-like utility methods. Use when applying styles, layouts, colors, spacing, or creating responsive designs. Use when this capability is needed.
- tomevault-io Bundle React Testing
React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs. Use when writing or fixing tests for React components, hooks, or pages. Use when this capability is needed.
- tomevault-io Bundle React Native
React Native mobile patterns, platform-specific code Use when this capability is needed.
- tomevault-io Bundle Sandbox
Visual HTML canvas sandbox for agent-driven UI and live previews Use when this capability is needed.
- tomevault-io Bundle Agent
AI agent development. ReAct/plan-and-execute/multi-agent architectures, tool design, memory systems, guardrails, orchestration (LangChain, LlamaIndex, CrewAI, AutoGen). Use when this capability is needed.
- tomevault-io Bundle Cherrycss Theme
Cherry Studio 主题 CSS 制作指南 —— 了解 CSS 变量系统、毛玻璃技法、渐变背景等，最终输出可直接粘贴使用的 CSS 代码。 Use when this capability is needed.
- tomevault-io Bundle Byaanstart
Initialize Byaan development environment using Docker. Builds and starts backend and frontend containers with SQLite, opens the browser, learns the codebase, and configures MCP. Use when setting up the project for the first time. Use when this capability is needed.
- tomevault-io Bundle Accessibility
Use when building or auditing UI for accessibility (a11y). Covers WCAG 2.1 AA compliance, semantic HTML, ARIA, keyboard navigation, focus management, color contrast, screen readers, and form accessibility.
- tomevault-io Bundle Otto Frontend
Frontend specialist for Otto dashboard development. Use when working on React components, pages, hooks, or any client-side code in client/src/. Use when this capability is needed.
- tomevault-io Bundle Caraya Agent Skills Vue UI
Vue UI Engineering
- tomevault-io Bundle Tanstack Query Best Practices
TanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management. Activate when building data-driven React applications with server state. Use when this capability is needed.
- tomevault-io Bundle Itechmeat LLM Code Base UI
Base UI (React)
- tomevault-io Bundle Webapp
Launches the Photonic Cloud Lab web UI (FastAPI + React) — the browser-based dashboard for running experiments, viewing live results, and interacting with the AI scientist agent. Use this skill whenever the user wants to start the web app, open the web UI, launch the dashboard, see the browser lab, or serve the frontend — even casual phrasing like "open the web app", "start the server", "show me the dashboard", "launch the UI", "fire up the webapp", or "run the website". Use when this capability is needed.
- tomevault-io Bundle Remotion
Best practices for Remotion - Video creation in React Use when this capability is needed.
- tomevault-io Bundle Keboola AI Kit Get Started
Initialize New Keboola Component
- tomevault-io Bundle Agents Sdk
Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Use when this capability is needed.
- tomevault-io Bundle Nodejs CLI Best Practices
Guide and audit Node.js CLI application development against 37 established best practices covering UX, distribution, interoperability, accessibility, testing, error handling, development setup, analytics, versioning, and security. Use this skill when building, extending, reviewing, or scaffolding a Node.js CLI — including when someone says "audit my CLI", "review my CLI code", "I'm building a CLI tool", or asks about adding argument parsing, error handling, color output, STDIN, --json flags, exit codes, --version flags, or npm publishing. Applies even when best practices are not explicitly mentioned. Also trigger for "how should I implement X in my CLI" or "what's the right way to do Y in a Node.js CLI". Do NOT use for Node.js backend or API development with no CLI entry point. Use when this capability is needed.
- tomevault-io Bundle Lism Docs Translation
apps/docs の日本語 MDX ドキュメントを英語へ翻訳する際のガイドライン（用語対応表・直訳回避パターン・意味の正確性・セルフチェック）。日本語ドキュメントをもとに英語版を作成・更新する、ja/ を en/ に翻訳する、英訳する、といった翻訳作業の指示を受けたら読み込む。 Use when this capability is needed.
- tomevault-io Bundle Gomponents
Guide for working with gomponents, a pure Go HTML component library. Use this skill when reading or writing gomponents code, or when building HTML views in Go applications. Use when this capability is needed.
- tomevault-io Bundle Alpine JS
Alpine.js development guidelines for lightweight reactive interactions with Tailwind CSS and various backend frameworks. Use when this capability is needed.
- tomevault-io Bundle Storybook
Best practices for building and documenting component libraries with Storybook Use when this capability is needed.
- tomevault-io Bundle Sveltekit
Expert guidance for SvelteKit development with TypeScript, Tailwind CSS, SSR/SSG, and performance optimization best practices Use when this capability is needed.
- tomevault-io Bundle Imagegen Frontend Mobile
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code. Use when this capability is needed.
- tomevault-io Bundle Upgrade React Native
Upgrade React Native version in example/ directory using rn-diff-purge methodology. Use when the user wants to upgrade react-native, migrate to a new RN version, or update React Native dependencies in the example app. Handles diff retrieval, systematic file changes, dependency updates, and conflict resolution. Use when this capability is needed.
- tomevault-io Bundle Lit Best Practices
Lit web components best practices and performance optimization guidelines. Use when writing, reviewing, or refactoring Lit web components. Triggers on tasks involving Lit components, custom elements, shadow DOM, reactive properties, or web component performance. Use when this capability is needed.
- tomevault-io Bundle Schematics
Use this skill when working with Spartacus schematics - Angular schematics for installing, configuring, and migrating Spartacus libraries. Trigger when the user mentions writing, debugging, or testing schematics, works with migration scripts or constructor/component deprecations, creates feature schematics configuration, adds new library installation schematics, tests schematics with verdaccio, or updates migrations.json or deprecation data files. Even if the user just mentions 'schematics', 'ng add', or 'ng update' in the context of Spartacus development, load this skill.
- tomevault-io Bundle Component Development
Creating components (inline/docker). Dynamic ports, retry policies, PTY patterns, IsolatedContainerVolume. Use when this capability is needed.
- tomevault-io Bundle Cleanup
Run all code quality skills in sequence — effects, memo, callbacks, state, React Query, and emcn design review Use when this capability is needed.
- tomevault-io Bundle Talkdown
Talkdown — An AI-based execution language. Markdown documents are programs, LLMs are the runtime. Supports document chaining, hybrid AI/code execution, pluggable LLM providers, and Next.js-style route deployment. Use when this capability is needed.
- tomevault-io Bundle Openui
Build generative UI apps with OpenUI and OpenUI Lang — the token-efficient open standard for LLM-generated interfaces. Use when mentioning OpenUI, @openuidev, generative UI, streaming UI from LLMs, component libraries for AI, or replacing json-render/A2UI. Covers scaffolding, defineComponent, system prompts, the Renderer, and debugging OpenUI Lang output. Use when this capability is needed.
- tomevault-io Bundle Uisnap
Captures browser state to disk for token-efficient debugging. Use for frontend debugging, performance analysis, accessibility testing, or when investigating page behavior. Supports snapshots (functional debugging) and Chrome traces (performance profiling). Use when this capability is needed.
- tomevault-io Bundle Tscircuit
Build, modify, and debug tscircuit (React/TypeScript) PCB designs. Use when working with tsci CLI (init/dev/search/add/import/build/export/snapshot/push), choosing footprints, placing parts, wiring nets/traces, or preparing fabrication outputs (Gerbers/BOM/PnP). Use when this capability is needed.
- tomevault-io Bundle React Native Best Practices
React Native development. Cross-platform code, native modules, performance. Use when building mobile apps. Use when this capability is needed.
- tomevault-io Bundle Integration Nextjs App Router
PostHog integration for Next.js App Router applications Use when this capability is needed.
- tomevault-io Bundle Navikt Aksel Aksel
ds-component-restructure
- tomevault-io Bundle React Hooks
Best practices for React Hooks usage and custom hook creation. Use when this capability is needed.
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 gpui-styling, react-testing, react-native. 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.