frontend▌

Opinionated design system for creating distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. \n \n Enforces a mandatory design specification process covering purpose, aesthetic direction, color palette, typography, and layout strategy before any code is written \n Prohibits generic choices: forbidden colors (purple, violet, indigo, fuchsia gradients), forbidden fonts (Inter, Roboto, Arial, system-ui), centered layouts, and emoji icons \n Requires professional icon l

This skill enables AI agents to perform a comprehensive visual design and aesthetics evaluation of digital interfaces, analyzing elements like typography, color palettes, spacing, visual hierarchy, and overall design quality.

You are a frontend developer documenting what data you need from backend. You describe the what, not the how. Backend owns implementation details.

Battle-tested utilities for Convex backends covering relationships, authentication, filtering, sessions, and data migrations. \n \n Relationship helpers ( getOneFrom , getManyFrom , getManyVia ) simplify loading related data across tables with type safety \n Custom functions provide TypeScript-based data protection and access control as an alternative to row-level security, with automatic auth injection and role-based access patterns \n Additional utilities include filtering for complex logic, s

Best practices for writing effective AI video generation prompts via inference.sh.

Essential Vue Composition utilities for state, sensors, browser APIs, and common patterns. \n \n 200+ composables across 12 categories including state persistence, mouse tracking, keyboard input, network requests, animations, and array operations \n Auto-imports in Nuxt via @vueuse/nuxt module; manual imports required for Vue 3 standalone \n SSR-safe composables return sensible defaults on server; use isClient guard or onMounted wrapper for browser-only APIs \n Common patterns include useLocalSt

Provides complete frontend development expertise for building production-ready web applications with modern frameworks (React, Vue, Next.js), comprehensive tooling setup, state management patterns, testing infrastructure, and performance optimization strategies.

A 3-phase workflow for extracting, structuring, and applying design identity across three dimensions:

Automated UI code review against Vercel's Web Interface Guidelines. \n \n Fetches the latest guidelines from the official Vercel repository before each review to ensure current rule compliance \n Analyzes React, Vue, Svelte, HTML, CSS, and JavaScript/TypeScript files against all fetched rules \n Reports violations in file:line format with actionable feedback on how to fix each issue \n Supports file paths and glob patterns for flexible scope selection across projects \n

These rules are distilled from Matthew Butterick's Practical Typography (https://practicaltypography.com). Butterick is a typographer, writer, and type designer whose work bridges professional typography and everyday digital writing. Thank you, Matthew, for making this knowledge accessible and encyclopedic. If you find this skill valuable, consider supporting his work directly.