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 Component ScreenshotStory 파일에서 컴포넌트 스크린샷 캡처. "/screenshot", "스크린샷 캡처" 등의 요청 시 사용 Use when this capability is needed.
- tomevault-io Bundle Hakal Team Skills Accessible Component Patterns
Accessible Component Patterns
- tomevault-io Bundle Higashi Kota LLM Internal RAG Chat UI Component
UI Component Skill
- tomevault-io Bundle React Localstorage Keyboard Nav
Create React components with localStorage persistence and keyboard navigation support Use when this capability is needed.
- tomevault-io Bundle X Ipe Tool Draw System Landscape
Render system landscape diagrams (Landscape View) from Architecture DSL definitions. Creates self-contained HTML visualizations showing application integration maps with zones, apps, databases, and action flows. Integrates with X-IPE theme system. Triggers on requests like "draw landscape", "render landscape view", "system landscape diagram". Use when this capability is needed.
- tomevault-io Bundle Vue State Manager
Use when vue state work spans multiple steps and needs planning plus execution coordination.
- tomevault-io Bundle Web Interface
Build and deploy a Next.js web interface for the Voice Assistant with real-time voice/chat capabilities. Use when this capability is needed.
- tomevault-io Bundle Mobile Framework React Native
React Native mobile development patterns - New Architecture (Fabric, TurboModules, JSI), component architecture, React Navigation 7+, FlashList v2 optimization, gestures with Reanimated 4, platform-specific code, React 19 features Use when this capability is needed.
- tomevault-io Bundle Aj Geddes Useful AI Prompts Color Accessibility
Color Accessibility
- tomevault-io Bundle Building AI Chat
Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support. Use when creating ChatGPT-style interfaces, AI assistants, code copilots, or conversational agents. Handles streaming text, token limits, regeneration, feedback loops, tool usage visualization, and AI-specific error patterns. Provides battle-tested components from leading AI products with accessibility and performance built in.
- tomevault-io Bundle Visualizing Data
Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics. Provides systematic framework for selecting appropriate visualizations based on data characteristics and analytical purpose. Includes 24+ visualization types organized by purpose (trends, comparisons, distributions, relationships, flows, hierarchies, geospatial), accessibility patterns (WCAG 2.1 AA compliance), colorblind-safe palettes, and performance optimization strategies. Use when creating visualizations, choosing chart types, displaying data graphically, or designing data interfaces.
- tomevault-io Bundle Arco Design Vue
Arco Design Vue UI 组件库参考，面向 Vue 3 和 `@arco-design/web-vue`。当用户要求构建 Vue 页面、创建 Vue UI、使用 Arco Vue 编写前端代码、开发 Vue 仪表盘或应用，或提到 Arco Design Vue、`@arco-design/web-vue`、`a-button`、`a-table`、`a-form`、`a-modal`、`a-select`、`Message`、任意 Arco Vue 组件名时使用。覆盖安装、全局注册、按需加载、主题、国际化、Vue 3 Composition API 约定、组件属性/事件/插槽、示例、表单、表格、弹窗、导航、数据录入、数据展示、反馈和响应式布局。 Use when this capability is needed.
- tomevault-io Bundle React Use Hooks
Apply react-use hooks where appropriate to build concise, maintainable React features. Use when this capability is needed.
- tomevault-io Bundle Building Streamlit Custom Components V2
Builds bidirectional Streamlit Custom Components v2 (CCv2) using `st.components.v2.component`. Use when authoring inline HTML/CSS/JS components or packaged components (manifest `asset_dir`, js/css globs), wiring state/trigger callbacks, theming via `--st-*` CSS variables, or bundling with Vite. For streamlit-extras, use the `pagination` extra as a reference implementation.
- tomevault-io Bundle Feature Build
Complete feature development lifecycle from task selection through commit. Orchestrates component design, build loops with browser testing, PostHog analytics, and documentation updates. Use when building any new feature or enhancement. Use when this capability is needed.
- tomevault-io Bundle Shelby Dapp Builder
Expert on building decentralized applications with Shelby Protocol storage on Aptos. Helps with dApp architecture, wallet integration (Petra), browser SDK usage, React/Vue integration, file uploads, content delivery, and building Shelby-powered applications. Triggers on keywords Shelby dApp, build on Shelby, Shelby application, Petra wallet, browser storage, web3 app, decentralized app Shelby, React Shelby, Vue Shelby. Use when this capability is needed.
- tomevault-io Bundle You Might Not Need An Effect
Review React code for unnecessary useEffect usage based on react.dev guidelines. Analyses code for useEffect anti-patterns and optionally applies fixes. Use when reviewing React code quality or refactoring effects. Use when this capability is needed.
- tomevault-io Bundle M3 Web Angular
Implement Material Design 3 in Angular using Angular Material (@angular/material) with first-class M3 support. Covers M3 theming via design tokens, SCSS mixins, CLI schematics, and component usage. Use this when building M3-styled Angular applications. Use when this capability is needed.
- tomevault-io Bundle M3 Web Vanilla
Implement Material Design 3 using only vanilla CSS custom properties and semantic classes. Zero dependencies. Use this when building M3-styled static sites, simple web apps, or when you need full control over every design token without a framework. Use when this capability is needed.
- tomevault-io Bundle Ag UI Integration
Integrate AG-UI protocol with backend and frontend. Use this skill to connect a Next.js/React frontend to a Python agent backend using CopilotKit and the AG-UI protocol. Use when this capability is needed.
- tomevault-io Bundle Ssd Mkdocs Platform Teams Board Frontend Design
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
- tomevault-io Bundle Review Localization
Prueft App-Texte auf Internationalisierung, Cross-Platform-Konsistenz, ungenutzte Keys und Accessibility-Label-Konsistenz. Aktiviere bei "Review Texte...", "Check localization...", "Pruefe Uebersetzungen...", oder /review-localization. Use when this capability is needed.
- tomevault-io Bundle Tanstack Ranger
Headless utilities for building range and multi-range sliders in TS/JS, React, Vue, Solid, Svelte & Angular. Use when this capability is needed.
- tomevault-io Bundle File Structure Optimization
Optimize project file structure to improve maintainability and scalability. Reorganizes feature-based architecture, improves component organization, consolidates duplicated utilities, and aligns with production best practices for monorepo projects. Use when this capability is needed.
- tomevault-io Bundle Backstage Frontend Plugin
Build Backstage frontend plugins with the new Frontend System. Use when this capability is needed.
- tomevault-io Bundle Fullstack Patterns
Patterns for implementing end-to-end features across frontend, backend, and database Use when this capability is needed.
- tomevault-io Bundle Registry Component Patterns
Register components in registry.json for shadcn/ui add command. Apply when adding new 8-bit components to the component library. Use when this capability is needed.
- tomevault-io Bundle Importing Data
Systematic CSV import process - discover structure, design schema, standardize formats, import to database, detect quality issues (component skill for DataPeeker analysis sessions) Use when this capability is needed.
- tomevault-io Bundle Yellinzero Aico Aico Frontend Implement
Implement
- tomevault-io Bundle Yteruel31 Claude Marketplace React Flow
React Flow Documentation Skill
- tomevault-io Bundle Design Component
Design a UI component with specifications for layout, states, interactions, and accessibility. Use when creating new Vue.js components or redesigning existing ones. Use when this capability is needed.
- tomevault-io Bundle Verify Deployment
Use this skill when the user asks to "verify my deployment", "check if everything is working", "test my deployment", "check if my services are up", "run health checks", or when invoked by deploy-project as the final step after CI/CD setup. Reads DEPLOYMENT_DOCS/DEPLOYED_ENV.md for service URLs, runs HTTP health checks on all services, uses agent-browser to visually verify the frontend loads, tests cross-service connectivity (frontend calls backend, backend connects to DB), and prints a pass/fail summary table. Retries Render backend endpoints up to 3 times due to free tier cold starts.
- tomevault-io Bundle Generate Import HTML
Generate structured HTML from authoring analysis for AEM Edge Delivery Services. Creates section structure, applies block tables, handles metadata, and manages images folder. Use when this capability is needed.
- tomevault-io Bundle Frontend Navigation
React Router v7 navigation - route definitions, SSR integration, auth guards, Link/Navigate patterns, layout nesting, and project conventions Use when this capability is needed.
- tomevault-io Bundle React Hook Form Zod
React Hook Form with Zod validation, shadcn/ui Form components, accessibility (autocomplete/name/labels), async submissions, and error handling patterns Use when this capability is needed.
- tomevault-io Bundle Web Data Fetching Trpc
tRPC type-safe API patterns, procedures, middleware, React Query integration 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 component-screenshot, hakal--team-skills--accessible-component-patterns, higashi-kota--llm-internal-rag-chat--ui-component. 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.