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 Vue OptionsVue 3 Options API — data, props, computed, methods, watch, emits, provide/inject, lifecycle hooks, and mixins. Use when the project uses Options API style (Vue 2 legacy or explicit Vue 3 Options API preference). Use when this capability is needed.
- tomevault-io Bundle Custom View
Build a custom dashboard view from a natural language request — query, API, React component, build, deploy Use when this capability is needed.
- tomevault-io Bundle Web Artifacts Builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. Use when this capability is needed.
- tomevault-io Bundle Yaojingang Geoflow Geoflow
Tailwind CSS Development
- tomevault-io Bundle Next JS
Define best practices when working with Next.js projects Use when this capability is needed.
- tomevault-io Bundle Gpui Patterns
Common UI patterns and advanced techniques for GPUI applications. Use when implementing modals, lists, forms, state sharing, or complex component compositions. Use when this capability is needed.
- tomevault-io Bundle Agent Readable
Use this skill for Python and TypeScript when a user wants to understand an unfamiliar API before coding against it — especially internal libraries, third-party SDKs, recently-upgraded dependencies, or APIs with confusing similar-sounding methods or required call ordering — by getting live runtime introspection rather than relying on docs or guessing. Also use when designing a Python or TypeScript class and wanting to annotate it with lifecycle rules, preconditions, or method-ordering constraints that agents and developers can discover via introspection. Always trigger for any mention of agent_help, agentHelp, __agent_notes__, agentNotes, AgentReadableMixin, or agent-readable. Skip for familiar stdlib, CSS/UI, pure algorithms, and non-Python/TypeScript code.
- tomevault-io Bundle Web Static
Build modern static websites using semantic HTML and CSS without external dependencies or build systems Use when this capability is needed.
- tomevault-io Bundle React Component
Create React components following project standards. Use when building new UI components, creating reusable components, or implementing designs. Use when this capability is needed.
- tomevault-io Bundle Scrape Webpage
Scrape webpage content, extract metadata, download images, and prepare for import/migration to AEM Edge Delivery Services. Returns analysis JSON with paths, metadata, cleaned HTML, and local images. Use when this capability is needed.
- tomevault-io Bundle React Patterns
React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components. Use when this capability is needed.
- tomevault-io Bundle Ahooks
Evaluates whether ahooks hooks can replace hand-rolled React patterns when implementing features. Applies ahooks function-handling conventions (useMemoizedFn, stable outputs, latest inputs). Use when completing features, pages, or modules (完成xxx功能/页面/模块), refactoring hooks, or when code uses mountedRef/useCallback/debounce/polling patterns that ahooks may cover. Use when this capability is needed.
- tomevault-io Bundle Mkvue
Vue 3 Composition API patterns, Pinia state management, reactivity, component design, and performance. Auto-activates on .vue files or Vue-related tasks. Use for Vue architecture decisions, composables, Pinia stores, forms, and optimization. Use when this capability is needed.
- tomevault-io Bundle Vue Expert JS
Use when building Vue 3 applications with JavaScript only (no TypeScript). Invoke for JSDoc typing, vanilla JS composables, .mjs modules.
- tomevault-io Bundle Tinyvue Develop Spec
tinyvue组件库开发规范 Use when this capability is needed.
- tomevault-io Bundle Testing A11Y
Accessibility testing (WCAG, keyboard, screen reader) Use when this capability is needed.
- tomevault-io Bundle Extract Parameters From Digest
Use when the user wants to extract parameters from a PlanExe extraction-input digest (the markdown produced by experiments/napkin_math/prepare_extract_input.py — the 137-recommended section bundle, with the four "Keep or compress" sections compressed) instead of the full PlanExe HTML report
- tomevault-io Bundle Plasmic Designer
Build and modify Plasmic Studio designs using copilot tools via Chrome DevTools MCP. First argument should be a project ID, followed by the design request. Use this skill whenever the user mentions Plasmic, Plasmic Studio, visual web builder, or asks to design, build, edit, or modify UI components, pages, sections, or layouts inside a Plasmic project. Also trigger when the user references a Plasmic project ID, wants to add/remove/restyle elements in a visual editor, or asks about Plasmic component props, variants, slots, or tokens — even if they don't say "Plasmic" explicitly but describe visual design work that implies it. Use when this capability is needed.
- tomevault-io Bundle Next Upgrade
Upgrade Next.js to the latest version following official migration guides and codemods Use when this capability is needed.
- tomevault-io Bundle Svelte Runes
Svelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes. Use when this capability is needed.
- tomevault-io Bundle Terminal CSS
Provides Textual TCSS patterns for terminal widgets and ACP content styling. Use when building terminal UIs with color-first design, styling Agent Client Protocol output, or integrating Dracula-themed terminal rendering.
- tomevault-io Bundle Ralix Rails
Develop frontend code using Ralix microframework in Ruby on Rails projects. Use when creating controllers, components, helpers, templates, or working with Ralix patterns, route-based controllers, component lifecycle, Ralix helpers (find, findAll, findParent, findParents, on, elem, addClass, removeClass, toggleClass, hasClass, attr, data, style, removeAttr, removeData, insertHTML, sanitize, render, insertTemplate, visit, back, reload, currentUrl, getParam, setParam, get, post, ajax, serialize, submit, currentElement, currentEvent), or integrating Ralix with Rails UJS and Turbolinks/Turbo. Use when this capability is needed.
- tomevault-io Bundle Termcast
Build TUIs with a Raycast-like React API using termcast. Implements @raycast/api components (List, Detail, Form, Action) rendered to the terminal via opentui. Use when this capability is needed.
- tomevault-io Bundle Vue Expert
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.
- tomevault-io Bundle Render Page
Use this skill to inspect what a Rails page currently displays, extract HTML content, or verify rendering WITHOUT starting a dev server. Useful for understanding page output before making changes, debugging views, searching for content, or testing that pages work correctly. Provides .claude/skills/render-page/scripts/render.rb for quick page inspection and HTML extraction.
- tomevault-io Bundle Rhf Zod Form Validation
Enforce React Hook Form + Zod + TanStack Query mutation patterns. Use when building or refactoring forms, modals, drawers, dialogs, pages with form state, Zod schemas, zodResolver wiring, submit handlers, POST/PUT/PATCH mutations, API payload mapping, query invalidation, toast feedback, server errors, edit-mode prefill, or enabled edit queries. Do not use for simple form layout-only questions without validation or submission logic. Use when this capability is needed.
- tomevault-io Bundle Frontend Dev
TypeScript/Vue frontend development for CTF-AI. Use when working on game UI, Phaser scenes, Vue components, WebSocket client, or any frontend code. Use when this capability is needed.
- tomevault-io Bundle Vue Tui
Terminal Vue UI development and review for @simon_he/vue-tui. Use when implementing, debugging, testing, documenting, or reviewing vue-tui terminal components, dialogs, inputs, transcripts, keyboard and pointer interactions, render planes, scheduler invalidation, cell-width layout, theming, createTerminalApp tests, or CLI consumer integration patterns. Use when this capability is needed.
- tomevault-io Bundle React I18N
react-i18next for React 19 - useTranslation hook, TypeScript Selector API, namespaces, pluralization, lazy loading, Suspense integration. Use when implementing translations in React apps (not Next.js). Use when this capability is needed.
- tomevault-io Bundle Vercel
Vercel frontend deployment with edge functions. Use for frontend hosting. Use when this capability is needed.
- tomevault-io Bundle Gaia Pickup
Restore context from the most recent GAIA session handoff and suggest the next action. Trigger on `/gaia-pickup` or natural-language asks like "pick up where we left off", "resume from the handoff", or "continue the last session". Use when this capability is needed.
- tomevault-io Bundle C4 Modeling
C4 model (Context, Container, Component, Code) diagram patterns with Mermaid syntax for architecture documentation Use when this capability is needed.
- tomevault-io Bundle Md2html
Convert long-form Markdown (plan, spec, system design, RFC, runbook, postmortem, brainstorm, notes) into a single self-contained HTML page with Mermaid diagrams, step timelines, callouts, sidebar TOC. Claude-orange light+dark theme. Multi-language. Portable across Claude Code / Codex / Antigravity / any AI agent. Use when this capability is needed.
- tomevault-io Bundle Applesauce
Reactive Nostr SDK for TypeScript and JavaScript built on RxJS and a single in-memory EventStore. Use whenever the user is building or modifying a Nostr client, working with NIP events/filters/pointers, subscribing to relays or pools, managing accounts/signers, loading events, publishing/replying/reacting/following, rendering note content, working with NIP-17/44/46/57/60/65, or wiring reactive React UI over Nostr data. Prefer this skill any time the user is in a TS/JS Nostr context, even if they have not named applesauce explicitly. Use when this capability is needed.
- tomevault-io Bundle Fixing Motion Performance
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance. Use when this capability is needed.
- tomevault-io Bundle Social Graphic
Generate 1080x1080 HTML social graphics for HQ update posts. 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 vue-options, custom-view, web-artifacts-builder. 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.