developer-frontend

@dragoscirjan · 收录于 1 周前 · 上游提交 1 个月前

Frontend development standards — UI/UX principles, accessibility, state management, and component patterns. Load when writing frontend code.

场景前端开发代码规范

适合你，如果你在写前端代码时需要参考UI/UX、可访问性和组件模式标准。

/ 下载安装

https://github.com/dragoscirjan/opencode-config/tree/main/skills/developer-frontend ↗

/ 通过 npx 安装 校验哈希

npx oh-my-skill add dragoscirjan/opencode-config/developer-frontend

/ 通过 bash 安装

curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- dragoscirjan/opencode-config/developer-frontend

/ 已经装过?验证本机副本,不用重装

npx oh-my-skill verify dragoscirjan/opencode-config/developer-frontend

安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。

0GitHub stars

~353上下文体积 · 单文件

索引托管

怎么用

商店整理自技能原文 · 版本 f561928 · 表述以原文为准

它做什么

安装后，Claude 会按照前端开发标准编写代码，包括无障碍、性能优化、状态管理、组件设计等，并自动加载相关语言技能。

什么时候触发

当你编写前端代码时，Claude 会自动加载此技能，并可能根据代码语言加载对应的语言技能。

装好后可以这样说

Claude 会生成无障碍友好的按钮代码。

Claude 会应用性能优化规则。

技能原文 SKILL.md作者撰写 · MIT · f561928

Frontend Development Standards

Always load clean-code alongside this skill. Use the detect-language tool to dynamically load the language-specific skill (e.g. lang-ts, lang-vue, lang-css) for the frontend code you are writing. Run the env-get tool for the DEVELOPER_SKILLS variable. If it returns a comma-separated list of skill names, load each of them.

Cross-Cutting Rules

Accessibility: WCAG 2.1 AA minimum. Semantic HTML. ARIA only when native elements insufficient. Keyboard navigable. Contrast ≥ 4.5:1. Test with axe-core / Lighthouse.
Performance: Lazy-load routes and heavy components. Code-split at route boundaries. Optimize images (WebP, lazy). Bundle size budgets. Avoid layout shifts (CLS).
State: Local first. Lift only when shared. Framework-native before external libraries. Normalize complex state.
Components: Single responsibility. Props in, events/callbacks out. No direct DOM manipulation. Presentational components are pure functions of props.
Testing pyramid: Unit for logic/utilities. Component for rendering/interaction. e2e for critical flows only.
Build: Vite for new projects. Use run-quality-checks to run validations, formatters, and tests before finalizing.
Security: Sanitize user content. Never innerHTML/v-html/dangerouslySetInnerHTML with untrusted data. CSP headers. HTTPS only.

Frameworks (Angular)

Angular — Feature modules. Smart vs presentational components. OnPush change detection. Reactive forms. takeUntilDestroyed or async pipe for RxJS. Standalone components (17+).

按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。

…