frontend▌

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

This skill guides the creation of professional, polished mobile app interfaces that follow proven design principles used by top-tier apps like Airbnb, Duolingo, Spotify, Revolut, and Phantom.

Generate multiple radically different interface designs using parallel sub-agents to explore module shape options. \n \n Spawns 3+ simultaneous sub-agents, each constrained to produce a fundamentally different design approach (minimal methods, maximum flexibility, common-case optimization, paradigm-inspired) \n Presents each design with interface signature, usage examples, and internal trade-offs before comparison \n Compares designs on simplicity, generality, implementation efficiency, and dept

Expert code reviewer for TypeScript and React 19 applications with deep anti-pattern detection. \n \n Identifies critical issues including useEffect abuse, state mutations, conditional hook calls, and React 19-specific bugs like useFormStatus in form components \n Covers three priority levels: critical (blocks merge), high priority (stale closures, missing boundaries), and architecture/style recommendations \n Includes state management guidance for server data (TanStack Query), global UI state (

Design production UIs in Pencil and generate clean code from design files. \n \n Enforces design system reuse, variable-driven styling, and layout correctness to prevent inconsistent, unmaintainable designs \n Supports design-to-code workflows for React, Next.js, Vue, Svelte, and HTML/CSS with Tailwind v4 semantic classes and shadcn/ui component mapping \n Requires visual verification after each section via screenshots and layout snapshots to catch overflow, alignment, and spacing issues before

Name: Premium Utilitarian Minimalism & Editorial UI Description: An advanced frontend engineering directive for generating highly refined, ultra-minimalist, "document-style" web interfaces analogous to top-tier workspace platforms. This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents. It actively reject

Evaluates Next.js App Router code against best practices for Server Components, Client Components, Server Actions, caching strategies, and production-readiness criteria. Produces actionable findings categorized by severity with concrete code examples. Delegates to typescript-software-architect-review agent for architectural analysis.

Expert guidance for building Telegram bots from simple automation to complex AI-powered assistants. \n \n Covers bot architecture patterns, command design, inline keyboards, webhook management, and user onboarding workflows \n Includes stack recommendations (Telegraf, grammY, python-telegram-bot, aiogram) with language-specific setup examples \n Provides monetization strategies including freemium models, subscriptions, Telegram Payments integration, and usage-limit enforcement \n Highlights anti

React composition patterns for scaling components and avoiding boolean prop proliferation. \n \n Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples \n Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants \n Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decision

Web Design Guidelines \n Modern web design principles for responsive layouts, accessibility, and visual hierarchy. \n When to Use \n \n Creating polished web interfaces \n Improving accessibility \n Responsive design patterns \n Visual hierarchy decisions \n \n Source \n This skill references patterns from Vercel's agent-skills .