Frontend Patterns

by xu-xiang

Frontend Patterns is a Frontend skill for Claude Code, published by xu-xiang in everything-claude-code-zh.

1.9K stars307 forkson xu-xiang/everything-claude-code-zhAdded 2026/08/18+1% in starsRepository updated 2026/03/05

View source on GitHub Download repo ZIP

ai-agentsanthropicclaudeclaude-codedeveloper-toolseverything-claude-codellmmcponeskillproductivity

Install in seconds

Install Frontend Patterns

Copy Frontend Patterns into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/xu-xiang/everything-claude-code-zh/tree/main/skills/frontend-patterns ~/.claude/skills/frontend-patterns

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/xu-xiang/everything-claude-code-zh.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/frontend-patterns/SKILL.md in xu-xiang/everything-claude-code-zh
Installs to: ~/.claude/skills/frontend-patterns
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 567 skills

What Frontend Patterns does

Frontend Patterns provides modern frontend patterns for React, Next.js, and high-performance user interfaces. Use it to implement components, manage state, handle data fetching, optimize performance, and build accessible UI.

Frontend Patterns is cataloged under Frontend on DirSkills. Frontend Patterns comes from a repository tagged ai-agents, anthropic, claude, claude-code and developer-tools.

Documentation

README

Excerpt

前端开发模式 (Frontend Development Patterns)

适用于 React、Next.js 和高性能用户界面的现代前端模式。

何时激活

构建 React 组件（组合、Props、渲染）
管理状态（useState、useReducer、Zustand、Context）
实现数据获取（SWR、React Query、服务端组件）
优化性能（记忆化、虚拟化、代码分割）
处理表单（验证、受控输入、Zod 模式）
处理客户端路由与导航
构建可访问（Accessible）、响应式的 UI 模式

组件模式 (Component Patterns)

组合优于继承 (Composition Over Inheritance)

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Frontend Patterns

What else does xu-xiang publish alongside Frontend Patterns?
Frontend Patterns is one of 25 skills that DirSkills catalogs from xu-xiang/everything-claude-code-zh, the repository it ships in. Its siblings there include API Design Patterns, Article Writing and Autonomous Loops. Each one is a separate skill with its own page in this directory, installs the same way Frontend Patterns does, and is maintained by xu-xiang in that same repository. The rest of the collection is listed on the xu-xiang/everything-claude-code-zh page.
How does Frontend Patterns compare to other Frontend skills?
Frontend Patterns ranks #265 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Frontend Patterns against them. Open each page to compare what they document and how they install.