frontend/component-development SKILL.md skillA
frontend/component-development from echovic/boss-skill is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add echovic/boss-skill/frontend/component-development@git:20261027.69265c4Pins git:20261027.69265c4 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- echovic/boss-skill
- Path
skill/skills/frontend/component-development/SKILL.md- Versions recorded
- 4
- Latest version
- git:20261027.69265c4, committed Oct 27, 2026
- First version recorded
- May 15, 2026
- Size
- 6,301 bytes
- Repository stars
- 546
- License
- MIT
前端组件开发方法论，包括组件设计原则、状态管理、样式实现和性能优化.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# 前端组件开发方法论 ## 组件设计原则 ### 单一职责原则 - 每个组件只负责一个功能模块 - 复杂组件拆分为多个子组件 - 容器组件（逻辑）与展示组件（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 > 项目现有样式 > 框架默认值 ``` ### ui-design.json 集成 当 `.boss/<feature>/ui-design.json` 存在时： 1. **读取 tokens**：映射为 CSS 变量或主题对象 ```typescript // 示例：从 tokens 生成 CSS 变量 const colors = uiDesign.tokens.colors; // --color-primary: #007AFF ``` 2. **解析 pages 和 frames**：推导页面结构和布局 - 从 `pages[].frames[]` 提取页面组件层级 - 从 `frames[].layout` 获取布局约束（宽度、间距、对齐） …
Read the whole file at its exact version.
How to install
mdr add echovic/boss-skill/frontend/component-development@sha256:777123137f1cbc37The line at the top of this page pins the label git:20261027.69265c4, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_w5xhg5mtyr43cvxz)
0 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 4 versions of this file, between May 15, 2026 and Oct 27, 2026, about one every 55 days.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20261027.69265c4 latest | 2026-10-27 | 69265c4 | 6,301 B | A | view · diff |
| git:20261027.21aa670 | 2026-10-27 | 21aa670 | 6,115 B | A | view · diff |
| git:20260929.fbac35d | 2026-09-29 | fbac35d | 5,911 B | A | view · diff |
| git:20260515.c2aa1d9 | 2026-05-15 | c2aa1d9 | 5,884 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (6301 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
echovic/boss-skill · 546 stars · license MIT · pushed 2026-11-08 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_w5xhg5mtyr43cvxz GET https://markdownregistry.com/api/v1/resolve?ref=echovic/boss-skill/frontend/component-development GET https://markdownregistry.com/api/v1/blob/777123137f1cbc373345e46a0d24f2a1ba558eeaeed5b46d1ed6e85c9f4e9227
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.