Individual skill
frontend-engineering
提供 React/Next 优先的前端工程规范，覆盖组件结构、状态分层、语义化、可访问性、 性能与交付质量。当前端工程师、架构师或 Tech Lead 需要统一工程做法时使用。
plugins/Colin4k1024/tsp/skills/frontend-engineering/SKILL.md
Source commit d780783eba4ecc7c8b9429f95c9362df95f07c61
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Network or broad shell
- Last checked
- Nov 4, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 1,531
- Repository last updated
- Nov 6, 2026
- License
- Apache-2.0
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- ai-coding Repository topic
- awesome Repository topic
- awesome-list Repository topic
- codex Repository topic
- codex-plugins Repository topic
- openai Repository topic
- codex-skill Repository topic
- codex-skills Repository topic
- marketplace Repository topic
- codex-marketplace Repository topic
- engineering Derived category
- engineering-web Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 2,510 bytesagents/openai.yamlasset · 289 bytesreferences/component-patterns.mddoc · 965 bytesreferences/quality-checklist.mddoc · 551 bytesreferences/react-next-baseline.mddoc · 1,056 bytes
Read excerpt
# Frontend Engineering
## 用途
- 在前端需求开始前统一工程边界，避免实现阶段临时发明组件模式和代码规范。
- 把 React/Next/Tailwind 的默认做法沉淀为可迁移的工程规则，供角色协作复用。
## 默认做法
0. 若项目根目录存在 `DESIGN.md`，**实现前必须读取**，所有 token 值（色值、字号、间距、圆角、阴影）以 DESIGN.md 为基准。代码中不允许出现与 DESIGN.md 不一致的硬编码原始值（如 `color: #5e6ad2`），必须通过 CSS 变量或 Tailwind token 引用。参考：[DESIGN.md 使用工作流](../../docs/runbooks/design-md-workflow.md)
1. 先阅读 [frontend-engineering-standards.md](../../rules/frontend-engineering-standards.md) 锁定技术基线和质量红线。
2. 企业内部应用补看 [enterprise-architecture-governance.md](../../rules/common/enterprise-architecture-governance.md) 与 [enterprise-component-baseline.md](../../rules/common/enterprise-component-baseline.md)，确认是否受统一框架、组件和兼容性约束。
3. 若目标项目明确采用自定义前端样式 profile，再补看 [frontend-enterprise-style-profile.md](../../docs/runbooks/frontend-enterprise-style-profile.md)，确认是否需要附加样式与 Figma 映射约束。