Use when creating or modifying any UI element visible to the user, reviewing HTML markup, adding interactive elements, or when Lighthouse Accessibility drops below 90.
中文简介正在准备中。当前显示原文说明。
holger1411/astrodeck802026年9月5日 更新
免费在 GitHub 公开
ui-design
Use when creating or modifying any visible UI element, adjusting spacing or typography, reviewing visual consistency, or when Lighthouse Performance drops below 90.
中文简介正在准备中。当前显示原文说明。
holger1411/astrodeck星标 80(GitHub 80 + cccskills 0)
实测评分 未实测
查看安装方法包含的文件（2）
- SKILL.md2.6 KB
- LEARNINGS.md845 B
SKILL.md（原文）
安装前可以查看交给 AI 代理的指令内容。
UI/UX Design Skill
Canonical Sources
This skill references the following globals — read them BEFORE starting work:
system/globals/typography.md— Font stack, heading scale, weightssystem/globals/spacing.md— Section padding, grids, container widthssystem/globals/effects.md— Border radius, shadows, card patternsystem/globals/imagery.md— Image formats, alt text, optimizationsystem/globals/responsiveness.md— Breakpoints, mobile-first rules
Domain
Visual Hierarchy, Spacing, Typography, OKLCH Color Theory, Layout Patterns
KPIs
| Metric | Target | Measurement |
|---|---|---|
| Lighthouse Performance | >90 | Lighthouse JSON → categories.performance.score * 100 |
| First Contentful Paint | <1.8s | Lighthouse JSON → audits.first-contentful-paint |
| Largest Contentful Paint | <2.5s | Lighthouse JSON → audits.largest-contentful-paint |
| Cumulative Layout Shift | <0.1 | Lighthouse JSON → audits.cumulative-layout-shift |
| Total Blocking Time | <200ms | Lighthouse JSON → audits.total-blocking-time |
Design Consistency Checklist
- Heading hierarchy maintained (h1 → h2 → h3, no skipping)
- Consistent section paddings (
py-20 px-6) - Colors only via CSS variables (
text-primary, nottext-blue-500) - Consistent border radius (
rounded-xl) - Mobile-first responsive (all breakpoints checked: 375px, 768px, 1024px, 1280px)
- Mobile navigation present (no
hidden lg:blockwithout mobile alternative) - No horizontal overflow on mobile
- Dark mode tested
Non-Negotiable
These rules always apply — even under time pressure, even for "just a quick prototype":
- No commit without responsive check. "We'll make it responsive later" never works — it gets forgotten and users see a broken mobile version.
- Section padding is
py-20 px-6. "A bit more room withpy-32" destroys visual consistency across sections. - Colors only via CSS variables. "Just
bg-whitehere" breaks dark mode immediately — without anyone noticing until they toggle. - No
rounded-lgorrounded-md. The design system usesrounded-xl. Inconsistency is noticeable, even if individual deviations "look better." - Mobile-first is mandatory. Desktop-first "and then adjust" produces overflow, undersized touch targets, and missing mobile navigation.
Before Applying
Read LEARNINGS.md in this directory to avoid known anti-patterns.
评价
还没有评价。欢迎分享你的使用感受。
评论
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
同一仓库的技能
astro
免费Use when creating or modifying .astro/.tsx files, configuring astro.config.mjs, working with Content Collections, or when TypeScript or build errors occur.
中文简介正在准备中。当前显示原文说明。
holger1411/astrodeck802026年9月5日 更新
Use when creating or editing pages, blog posts, or content files, adding meta tags, or when Lighthouse SEO drops below 90.
中文简介正在准备中。当前显示原文说明。
holger1411/astrodeck802026年9月5日 更新
qa
免费Use when completing any task (final validation step), running audits, preparing for deployment, or when ESLint/TypeScript/build errors occur.
中文简介正在准备中。当前显示原文说明。
holger1411/astrodeck802026年9月5日 更新
readme
免费Use when starting work on an AstroDeck project, needing to understand the project structure, or looking up available components, sections, and layouts.
中文简介正在准备中。当前显示原文说明。
holger1411/astrodeck802026年9月5日 更新
tailwind
免费Use when writing or reviewing any CSS class, changing colors, modifying globals.css, or when hardcoded colors or inline styles are detected.
中文简介正在准备中。当前显示原文说明。
holger1411/astrodeck802026年9月5日 更新