frontend-design
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Step 0 — Detect Project Context
Before generating any code, detect which mode to use by checking the current working directory:
Mode 1: Rails + Inertia (Auto-detected)
Activate when ALL of these exist:
Gemfilecontainsinertia_railspackage.jsoncontains@inertiajs/reactapp/frontend/pages/directory exists
→ Jump to "Rails + Inertia Mode" section below.
Mode 2: Standalone React (Vite SPA)
More from aalvaaro/skills
cv-generator
Resume and CV builder that creates professional, deployable web resumes from any source (PDF, DOCX, TXT, MD, HTML, URL, LinkedIn, Notion). Acts as an expert recruiter: extracts information from multiple files, interviews the user to refine content, researches the target industry to give informed advice, suggests improvements and optimal organization, generates a professional AI headshot from a reference photo, and builds a polished single-page HTML resume with PDF download — deployed instantly via Cloudflare Workers. Use this skill whenever the user mentions resume, CV, curriculum vitae, professional profile page, career page, job application page, or wants to create a professional online presence for job seeking, even if they don't say 'resume' explicitly.
12presentation
Research-driven presentation generator. Creates self-contained HTML slide decks with keyboard navigation, transitions, and responsive design. Supports single presentations or multi-material projects (pitch deck + business plan + financial report + more) with a shared research phase and a fancy index page linking all deliverables. Starts from a document, URL, file, pasted text, or image — or walks through guided questions and multi-source research (social media, news, finance, trends, ads, YouTube, app stores, Google Maps reviews, web scraping). Supports multiple presentation types (pitch deck, sales, marketing, business model canvas, portfolio, etc.) and visual styles (minimalist, bold, editorial, data-driven, creative). Generates AI images and deploys to Cloudflare Workers for instant sharing. Use this skill when the user says things like: 'create a presentation', 'build a slide deck', 'make a pitch deck', 'presentation about...', 'I need slides for...', 'help me prepare a presentation', 'investor pitch', 'sales presentation', 'workshop slides', 'product launch deck', 'business model canvas presentation', 'create slides from this document', 'create a project with multiple presentations', 'pitch deck and business plan', or provides a document/URL and wants presentation slides built from it.
9landing-page
Research-driven landing page generator. Pulls data from social media, websites, Google Maps, YouTube, forums, and optionally a CV to build a complete profile of a company or person. Analyzes the data as a marketer to extract competitive advantages, value props, audience insights, and brand voice. Then generates a compelling landing page with AI-generated images tailored to the audience. Use this skill when the user says things like: 'create a landing page for...', 'build a website for this business', 'make a landing page from their social media', 'generate a page for this company', 'research and build a site for...', 'landing page for my client', 'portfolio page for...', 'personal brand page', or provides social media handles, a website URL, or a CV and wants a page built from it.
8content-media-plan
Content marketing calendar and media plan generator. Creates a complete content calendar (1, 2, or 4 weeks) with a post-by-post schedule, format examples with AI-generated sample images, and a brand strategy summary. Stores results in Notion and/or exports a local HTML file. Use this skill when the user wants to plan their social media content, create a content calendar, build a posting schedule, develop a content strategy, get a media plan for their brand, or says things like 'create a content plan', 'help me plan my social media', 'I need a posting schedule', 'build me a content calendar', 'what should I post this month', 'content strategy for my brand', 'plan my content for Instagram', 'create a media plan', or 'help me plan content for the next month'.
8invoice-generator
Generate professional invoices for freelancers and contractors. Creates a polished HTML invoice with live preview and download button, saved to /invoices. Stores contractor info (company name, address, phone) in a config file so it's only entered once. Asks for client name, email, line items, and optional payment terms each time. Auto-numbers invoices per client (saleshood_001, saleshood_002, etc.) and auto-dates to today. Supports multiple languages and currencies. The user can customize the HTML template to match their brand. Use this skill whenever the user mentions invoice, billing, bill a client, send an invoice, create an invoice, contractor invoice, freelance billing, or wants to generate any kind of invoice document — even if they just say something like 'I need to bill my client' or 'charge for last month's work'.
7catador-pro
AI-powered coffee cupping assistant by Catador Pro (catador.pro). Guides users through professional cupping sessions following SCA Arabica, SCA Robusta, Cup of Excellence, and CVA protocols. Analyzes uploaded cupping forms and score sheets (PDF, images, text), identifies flavors using the SCA Flavor Wheel, calculates scores accurately, generates visual HTML reports with spider charts, and educates on cupping techniques and coffee science. Use this skill whenever the user mentions coffee cupping, sensory analysis, coffee tasting, flavor profiling, cupping scores, SCA protocols, CVA, Q Grading, coffee evaluation, specialty coffee, or wants to analyze, score, compare, or learn about coffee — even if they don't mention 'Catador Pro' explicitly. Also trigger when the user uploads what appears to be a cupping form or coffee tasting notes.
6