frontend-ui-engineering
Build production-quality user interfaces with attention to accessibility, performance, responsiveness, and maintainability. Use for any UI work, component development, frontend features, or when the user mentions React, Vue, CSS, design systems, or user-facing interfaces.
- License 许可
- MIT
- 最近更新
- 2026-07-22
- Stars
- ★ 7
- Forks
- 1
01 前言 Front Matter
- name
- frontend-ui-engineering
- description
- Build production-quality user interfaces with attention to accessibility, performance, responsiveness, and maintainability. Use for any UI work, component development, frontend features, or when the user mentions React, Vue, CSS, design systems, or user-facing interfaces.
03 SKILL.md 正文
Frontend UI Engineering
Overview
Frontend code is user-facing. Quality here directly affects perception of the entire product.
When to Use
- Building or modifying UI components and pages
- Implementing design system elements
- Addressing accessibility, responsiveness, or frontend performance
Core Principles
- Accessibility is not optional (semantic HTML, keyboard, ARIA, contrast)
- Mobile-first / responsive by default
- Prefer composition and clear component boundaries
- Avoid unnecessary re-renders and large bundles
- Match the existing design system when one exists
Process
- Understand the user goal and interaction
- Check existing components / design system before creating new ones
- Implement with semantic structure and accessibility in mind
- Handle loading, empty, and error states
- Verify keyboard navigation and basic screen reader behavior
- Check responsiveness at key breakpoints
Checklist
- [ ] Semantic HTML elements used appropriately
- [ ] Interactive elements are keyboard accessible
- [ ] Color contrast meets WCAG AA at minimum
- [ ] Loading / empty / error states exist
- [ ] No obvious layout shift or overflow issues
- [ ] Component API is clear and documented if shared
Verification
- Visual and interaction review in the browser
- Basic accessibility checks pass
- No major performance red flags (large unnecessary JS, layout thrashing)
04 同仓库更多 Skills
compliance-monitoring
Design compliance monitoring and testing programs that verify controls work in practice and surface issues before regulators do. Use when building monitoring plans, compliance testing, or continuous control monitoring.
complaints-handling
Operate complaints-handling processes that meet regulatory standards — logging, timely resolution, root-cause analysis, and fair outcomes. Use when designing or improving regulated complaints frameworks or analyzing complaint themes for conduct risk.
aml-kyc-basics
Apply AML/KYC fundamentals — customer due diligence, monitoring, suspicious activity escalation, and recordkeeping — for financial crime compliance. Use when designing onboarding controls, transaction monitoring concepts, or AML program components in financial services.
ai-model-compliance
Apply compliance controls to AI and automated decision systems — transparency, fairness, human oversight, documentation, and regulatory alignment. Use when deploying AI in regulated processes (credit, fraud, customer decisions) or responding to AI governance expectations.
data-quality-management
Manage data quality end-to-end — dimensions, rules, remediation, and prevention — beyond one-off cleaning scripts. Use when building sustained data quality programs or fixing systemic accuracy, completeness, or consistency problems.
data-lineage
Capture and use data lineage — where data comes from, how it transforms, and what depends on it — for impact analysis, debugging, and trust. Use when tracing metric origins, assessing change impact, or diagnosing broken pipelines.