Frontend Component Development

by echoVic

Frontend Component Development is a Frontend skill for Claude Code, published by echoVic in boss-skill.

548 stars50 forkson echoVic/boss-skillAdded 2026/08/26Repository updated 2026/08/23

View source on GitHub Download repo ZIP

ai-agentsbmadbmad-workflowclaude-codecursorskilltrae

Install in seconds

Install Frontend Component Development

Copy Frontend Component Development 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/echoVic/boss-skill/tree/main/skill/skills/frontend/component-development ~/.claude/skills/component-development

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/echoVic/boss-skill.git

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

In this catalog

Source file: skill/skills/frontend/component-development/SKILL.md in echoVic/boss-skill
Installs to: ~/.claude/skills/component-development
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 567 skills

What Frontend Component Development does

Frontend Component Development covers component design, state management, styling, accessibility, performance, APIs, and testing for building frontend UI. Use it when implementing or reviewing reusable components and related flows.

Frontend Component Development is cataloged under Frontend on DirSkills. Frontend Component Development comes from a repository tagged ai-agents, bmad, bmad-workflow, claude-code and cursor.

Documentation

README

Excerpt

每个组件只负责一个功能模块
复杂组件拆分为多个子组件
容器组件（逻辑）与展示组件（UI）分离

可复用性设计

通过 Props/属性实现组件配置化
避免硬编码业务逻辑
提供合理的默认值
支持插槽/children 扩展

组件命名规范

使用 PascalCase 命名组件
名称应清晰描述组件功能
避免过于通用的名称（如 Item、Component）
文件名与组件名保持一致

状态管理策略

状态分类

状态类型	管理方式	适用场景
本地状态	useState/ref	组件内部状态（表单输入、展开/收起）
共享状态	Context/Store	跨组件共享（用户信息、主题）
服务端状态	Query库/SWR	API 数据缓存和同步
URL 状态	Router	页面参数、筛选条件

状态提升原则

状态放在最近的公共父组件
避免过度提升导致不必要的重渲染
使用 Context 避免 Props 层层传递

副作用管理

使用框架的副作用 Hook（useEffect/onMounted）
清理订阅和定时器
依赖数组准确声明
避免在渲染函数中执行副作用

样式实现规范

UI 规范优先级

ui-design.json > ui-spec.md > 项目现有样式 > 框架默认值

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

Frequently asked about Frontend Component Development

What else does echoVic publish alongside Frontend Component Development?
Frontend Component Development is one of 25 skills that DirSkills catalogs from echoVic/boss-skill, the repository it ships in. Its siblings there include Architecture Design, Backend API Development and Backend Testing Guide. Each one is a separate skill with its own page in this directory, installs the same way Frontend Component Development does, and is maintained by echoVic in that same repository. The rest of the collection is listed on the echoVic/boss-skill page.
How does Frontend Component Development compare to other Frontend skills?
Frontend Component Development ranks #494 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 Component Development against them. Open each page to compare what they document and how they install.