Frontend Frameworks Agent Skills

Creates elaborate, multi-component HTML artifacts using React, Tailwind CSS, and shadcn/ui for complex frontend projects.

Build cinematic, scroll-driven 2.5D websites with parallax depth, text animations, and premium effects using CSS and JavaScript.

Generates a complete, production-ready SaaS project boilerplate with Next.js 14+, TypeScript, Tailwind CSS, shadcn/ui, Drizzle ORM, and Stripe, including authentication, database schemas, billing integration, API routes, and a working dashboard.

Scaffold Next.js/React projects, generate components, analyze bundle sizes, and apply React/Next.js optimization patterns.

Scaffolds fullstack projects (Next.js, FastAPI, MERN, Django) and analyzes code quality with security and complexity scoring.

Build production-quality user interfaces that are accessible, performant, and visually polished, with guidance on component architecture, state management, design system adherence, and accessibility.

Write Vue 3 Single-File Components using Composition API with TypeScript, covering script setup macros, reactivity system, built-in components, and lifecycle hooks.

Build full-stack Vue applications with Nuxt 4, covering SSR, file-based routing, auto-imports, server routes, and deployment.

Configure Vite build tool, use its plugin API, set up SSR, and migrate to Vite 8 with Rolldown.

Manage Vue application state with Pinia's type-safe store patterns, including state, getters, actions, plugins, and SSR support.

Create and present web-based slide decks using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Ideal for technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.

Configure and use UnoCSS, an instant atomic CSS engine with presets, rules, shortcuts, and integrations for Vite and Nuxt.

Build documentation sites, configure themes, and write Markdown with Vue components using the VitePress static site generator.

Map requirements to the most suitable VueUse composable and apply correct usage patterns for concise, maintainable Vue.js/Nuxt features.

Provides Vue.js best practices and workflow guidance, including architecture planning, component design, reactivity patterns, and performance optimization for Vue 3 projects.

Provides best practices for Vue Router 4, including navigation guards, route params, and route-component lifecycle interactions.

Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation for React state management.

Create React Flow node components with TypeScript types, handles, and Zustand store integration for building custom nodes in visual workflow editors.

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations for dashboards, admin panels, or data-rich interfaces.

Build MCP servers for Copilot Chat with interactive widgets using React and Fluent UI, supporting both OpenAI Apps SDK and MCP Apps Extension standards.

Diagnose and fix Vue 3 runtime errors, warnings, async failures, and SSR/hydration issues with targeted debugging guides.

Provides Vue.js best practices and workflow guidance, including architecture planning, component design, reactivity patterns, and performance optimization for Vue 3 projects.

Provides guidance on JSX syntax differences between Vue and React, including attribute naming and plugin configuration.

Learn Pinia best practices, common gotchas, and state management patterns for Vue applications.

Provides Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

Provides Vue 3 Options API best practices, TypeScript integration tips, and solutions to common gotchas.

Transforms source materials (URLs, PDFs, DOCX, Markdown, text, screenshots) into a single-file HTML web article that is visually polished, offline-accessible, and shareable, using a structured editorial workflow with checkpoints and quality reviews.

Craft polished visual web artifacts — pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations — using HTML, CSS, JavaScript, and React.

Batch-convert UI design screenshots into Vue 3 Composition API components using Vant, Element Plus, or Ant Design Vue.

Provides Vue.js 3 Composition API patterns, component architecture, reactivity best practices, Pinia state management, Vue Router navigation, and Nuxt SSR patterns for Vue, Nuxt, Vite, or Pinia projects.

Provides patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching in Nuxt 4 apps.

Provides idiomatic React 18/19 patterns for hooks, server/client components, Suspense, error boundaries, forms, data fetching, state management, and accessibility-first composition.

Optimizes Next.js 16+ development with Turbopack for faster bundling, caching, and dev startup, and clarifies when to use Turbopack vs webpack.

Generates Angular code and provides architectural guidance for projects, components, services, and more, covering reactivity, forms, dependency injection, routing, accessibility, animations, styling, testing, and CLI tooling.

Provides reusable React and Next.js patterns for component composition, state management, data fetching, and performance optimization.

Organizes 70+ React and Next.js performance optimization rules across 8 priority categories for use when writing, reviewing, or refactoring code.