Frontend Skills

Use when creating or modifying any UI component, page, or styling in user-pages. Enforces RunWhen's MUI++ design system standards.

Triage a Nativewind or react-native-css GitHub issue. Reads the issue, determines version/repo, creates a reproduction, tests against latest published and local HEAD, then drafts a comment.

Convert a codebase into a self-contained HTML portal app for ingestion into AI application systems. Produces a single deployable HTML file with embedded CSS, JS, and data.

Generate a complete HTML/React styleguide page for your project based on your design preferences.

Use when writing or modifying Vue 3 components, Vuex store modules, TypeScript interfaces, or Vuetify 4 UI in the src/ directory.

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.

Auto-generate skills and rules from observed React Native development patterns

Explain the Nativewind v5 architecture, CSS pipeline, and key files. Use when a contributor wants to understand how the codebase works.

Apple HIG design intelligence — build, review, animate, and analyze with Apple Human Interface Guidelines for React Native/Expo

Generate an institutional-grade investment banking pitch deck (HTML → PDF)

Generate dashboard UIs using the OpenUI spec (openui.com) with a React + DuckDB backend. Use this skill when building dashboards, data visualization UIs, chat interfaces, or any LLM-driven UI generation. Includes pre-built chat session support for TheGardener.

Svelte is a compiler-based reactive UI framework that shifts work from runtime to build time. Unlike React/Vue, Svelte compiles components to highly optimized vanilla JavaScript with minimal overhead. Svelte 5 introduces Runes API for explicit, fine-grained reactivity.

Vue 3 is a progressive framework for building user interfaces with emphasis on approachability, performance, and flexibility. It features the Composition API for better logic reuse, a powerful reactivity system, and single-file components (.vue files).

Headless UI provides completely unstyled, fully accessible UI components designed to integrate beautifully with Tailwind CSS. Built by the Tailwind Labs team, it offers production-ready accessibility without imposing design decisions.

FlexLayout-React provides IDE-quality docking layouts with drag-and-drop, tabs, splitters, and complex window management. Perfect for dashboards, IDEs, admin panels, and any interface requiring flexible, user-customizable layouts.

progressive_disclosure: entry_point: - summary - when_to_use - quick_start sections: core_concepts: - utility_first_approach - responsive_design - configuration advanced: - dark_mode - custom_utilities - plugins - performance_optimization integration: - framework_integration - component_patterns...

ERNE — Version migration for Expo SDK and React Native using the upgrade-assistant agent

DaisyUI is the most popular Tailwind CSS component library providing semantic class names for 50+ components with built-in themes, dark mode, and customization. Framework-agnostic and production-ready.

Version migration for Expo SDK and React Native using the upgrade-assistant agent

Step-by-step performance diagnosis and optimization for React Native apps

Guided version migration for React Native and Expo SDK upgrades

Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).

Enforce React Native coding standards as an actionable workflow

Animated slide deck builder with React, Tailwind, HLS video backgrounds, and liquid glass aesthetics

Card Design. >

Mobile security audit for React Native applications

This skill should be used when setting up OpenAI ChatKit in Next.js, adding domain allowlist to environment, building chat UI component, integrating with /api/chat endpoint, displaying history and tool calls visually, and integrating Better Auth session.

Design critique (Nielsen heuristics) + accessibility audit (WCAG 2.2 AA)

Layout Composition. >

Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.