Design & Media Agent Skills for Claude Code

Use when writing or reviewing frontend markup, SCSS, or JS that produces UI.

100% clone and recreate landing pages or websites.

Securely read and incrementally sync Lanhu (蓝湖) UI design project links from lanhuapp.com, including screenshots, version-pinned HTML/CSS…

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy.

Use this skill to generate well-branded interfaces and assets for Lavish, either for production or throwaway prototypes/mocks/etc.

Jakob's Law — familiarity/conventions. Use this when an interface, report, doc, or dashboard may not work the way users already expect…

Hick's Law — choice load. Use this when counting choices at each decision point (menus, filters, toggles, tabs, settings, entry…

Fitts's Law — target size and distance. Use this when auditing or applying hit-area sizes, CTA reach, thumb zones, tiny controls, or risky…

Miller's Law — 7±2 chunking. Use this when auditing or applying working-memory load: walls of text, ungrouped legends/tables, or staging…

Proximity Law — spatial grouping. Use this when auditing or applying whether spacing communicates relationships (labels near fields…

Von Restorff Effect — distinctiveness. Use this when auditing or applying one deliberate standout per view (primary action, key finding…

Serial Position Effect — first and last.

Tesler's Law — conservation of complexity.

Doherty Threshold — fast clear response.

Peak-End Rule — design the peak, design the end.

Use when a Design/UI task needs layout, spacing, composition, alignment, grid, density, visual rhythm, or hierarchy improvements…

Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints.

Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.

Generates high-converting Next.js/React landing pages with Tailwind CSS.

Best practices for Remotion - Video creation in React

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays