菜单
Senior UI/UX engineering system that enforces metric-based design rules, strict component architecture, CSS hardware acceleration, and balanced design engineering. Use when building premium frontend interfaces, dashboards, or SaaS UIs. Combats generic AI design patterns.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Daily repo health check — scans recent commits, CI failures, dependency drift, performance regressions, and untested code paths. Produces a grounded report with evidence-only findings and minimal, scoped fixes. Use when asked to "run daily QA", "daily repo check", "morning standup for the repo", "daily health report", or "check recent commits for bugs".
Infrastructure-as-Code security scan for changed deploy config — Dockerfiles, docker-compose, Terraform, Kubernetes/Helm, and CI/CD workflows. Flags misconfigurations and exposed secrets (root containers, open ingress, wildcard IAM, privileged pods, untrusted CI triggers). Static diff-scoped analysis (safe to auto-run); uses tfsec/checkov/hadolint/actionlint when present. Use when asked to "scan infra", "IaC scan", "check the Dockerfile/terraform/k8s", "CI security", or after changing deploy/infra config.
Comprehensive per-feature QA gate. Runs the full multi-dimensional quality fan-out (tests, correctness, security, DB, frontend perf, browser QA, coverage) scoped to the current branch's diff, then emits a pass/fail ship-readiness verdict. Run it when a feature is finished, before /finish-branch and /ship. Use when asked to "run full QA", "qa-full", "feature done — check it", "is this ready to ship", "pre-ship check", or "full quality gate".
Accessibility audit for frontend changes — WCAG 2.2 AA, screen-reader compatibility, keyboard navigation, focus management, ARIA correctness, color contrast, and reduced-motion. Static diff-scoped analysis (safe to auto-run) plus an optional dynamic axe pass against a running app. Use when asked to "check accessibility", "a11y audit", "screen reader check", "WCAG", "is this accessible", "keyboard navigation", "ARIA review", or after heavy frontend work.
Use when you have a spec or requirements for a multi-step task, before touching code. Produces an engineering plan complete with TDD tasks, DRY/SOLID/YAGNI principles, a required Test Plan & Verification section, and a coverage target — then auto-runs /plan-eng-review as an independent double-check before execution.
Use when implementing any feature or bugfix, before writing implementation code
| name | design-taste-frontend |
| description | Senior UI/UX engineering system that enforces metric-based design rules, strict component architecture, CSS hardware acceleration, and balanced design engineering. Use when building premium frontend interfaces, dashboards, or SaaS UIs. Combats generic AI design patterns. |
| metadata | {"author":"Leonxlnx"} |
A comprehensive frontend architecture guide establishing baseline configurations and engineering directives for premium interface design.
Three primary dials (adjustable per request):
| Dial | Default | Range | Effect |
|---|---|---|---|
| Design Variance | 8 | 1–10 | How distinctive vs. conventional the design is |
| Motion Intensity | 6 | 1–10 | Amount and complexity of animations |
| Visual Density | 4 | 1–10 | Information density (4 = comfortable) |
Users can override via explicit requests ("make it more minimal", "less animation").
min-h-[100dvh] not h-screen (prevents iOS Safari layout issues)package.json before importing#000000) — use off-black (#0a0a0a, #111111)stiffness: 100, damping: 20 (Framer Motion)staggerChildrenCombat common AI design defaults:
transform and opacity (GPU-accelerated)::before/::after pseudo-elementsModern SaaS dashboards use five card archetypes:
Each card type has perpetual micro-interactions using spring physics. Cards breathe — they're never static.
Before delivering any UI: