القائمة
Use when creating or modifying any visible UI element, adjusting spacing or typography, reviewing visual consistency, or when Lighthouse Performance drops below 90.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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.
Use when creating or modifying .astro/.tsx files, configuring astro.config.mjs, working with Content Collections, or when TypeScript or build errors occur.
Use when creating or editing pages, blog posts, or content files, adding meta tags, or when Lighthouse SEO drops below 90.
Use when completing any task (final validation step), running audits, preparing for deployment, or when ESLint/TypeScript/build errors occur.
Use when writing or reviewing any CSS class, changing colors, modifying globals.css, or when hardcoded colors or inline styles are detected.
Use when starting work on an AstroDeck project, needing to understand the project structure, or looking up available components, sections, and layouts.
| name | ui-design |
| description | Use when creating or modifying any visible UI element, adjusting spacing or typography, reviewing visual consistency, or when Lighthouse Performance drops below 90. |
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
Visual Hierarchy, Spacing, Typography, OKLCH Color Theory, Layout Patterns
| 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 |
py-20 px-6)text-primary, not text-blue-500)rounded-xl)hidden lg:block without mobile alternative)These rules always apply — even under time pressure, even for "just a quick prototype":
py-20 px-6. "A bit more room with py-32" destroys visual consistency across sections.bg-white here" breaks dark mode immediately — without anyone noticing until they toggle.rounded-lg or rounded-md. The design system uses rounded-xl. Inconsistency is noticeable, even if individual deviations "look better."Read LEARNINGS.md in this directory to avoid known anti-patterns.