frontend-ui-engineering
Build Accessible, Production-Ready Frontends
Frontend work can become inconsistent, inaccessible, or difficult to maintain. This skill guides component architecture, responsive layouts, state handling, and polished user experiences.
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
Review the Skillstore skill "frontend-ui-engineering" from https://skillstore.io/skills/addyosmani-frontend-ui-engineering.md and its manifest at https://skillstore.io/api/skills/addyosmani-frontend-ui-engineering/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「frontend-ui-engineering」。 Design a task list that works on mobile and supports keyboard users.
預期結果:
A component plan with a task list, task item, loading skeleton, error state, empty state, keyboard behavior, and responsive layout rules.
正在使用「frontend-ui-engineering」。 Review a dialog that opens without moving focus.
預期結果:
A focused accessibility review recommending initial focus, a labeled close control, focus containment, keyboard dismissal, and restoration of focus.
正在使用「frontend-ui-engineering」。 Improve a dashboard using oversized cards and decorative gradients.
預期結果:
A visual review prioritizing information hierarchy, purposeful spacing, design-system colors, restrained surfaces, and layouts optimized for scanning.
安全審計
安全All 36 static matches are false positives caused by Markdown fences, inline backticks, illustrative frontend code, or documentation links. No prompt injection, data exfiltration, or executable command instruction was found in SKILL.md.
風險因素
⚙️ 外部命令 (27)
📁 檔案系統存取 (1)
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/addyosmani-frontend-ui-engineering?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/addyosmani-frontend-ui-engineering?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/addyosmani-frontend-ui-engineering/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/addyosmani-frontend-ui-engineering.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>學術引用 (APA · BibTeX · CFF)
APA 引用
addyosmani. (2026). frontend-ui-engineering security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1BibTeX 引用
@techreport{addyosmani-addyosmani-frontend-ui-engineering-2026,
author = {addyosmani},
title = {frontend-ui-engineering security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-ui-engineering security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "addyosmani"
date-released: "2026-09-19"
url: "https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1"
identifiers:
- type: other
value: "skillstore:addyosmani-frontend-ui-engineering:audit:1"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 中你可以打造什麼
Create a New Interface
Plan a responsive page with focused components, meaningful states, and accessible interactions.
Improve an Existing Screen
Review a screen for layout, hierarchy, responsiveness, accessibility, and maintainability issues.
Establish UI Standards
Turn design-system principles into practical component and interaction guidance for a shared codebase.
試試這些提示
Design a focused component for [feature]. Define its props, states, accessibility behavior, and responsive layout.
Review this page structure: [description]. Recommend a mobile-first layout, component boundaries, spacing, and meaningful empty states.
Review this interface for WCAG 2.1 AA issues. Check keyboard navigation, labels, focus management, contrast, and non-color cues.
Evaluate this frontend implementation against its design system. Identify architectural, responsive, accessibility, state, and visual-quality improvements in priority order.
最佳實務
- Start with the simplest state-management approach that meets the feature needs.
- Design loading, error, empty, and success states with the primary interface.
- Test keyboard access, screen-reader structure, responsive breakpoints, and contrast.
避免
- Do not use generic visual patterns without checking the product design system.
- Do not make color the only way users understand status or action.
- Do not postpone responsive behavior and accessibility until the end.
常見問題
Which tools does this skill support?
Can it build a complete application?
Does it require React?
Does it guarantee WCAG compliance?
What visual problems does it address?
When should I use it?
開發者詳細資訊
作者
addyosmani授權
MIT
Skillstore 修訂
r1
版本提示
作者未聲明版本。
引用
5d5054f8a23586f9b500fece1cb613a9dffc787b
維護新鮮度
2026/9/19
使用量
0 次下載 · 0 次瀏覽
檔案結構
📄 SKILL.md