Skill UI

This skill provides implementation patterns for integrating with the Ramp Developer API. It covers secure OAuth2 authentication and essential API calls for managing corporate cards, tracking expenses, and syncing financial data. Use it when building FinTech applications that require robust card and expense management capabilities.

A comprehensive collection of reusable abstractions and components for building modern, professional admin user interfaces. It provides core elements like DataTables, complex forms, date pickers, buttons, and cards, ensuring a consistent and efficient development experience for web applications.

Generates a complete, self-contained HTML dashboard for analytics, admin, or control panel views. It structures the layout with a fixed sidebar, top navigation, KPI cards, and detailed charts (using inline SVG). Ideal when the brief requires visualizing key metrics, performance over time, or operational statistics.

Generates a comprehensive, single-screen financial report in a self-contained HTML file. This skill is designed for analyzing key business metrics, including P&L summaries, MRR trends, KPI cards (Revenue, Gross Margin, Cash Runway), and top-accounts analysis. Ideal for quarterly or monthly financial reviews in SaaS or startup environments.

A comprehensive, single-screen Kanban board prototype designed for visualizing agile project management and sprint tracking. It features distinct columns (Backlog, In Progress, Review, Done), draggable cards, assignee avatars, and advanced filtering options, making it ideal for managing product backlogs, simulating tools like Trello, or visualizing complex workflows.

This skill generates a single, full-bleed, looping motion composition using only inline CSS animations. It functions as a high-fidelity poster frame, specifically designed to be captured by keyframe exporters (like HyperFrames or Lottie) to create animated hero videos, title cards, or video posters for marketing campaigns. Ideal for briefs requiring sophisticated 'motion design' or 'animated hero' assets.

This skill generates a complete, standalone, and highly structured pricing page in standalone HTML. It automatically respects the active design system (colors, typography, components) and supports defining 2-4 plan tiers, including feature cards, comprehensive comparison tables, and an FAQ section. Ideal for product marketing and sales-focused websites.

A comprehensive OKR tracker dashboard designed to visualize team objectives and key results (KRs). It includes a quarter banner, multiple objective cards with progress bars, owner details, and a dedicated sidebar for at-a-glance KPIs, ideal for quarterly performance reviews and strategic planning.

HyperFrames is a comprehensive framework that treats HTML as the source of truth for video production. It allows users to create complex video compositions, including animated title cards, dynamic captions synced to audio, advanced text-to-speech narratives, and sophisticated audio-reactive visuals (like beat synchronization). The tool manages the entire video workflow, from composition authoring and timing to scene transitions (crossfades, wipes) and final rendering.

This utility serves as a command-line alias for invoking the Claude Code `/pua:kpi` function. It loads necessary configurations (pua-pro) to generate comprehensive Key Performance Indicator (KPI) or performance report cards. It manages configuration files by updating `~/.pua/config.json` while preserving unknown fields and ensuring the directory structure exists.

This skill helps developers fix social sharing previews, ensuring that URLs render as rich, consistent cards across major platforms like Facebook, LinkedIn, X/Twitter, and WhatsApp. It provides standardized implementation for Open Graph (OG) tags and Twitter cards, crucial for improving SEO and discoverability.

This meta-skill manages the end-to-end generation of AI-powered short dramas from a given topic. It first drafts a detailed, shot-by-shot shooting script, pausing for user review and adjustments. After confirmation, it generates consistent visual assets (universal character identity and scene compositions) and renders the final video clips. The output includes the fully rendered MP4, subtitles, title cards, and the complete script file.