Ui Design
pproenca/dot-skills/skills/.curated/ui-design作者 pproencacf93c57cac89無授權條款215 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫7 週前更新
UI/UX and frontend design best practices guidelines (formerly frontend-design). This skill should be used when writing, reviewing, or designing frontend code to ensure accessibility, performance, and usability. Triggers on tasks involving HTML structure, CSS styling, responsive layouts, form design, animations, or accessibility improvements.
僅公開檔案列表。將技能安裝到工作區後即可檢視檔案內容。
| 路徑 | 大小 | 類型 |
|---|---|---|
| AGENTS.md | 8.7 KB | text/markdown |
| assets/templates/_template.md | 735 B | text/markdown |
| metadata.json | 930 B | application/json |
| README.md | 4.6 KB | text/markdown |
| references/access-alt-text.md | 1.7 KB | text/markdown |
| references/access-aria-labels.md | 1.6 KB | text/markdown |
| references/access-focus-indicators.md | 1.3 KB | text/markdown |
| references/access-heading-hierarchy.md | 1.4 KB | text/markdown |
| references/access-keyboard-navigation.md | 1.5 KB | text/markdown |
| references/access-semantic-html.md | 1.5 KB | text/markdown |
| references/access-target-size.md | 1.3 KB | text/markdown |
| references/anim-duration-easing.md | 1.9 KB | text/markdown |
| references/anim-gpu-properties.md | 1.8 KB | text/markdown |
| references/anim-reduced-motion.md | 2 KB | text/markdown |
| references/anim-will-change.md | 2 KB | text/markdown |
| references/color-contrast-ratio.md | 1.7 KB | text/markdown |
| references/color-dark-mode.md | 1.8 KB | text/markdown |
| references/color-not-only-indicator.md | 2 KB | text/markdown |
| references/color-semantic-palette.md | 1.9 KB | text/markdown |
| references/cwv-critical-css.md | 1.7 KB | text/markdown |
| references/cwv-improve-inp.md | 2 KB | text/markdown |
| references/cwv-lazy-load-offscreen.md | 1.8 KB | text/markdown |
| references/cwv-minimize-cls.md | 1.7 KB | text/markdown |
| references/cwv-optimize-lcp.md | 1.7 KB | text/markdown |
| references/cwv-responsive-images.md | 1.7 KB | text/markdown |
| references/form-autocomplete.md | 2.3 KB | text/markdown |
| references/form-error-messages.md | 1.7 KB | text/markdown |
| references/form-inline-validation.md | 2 KB | text/markdown |
| references/form-input-types.md | 1.9 KB | text/markdown |
| references/form-labels-above.md | 1.7 KB | text/markdown |
| references/layout-f-pattern.md | 2 KB | text/markdown |
| references/layout-grid-system.md | 1.6 KB | text/markdown |
| references/layout-proximity-grouping.md | 1.5 KB | text/markdown |
| references/layout-single-cta.md | 1.8 KB | text/markdown |
| references/layout-visual-hierarchy.md | 1.7 KB | text/markdown |
| references/layout-whitespace.md | 1.6 KB | text/markdown |
| references/resp-container-queries.md | 1.6 KB | text/markdown |
| references/resp-fluid-typography.md | 1.6 KB | text/markdown |
| references/resp-mobile-first.md | 1.8 KB | text/markdown |
| references/resp-touch-targets.md | 1.6 KB | text/markdown |
| references/resp-viewport-meta.md | 1.8 KB | text/markdown |
| references/_sections.md | 1.8 KB | text/markdown |
| references/typo-font-display.md | 1.8 KB | text/markdown |
| references/typo-line-height.md | 1.5 KB | text/markdown |
| references/typo-preload-fonts.md | 1.6 KB | text/markdown |
| references/typo-readable-line-length.md | 1.5 KB | text/markdown |
| references/typo-system-font-stack.md | 1.8 KB | text/markdown |
| SKILL.md | 4.9 KB | text/markdown |
來源與署名
來源：pproenca/dot-skills位於skills/.curated/ui-design提交cf93c57
授權條款： 無授權條款
內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。
更多來自 pproenca/dot-skills 的技能
Typescript Refactor
pproenca
用於重構與現代化 TypeScript 及 React/TSX 程式碼的指南，涵蓋九大類共 47 條規則。
Tailwind Ui Refactor
pproenca
包含 52 條規則的 Tailwind CSS 介面重構指南，涵蓋階層、間距、排版、色彩、層次與細節。
Shell
pproenca
一份包含 49 條 shell 指令碼最佳實務的參考指南，用於撰寫安全、可攜且易於維護的 bash 與 sh 指令碼。
React Refactor
pproenca
針對 React 應用程式的架構重構指南，涵蓋元件、狀態、Hook 與資料模式的 40 條規則。
Expo React Native Performance
pproenca
針對 Expo React Native 應用程式的效能最佳化指南，涵蓋啟動、清單、重渲染、動畫、資源、記憶體與非同步。
Framer Motion
pproenca
用於最佳化 React 應用程式中 Framer Motion 動畫效能的指南。
更多Design & Creative技能
Theme Factory
anthropics
提供 10 套預設配色與字型主題，並可即時產生新主題，為簡報、文件、報告與 HTML 頁面統一風格。
Slack Gif Creator
anthropics
為 Slack 製作尺寸與檔案大小經過最佳化的動畫 GIF，並提供 PIL 繪圖輔助、緩動函式與驗證工具。
Frontend Design
anthropics
在建立或改造使用者介面時，提供打造獨特、有意識視覺設計的指引。
Canvas Design
anthropics
依照寫好的設計理念創作原創視覺藝術，輸出 PNG 或 PDF，適合海報、藝術作品等靜態成品。
Brand Guidelines
anthropics
將 Anthropic 官方品牌配色與字體套用到需要呈現 Anthropic 外觀風格的各類成品上。
Frontend Design
anthropics
指導代理為新介面或改版介面進行獨特、有意的視覺設計。