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.
-
liaosw97 Bundle Nextjs BasicUse when working with Next.js — basic setup, App Router fundamentals, and routing
- liaosw97 Bundle Nuxt3 CSS Specific Rules
特定于 CSS 文件的规则，专注于使用 TailwindCSS 并尽可能避免自定义 CSS。
- liaosw97 Bundle Apollo GRAPHQL
Use when working with React — development rules
- liaosw97 Bundle Micro Frontend
Use when working with micro-frontend — Module Federation, Single-SPA, Qiankun, app splitting
- liaosw97 Bundle Nuxt3 HTML Specific Rules
特定于 HTML 文件的规则，专注于可访问性和 Tailwind 样式设计。
- liaosw97 Bundle Nextjs React TS
Use when working with Next.js + React + TypeScript — full-stack React development
- liaosw97 Bundle Nuxt3 Vue Nuxt General Rules
适用于 Vue 3 和 Nuxt 3 项目，强制执行前端开发最佳实践，包括 TypeScript、TailwindCSS 和组合式 API。
- liaosw97 Bundle Nextjs React TS React Next JS Components
React/Next.js 组件特定规则。包括使用函数式组件、JSX、样式设计和其他 React/Next.js 约定。
- liaosw97 Bundle Angular Typescript Guide Angular General
Angular component general rules — code quality, performance, and maintainability
- liaosw97 Bundle Styled Components Best Practices General
在 React 组件中应用 Styled Components 的最佳实践。
- liaosw97 Bundle Nextjs Tailwind React Component Guidelines
专注于 components 目录中可重用、响应式和可访问的 React 组件。
- liaosw97 Bundle Vite Tailwind Vue JS Component Rule
定义 Vue.js 组件的风格和结构，包括命名约定、组合 API 使用和 UI 库偏好。
- liaosw97 Bundle Composition API Vue 3 Additional Instructions
Vue 3 开发的额外说明，涵盖错误处理、样式设计和最佳实践等领域。
- liaosw97 Bundle Mobx React General Preferences
一般 React 偏好，优先使用带有 hooks 的函数式组件
- liaosw97 Bundle React Native Expo
Use when working with React — development rules
- liaosw97 Bundle Fullstack Mern Guide
Use when working with MERN stack (MongoDB, Express, React, Node.js) — fullstack development
- liaosw97 Bundle Nextjs Basic Coding Style Rules
Next.js项目编码风格规范，涵盖注释规范、模块化设计、DRY原则、性能与安全最佳实践
- liaosw97 Bundle Chakra UI Responsive Design
利用 Chakra UI 的布局组件在 React 应用程序中创建响应式设计
- liaosw97 Bundle Nextjs Basic Backend Stack Rules
指定后端技术栈，包括 Next.js API Routes 和 TypeScript，适用于所有后端文件
- liaosw97 Bundle Nextjs React TS General Solidity Typescript Node JS Next JS
Solidity、TypeScript、Node.js 和 Next.js 项目的一般编码约定和偏好。此规则为代码风格和架构奠定基础。
- liaosw97 Bundle Sveltekit Tailwind Typescript Guide Imports Aliasing
Use when working with SvelteKit — imports aliasing, $lib path aliases
- liaosw97 Bundle Sveltekit Tailwind Typescript Guide Typescript Typing
Use when working with SvelteKit — TypeScript typing, interfaces, type definitions
- liaosw97 Bundle Sveltekit Tailwind Typescript Guide Code Quality Tools
Use when working with SvelteKit code quality — ESLint, Prettier, code review
- liaosw97 Bundle Sveltekit Tailwind Typescript Guide General Code Guidelines
Use when working with SvelteKit — code guidelines, Tailwind styling, accessibility, naming
- liaosw97 Bundle Sveltekit Tailwind Typescript Guide Svelte Component Syntax
Use when working with SvelteKit — component syntax, .svelte files, TypeScript script tags
- liaosw97 Bundle Sveltekit Tailwind Typescript Guide Svelte State Management
Use when working with SvelteKit — state management, stores, reactive declarations
- liaosw97 Bundle Vite Tailwind General Typescript Rule
应用一般 TypeScript 最佳实践，包括使用接口、避免枚举和使用函数式组件。
- liaosw97 Bundle Composition API Vue 3 Composition API General
使用 Composition API 的 Vue 3 组件的一般指导原则。这包括组件结构和响应式状态管理的最佳实践和建议。
- liaosw97 Bundle Nextjs React TS Error Handling And Validation
在所有代码中优先考虑错误处理和边缘情况。定义如何管理错误、处理前置条件和实现日志记录。
- liaosw97 Bundle Nextjs Tailwind General Typescript Guidelines
为项目中所有 TypeScript 文件强制执行 TypeScript 最佳实践和编码标准。
- liaosw97 Bundle Fullstack Mern Guide Frontend Tech Stack
前端技术栈
- liaosw97 Bundle Nextjs Basic Frontend Stack Rules
指定前端技术栈，包括 React、TypeScript、Shadcn/UI、Tailwind CSS 和 Lucide React，适用于所有前端文件
- liaosw97 Bundle Nextjs Tailwind Next JS App Routing Guidelines
适用于 Next.js app 目录，确保遵循路由约定和最佳实践。
- liaosw97 Bundle React Components React Component Prompt Example
为生成具有特定说明的 React 组件提供示例提示模板。
- liaosw97 Bundle Chakra UI React Chakra UI Folder Structure
维护 React 和 Chakra UI 项目的定义文件夹结构以确保代码组织有序
- liaosw97 Bundle Chakra UI React Chakra UI Typescript Usage
在使用 Chakra UI 的 React 组件时利用 TypeScript 确保类型安全
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 nextjs-basic, nuxt3-css-specific-rules, apollo-graphql. 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.