skills.rest
xiaobei930
xiaobei930COMMUNITY
Explore all skills by this author →
GitHub

frontend

Implement frontend patterns for component design, state management, performance, and accessibility across Vue, React, Svelte, and Angular.

49|3|Updated Jan 22, 2026
Search Tags:#architecture#performance#accessibility#frontend#patterns#state-management#component-design
One-click install
npx skills add https://github.com/xiaobei930/claude-code-best-practices --skill frontend-xiaobei930
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/xiaobei930/claude-code-best-practices/tree/main/skills/frontend
Command: npx skills add https://github.com/xiaobei930/claude-code-best-practices --skill frontend-xiaobei930

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

在前端开发中，跨框架的一致性、组件设计和性能优化经常成为团队瓶颈。本技能汇集可复用的模式与清单，帮助你快速建立可维护、可扩展的前端代码结构。

Core Features & Use Cases

  • 跨框架通用模式：提供组件设计、状态管理、无障碍和性能优化的通用方案，按需加载框架专属实现（Vue、React、Svelte、Angular）。
  • 实战场景：适用于大型项目的组件分层、全局状态治理、路由与性能优化流程。
  • 使用示例：在新项目中应用模式以提升初始渲染速度和可维护性，并确保无障碍友好。

Quick Start

在你的项目中落地这些模式，按需为不同框架加载对应实现并开始应用于 UI 组件、状态管理与性能优化。

Frequently Asked Questions about frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are scalable frontend patterns for managing component design and state in large codebases?▼

Scalable frontend patterns provide structured component pyramids and state management strategies to ensure consistency across large codebases. They supply reusable guidelines and architectural checks for maintaining maintainable UI layers.

How do I apply frontend performance and accessibility best practices across Vue, React, Svelte, and Angular?▼

You apply universal frontend patterns and adapt them for framework-specific implementations across Vue, React, Svelte, and Angular. This ensures consistent performance optimizations and accessibility checklists across your entire codebase.

How do I structure state management strategies for large frontend projects?▼

State management strategies for large frontend projects involve applying global state governance and component layering guidelines. These patterns help structure your application architecture to improve maintainability and scalable data flow.

When do I need architectural checks for component pyramids in frontend development?▼

Architectural checks for component pyramids are needed when establishing scalable frontend codebases and improving component design. They provide structural guidelines to prevent bottlenecks and ensure consistency across complex user interfaces.

Does this frontend pattern approach work for improving initial rendering speed in new projects?▼

Yes, this approach works for improving initial rendering speed by applying performance best practices and component design patterns. You can leverage these guidelines in new projects to enhance rendering speed and maintainability.

Related Skills

Explore More Software Engineering Skills→
yuma588yuma588
2

frontend-frameworks

Scaffold projects and generate components for React, Vue, Angular, and Svelte.

Community
Advanced
leonanpereirapintoleonanpereirapinto
1

a11y-testing

Automate WCAG accessibility checks with jest-axe and Playwright axe-core.

Community
Advanced
maslennikov-igmaslennikov-ig
2

code-reviewer

Automate pull-request code review across six languages with structured reports.

Community
Advanced
PicoMLXPicoMLX

swiftui-ui-patterns

Guide SwiftUI iOS interface architecture with navigation and state ownership patterns.

Official
Intermediate