How do I install the Frontend skill?

Run npx skillmds@latest add majiayu000/frontend-4 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Frontend safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend by majiayu000 — Agent Skill

Name: Frontend
Rating: 4.666666666666667 (3 reviews)
Author: majiayu000

File contents

前端开发模式

本技能提供前端开发的最佳实践和模式，支持多框架按需加载。

快速参考

核心职责: 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发
框架支持: Vue 3 / React 18 / Svelte / Angular 17+（根据 package.json 按需加载）
性能目标: LCP < 2.5s, FID < 100ms, CLS < 0.1, TTI < 3.8s
设计原则: 单一职责、Props 向下、Events 向上、组合优于继承

触发条件

创建或修改前端组件
设计 UI/UX 交互
实现状态管理
性能优化
无障碍开发

框架专属模式

根据项目 package.json 依赖加载对应文件：

技术栈	加载文件	框架
Vue	`vue.md`	Vue 3, Nuxt 3
React	`react.md`	React 18, Next.js
Svelte	`svelte.md`	Svelte, SvelteKit
Angular	`angular.md`	Angular 17+

子文件索引

文件	内容
vue.md	Vue 3 + Composition API 模式
react.md	React 18 + Hooks 模式
svelte.md	Svelte/SvelteKit 模式
angular.md	Angular 17+ 模式
performance.md	Core Web Vitals 优化
tailwind.md	Tailwind 最佳实践 + v4 迁移
design-guide.md	设计方法论与审查清单
patterns.md	通用组件/状态管理/表单/动画/a11y 模式

性能指标

指标	目标	说明
LCP	< 2.5s	最大内容绘制
FID	< 100ms	首次输入延迟
CLS	< 0.1	累积布局偏移
TTI	< 3.8s	可交互时间

设计美学（避免 AI Slop）

详见 design-guide.md — AI 通用审美定义、设计思维方向矩阵、反模式清单与审查清单。

测试模式

详见 rules/frontend/frontend-testing.md 和 rules/frontend/frontend-e2e.md（按文件类型自动加载）。

记住: 前端开发的核心是用户体验——性能、无障碍、交互细节缺一不可，独特的设计比通用模板更有价值。

---name: frontend-4description: Frontend patterns: component design, state management, performance, accessibility. Use when building web frontends, components, or client-side apps.--- # 前端开发模式本技能提供前端开发的最佳实践和模式，支持多框架按需加载。 ## 快速参考 - **核心职责**: 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发 - **框架支持**: Vue 3 / React 18 / Svelte / Angular 17+（根据 `package.json` 按需加载） - **性能目标**: LCP < 2.5s, FID < 100ms, CLS < 0.1, TTI < 3.8s - **设计原则**: 单一职责、Props 向下、Events 向上、组合优于继承 ## 触发条件 - 创建或修改前端组件 - 设计 UI/UX 交互 - 实现状态管理 - 性能优化 - 无障碍开发 ## 框架专属模式根据项目 `package.json` 依赖加载对应文件： | 技术栈 | 加载文件 | 框架 | | ------- | ------------ | ----------------- | | Vue | `vue.md` | Vue 3, Nuxt 3 | | React | `react.md` | React 18, Next.js | | Svelte | `svelte.md` | Svelte, SvelteKit | | Angular | `angular.md` | Angular 17+ | ## 子文件索引 | 文件 | 内容 | | ------------------------------------ | ------------------------------------- | | [vue.md](./vue.md) | Vue 3 + Composition API 模式 | | [react.md](./react.md) | React 18 + Hooks 模式 | | [svelte.md](./svelte.md) | Svelte/SvelteKit 模式 | | [angular.md](./angular.md) | Angular 17+ 模式 | | [performance.md](./performance.md) | Core Web Vitals 优化 | | [tailwind.md](./tailwind.md) | Tailwind 最佳实践 + v4 迁移 | | [design-guide.md](./design-guide.md) | 设计方法论与审查清单 | | [patterns.md](./patterns.md) | 通用组件/状态管理/表单/动画/a11y 模式 | ## 性能指标 | 指标 | 目标 | 说明 | | ------- | ------- | ------------ | | **LCP** | < 2.5s | 最大内容绘制 | | **FID** | < 100ms | 首次输入延迟 | | **CLS** | < 0.1 | 累积布局偏移 | | **TTI** | < 3.8s | 可交互时间 | ## 设计美学（避免 AI Slop） > 详见 [design-guide.md](./design-guide.md) — AI 通用审美定义、设计思维方向矩阵、反模式清单与审查清单。 ## 测试模式 > 详见 `rules/frontend/frontend-testing.md` 和 `rules/frontend/frontend-e2e.md`（按文件类型自动加载）。 --- > **记住**: 前端开发的核心是用户体验——性能、无障碍、交互细节缺一不可，独特的设计比通用模板更有价值。

Frequently asked questions

Frontend