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 Docs Md Version本项目是 monorepo 项目，该技能限制目录为 docs 子包，对 markdown 文件中一些新功能或废弃功能的版本支持信息，使用内置的公共组件进行编写。 Use when this capability is needed.
- tomevault-io Bundle Starry Slides
Create polished HTML slide decks and presentations with Starry Slides. Use this skill to generate, edit, verify, preview, and open editable presentation decks with the Starry Slides CLI and visual editor. Use when this capability is needed.
- tomevault-io Bundle Writing React Native Storybook Stories
Create and edit React Native Storybook stories using Component Story Format (CSF). Use when writing .stories.tsx files, adding stories to React Native components, configuring Storybook addons (controls, actions, backgrounds, notes), setting up argTypes, decorators, parameters, or working with portable stories for testing. Applies to any task involving @storybook/react-native story authoring. Use when this capability is needed.
- tomevault-io Bundle Collaboration Hub
Develop and modify the AILANG Collaboration Hub UI. Use when user asks to add features to the monitoring dashboard, modify the approval queue, update the message center, or make changes to the React frontend. Use when this capability is needed.
- tomevault-io Bundle Fp TS React
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Use when building React apps with functional programming patterns. Works with React 18/19, Next.js 14/15. Use when this capability is needed.
- tomevault-io Bundle Databricks Unstructured PDF Generation
Generate PDF documents from HTML and upload to Unity Catalog volumes. Use for creating test PDFs, demo documents, reports, or evaluation datasets. Use when this capability is needed.
- tomevault-io Bundle Pinpoint UI
shadcn/ui patterns, progressive enhancement, Server Components, Client Components, form handling, Tailwind CSS v4, accessibility. Use when building UI, forms, components, or when user mentions UI/styling/components/forms. Use when this capability is needed.
- tomevault-io Bundle Browser Dev Tools
This skill should be used when working with browser-rendered artifacts (i.e. Bun, React/React Native) to proactively validate that development work on localhost is being built appropriately and to support debugging browser-rendered content. Use this skill after making frontend changes to verify the output visually. Use when this capability is needed.
- tomevault-io Bundle Tonic UI Patterns
Coding patterns extracted from tonic-ui repository Use when this capability is needed.
- tomevault-io Bundle Span Timeline Events
Use when adding, modifying, or debugging OTel span timeline events in the trace view. Covers event structure, ClickHouse storage constraints, rendering in SpanTimeline component, admin visibility, and the step-by-step process for adding new events.
- tomevault-io Bundle Typescript Testing
This skill provides frontend testing rules with Vitest, React Testing Library, and MSW. Automatically loaded when writing frontend tests, reviewing test quality, or when "Vitest", "React Testing Library", "MSW", "component test", or "frontend test coverage" are mentioned. Use when this capability is needed.
- tomevault-io Bundle React Domain Delivery
Use WHEN implementing or reviewing React component, hook, form, state, accessibility, data-fetching, error/loading, performance, or test work that needs React-specific delivery discipline beyond generic frontend practice. TO deliver stack-specific production changes with framework-native practices, verification evidence, and rollback discipline.
- tomevault-io Bundle Vue Jsx Best Practices
JSX syntax in Vue (e.g., class vs className, JSX plugin config). Use when this capability is needed.
- tomevault-io Bundle Flowkit Naming
Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach. Use when this capability is needed.
- tomevault-io Bundle Enactplaywright
Optional CSS selector to target specific element Use when this capability is needed.
- tomevault-io Bundle Reactcomponents
Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
- tomevault-io Bundle Mobile IOS
Mobile-Ios standards for mobile ios in Frontend environments. Covers Use when this capability is needed.
- tomevault-io Bundle Willyu1007 Mytrader Style Frontend UI
Style Frontend UI
- tomevault-io Bundle Screen Reader Testing
Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring assistive technology support. Use when this capability is needed.
- tomevault-io Bundle Mobile Debug Tools
Cross-platform Mobile-MCP tools for device interaction, screenshots, touch simulation, and UI inspection. Works with iOS Simulator and Android Emulator for any mobile app (Flutter, native, React Native). Use when this capability is needed.
- tomevault-io Bundle Oxygen Component
Generate Oxygen UI React components following best practices. Use when creating new components, data tables, cards, or UI elements with the Oxygen UI library. Use when this capability is needed.
- tomevault-io Bundle Hugo Template Guidance
Use whenever you need to understand how this theme works — adding pages, managing content, configuring the site, using partials/components/modules, project architecture, scripts, or styling/theming (Tailwind v4, Bootstrap 5, or a hybrid — verify which). Use for ANY question about the structure, usage, or customization of the template or theme.
- tomevault-io Bundle Adilkalam Orca React Performance
React Performance Patterns
- tomevault-io Bundle Implement Github Feature
Design and implement a new feature or component from a GitHub issue. Use for net-new functionality, not bug fixes. Use when this capability is needed.
- tomevault-io Bundle Shadmin Feature Dev
Apply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS). Use when adding/modifying features, CRUD modules, API routes/controllers/usecases/repositories, Ent schemas, or web pages/routes. Use when this capability is needed.
- tomevault-io Bundle Chat UI
Building and extending the @openbench/chat-ui TypeScript/React SDK. Use when creating chat components, A2UI v0.10 renderers, custom components, hooks, SSE + REST transport, or styling the chat interface. Use when this capability is needed.
- tomevault-io Bundle Ant Design
Decision guide for antd 6.x, Ant Design Pro 5/ProComponents, Ant Design X v2, and the offline `@ant-design/cli`. Use for component selection, theming/tokens, SSR, a11y, performance, routing/access/CRUD, AI/chat UI patterns, local API lookup, debugging, migration, and usage analysis. Use when this capability is needed.
- tomevault-io Bundle Astro V6 Upgrade
Guide for upgrading Astro projects from v5 to v6. Use when users mention upgrading Astro, Astro v6, Astro 6, or errors related to content collections, ViewTransitions, Astro.glob, Zod schemas, or Content Layer API. Use when this capability is needed.
- tomevault-io Bundle Hyperscribe
Generate self-contained HTML pages and slide decks (diagrams, comparison tables, architecture overviews, diff reviews, visual recaps) by emitting semantic component JSON. Use whenever a visual artifact communicates better than terminal prose — proactively trigger on 4+ row tables, ASCII flowcharts, multi-stage pipelines, or explicit "make a diagram / slides / recap" requests. Use when this capability is needed.
- tomevault-io Bundle Auth0 React Native
Use when adding authentication to React Native or Expo mobile apps (iOS/Android) with biometric support - integrates react-native-auth0 SDK with native deep linking
- tomevault-io Bundle Intlayer Vue
Integrates Intlayer internationalization with Vue.js and Nuxt applications. Use when the user asks to "setup Vue i18n", use the "useIntlayer" composable, or manage translations in Vue components.
- tomevault-io Bundle Recharts Patterns
Data visualization patterns using Recharts 3.x - a composable charting library built with React and D3. Use when creating charts, dashboards, or data visualizations in React applications. Use when this capability is needed.
- tomevault-io Bundle Zoonk Compound Components
Build UI components using the compound component pattern. Use when creating new React components, building UI elements, refactoring components, or when the user mentions compound components, composable components, component patterns, or UI building blocks. Use when this capability is needed.
- tomevault-io Bundle Frontend Build
Production-grade frontend development with distinctive design. Activates for "build UI", "create component", "landing page", "dashboard", "form", "responsive", "tailwind", "frontend", "design", "React", "Next.js" requests. Use when this capability is needed.
- tomevault-io Bundle Abhayla Claude Best Practices Vue Test
Vue.js Test Runner
- tomevault-io Bundle Web Styling Tailwind
Tailwind CSS v4 - utility-first CSS framework with CSS-first configuration 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 docs-md-version, starry-slides, writing-react-native-storybook-stories. 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.