Page & UI generation

Frontend design skill for UI/UX implementation

Official frontend design skill from Anthropic

Creates interactive HTML playgrounds — self-contained single-file explorers with visual controls, live preview, and prompt output with copy button

Interactive single-file HTML playgrounds

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Vercel Engineering performance guidelines

Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, and optimizes bundle performance. Use when building Angular 17+ applications with standalone components or signals, setting up NgRx stores, establishing RxJS reactive patterns, performance tuning, or writing Angular tests for enterprise apps.

Angular 17+ components and routing

The Figma MCP server brings Figma design context directly into your AI workflow.

Read Figma designs directly into Claude

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.

Structured visual canvases from JSON