frontend-design_skill

Overview

This skill defines elite-tier Web UI standards focused on pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols. It prioritizes low cognitive load, invisible design, and production-ready fidelity so interfaces feel effortless and natural. The guidance balances aesthetic originality with rigorous technical and accessibility standards.

How this skill works

The skill inspects visual direction, component composition, motion, and UX patterns against core protocols: anti-AI aesthetic rules, physics-based animation principles, and cognitive-first interaction design. It enforces meaningful continuity in transitions, mass and weight in motion, and context-specific visual signatures rather than template-driven layouts. Recommended integrations include design interrogation, clean code practices, test-driven visual regression, and performance audits to ensure implementation quality.

When to use it

• Designing high-fidelity production frontends with distinct visual identity
• Creating immersive layouts that require nuanced UX psychology and attention guidance
• Specifying motion systems that must be physics-based and continuous
• Auditing or hardening UI aesthetics to avoid AI-generated clichés
• Preparing UI deliverables for accessibility, performance, and long-term maintenance

Best practices

• Start with a structured discovery: define user goals, narrative, and behavioral constraints before visual work
• Avoid generic fonts, cliché palettes, and template layouts—craft context-specific signatures
• Implement spring-based, continuous animations that convey weight and narrative
• Treat design tokens, spacing, and contrast as enforceable rules for consistency and accessibility
• Integrate clean-code and TDD workflows to produce maintainable, testable components
• Run performance and UX audits early and iterate on regressions, accessibility, and bundle size

Example use cases

• Reimagining a legacy admin UI into an immersive, low-cognitive-load dashboard with distinct retro aesthetics
• Designing a product onboarding flow where micro-interactions guide attention and reduce drop-off
• Creating a component library with unique visual signatures and physics-driven motion for consistent cross-product use
• Performing a heuristic UX and accessibility audit to remove AI-like generic patterns and improve usability
• Building pixel-perfect marketing pages that require precise typography, spacing, and motion narrative