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（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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日 更新