菜单
Craft immersive, high-performance premium web experiences with advanced motion, typography, and architectural craftsmanship. Use when building award-level landing pages, interactive portfolios, or components requiring top-tier visual polish.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Automatic quality control, linting, and static analysis procedures. Use when validating code changes for syntax correctness and project standards. Triggers on keywords: lint, format, check, validate, types, static analysis.
Refactoring and cleanup - improving code structure, removing dead code, eliminating duplication, or pre-merge cleanup. Use when code is hard to maintain, has dead code or debug artifacts, or needs pre-merge polishing.
Fix a GitHub issue end-to-end - from reading the issue, understanding requirements, implementing the fix, writing tests, and creating a commit. Use when given a GitHub issue number or URL to resolve.
Optimize code for readability, performance, maintainability, and security across Bash, Python, and Rust. Use when asked to improve code quality, optimize performance, add type safety, or refactor for idioms.
Create, debug, and optimize GitHub Actions workflows with security best practices. Use when asked to "create workflow", "fix workflow", "add CI", or needs help with GitHub Actions.
Review code changes (diffs, PRs, patches) and provide structured, actionable feedback on correctness, maintainability, and test coverage. Use when the user asks for a code review, requests feedback on a patch/PR, or wants an assessment of changes.
| name | premium-frontend-ui |
| description | Craft immersive, high-performance premium web experiences with advanced motion, typography, and architectural craftsmanship. Use when building award-level landing pages, interactive portfolios, or components requiring top-tier visual polish. |
| allowed-tools | Bash(git:*), Read, Write, Edit, Glob, Grep |
Build immersive digital environments that go beyond functional HTML/CSS. Apply these standards for high-end landing pages, interactive portfolios, or specialized components requiring aesthetic excellence.
Choose a strong visual identity before writing layout code:
| Style | Characteristics |
|---|---|
| Editorial Brutalism | High-contrast monochromatic palettes, oversized typography, sharp grids |
| Organic Fluidity | Soft gradients, deep rounded corners, glassmorphism, spring physics |
| Cyber / Technical | Dark mode, neon accents, monospace type, rapid staggered animations |
| Cinematic | Full-viewport imagery, slow cross-fades, scroll-driven storytelling |
| Layer | Requirement |
|---|---|
| Entry sequence | Lightweight preloader → fluid transition (split-door, scale-up, or text sweep) |
| Hero architecture | 100vh/100dvh full-bleed, word/char-wrapped headlines for cascade animations |
| Navigation | Sticky header that hides on scroll-down, reveals on scroll-up; rich hover states |
| Typography | clamp() scale (up to 12vw headlines), 16-18px body min, variable/premium fonts |
| Texture | CSS/SVG noise overlay (mix-blend-mode: overlay, opacity 0.02-0.05), frosted glass |
| Pattern | Implementation |
|---|---|
| Scroll-driven | GSAP ScrollTrigger: pinned containers, horizontal galleries, parallax layers |
| Micro-interactions | Magnetic buttons (distance-based pull), custom cursor with lerp interpolation |
| Dimensional hover | CSS scale, rotateX, translate3d for tactile feedback |
| Rule | Detail |
|---|---|
| Composite only | Animate transform and opacity only — never width, height, margin |
| will-change | Apply before animation, remove after to conserve memory |
| Touch degradation | Wrap cursor/hover animations in @media (hover: hover) and (pointer: fine) |
| Reduced motion | Wrap heavy animations in @media (prefers-reduced-motion: no-preference) |
| Target | Libraries |
|---|---|
| React/Next.js | Framer Motion (springs/layout), Lenis (@studio-freight/lenis), React Three Fiber (3D/WebGL) |
| Vanilla / Astro | GSAP (timeline sequencing), Lenis (CDN), SplitType (accessible text chunking) |
transform/opacity@media (prefers-reduced-motion) guard on heavy animations(hover: hover) media querywill-change added before and removed after animation