Site Building SOP Knowledge Base
ShadCN + Tailwind production design — 35 topics. Agent API at /api/topics
ad-designer
Generate professional Meta/social ad creatives using AI image generation. Routes to Nano Banana Pro (Gemini) for text-heavy ads and FLUX Pro for photorealistic imagery.
brand-collector
Extract all publicly available brand information from a URL and organize it into structured markdown tables with source attribution
brand-guideline-generator
Create a comprehensive brand guideline document from provided business information
conversion-optimizer
Apply the 12 Conversion Hacks and Intent Behind the Intent framework to local service pages, landing pages, and CTAs. Grounded in conversion psychology from Mike's training library.
design-router
Select the right UI template library for any build. Decision tree: Tailwind Plus vs Aceternity vs Cruip vs shadcn-blocks vs Elementor. 6,904+ pre-built files. Check before building anything from scratch.
diagram-generator
Convert any system, process, or concept description to Excalidraw JSON, SVG, or ASCII diagrams. Handles flowcharts, architecture diagrams, sequence diagrams, org charts, timelines, and mind maps.
form-cro
Optimize lead capture forms, contact forms, demo request forms, and quote forms. Every field has a cost — reduce friction, improve completion rate. For signup flows see signup-flow-cro. For popups see popup-cro.
Frankie's Accumulated Learnings
These are production patterns learned through real agency builds
frontend-animation
Quick Install Reference GSAP (Default Choice — Covers 90% of Cases) bash npm install gsap @gsap/react Use when: Any animation need
frontend-design
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics
full-website-writer
End-to-end website pipeline: sitemap, every page fully written, SEO optimized, schema markup, meta data, and technical audit — in one continuous chain. Takes any business description and produces a complete website.
generate-image-from-page
Generate brand-aligned hero images, featured images, and web banners from a URL or text description. Analyzes site colors and style, produces text-overlay-friendly compositions via Nano Banana or FLUX Pro.
hero-image-from-page
Workflow Step 1: Analyze the Website — Visit and analyze the URL to extract: industry and theme, brand colors (primary, secondary, and accent), visual style (photography-based, illustration-based, mi
infographic-generator
Analyze a URL and generate 3-4 informative, placement-recommended infographic images for that page. Types: process steps, statistics, comparisons, checklists, benefit overviews, timelines.
landing-page-builder
Purpose Research, write, design, code, and validate a production-ready landing page from a source URL or text brief
landing-page-cro
5 Analysis Areas 1
landing-page-generator
Generate complete, conversion-optimized landing page content from keywords and brand info
landing-page-optimizer
Audit and rewrite landing page content using conversion rate optimization (CRO) principles, marketing psychology, and SEO best practices
landing-page-writer
Design and write a complete, conversion-optimized landing page for a new product or service
onboarding-cro
Optimize post-signup onboarding, user activation, and first-run experience to maximize time-to-value and reach the aha moment. For signup flows see signup-flow-cro.
page-content-enricher
Rewrite and enrich an existing published page with better keywords, topics, LSI terms, and related questions. Takes a live URL and title, researches intent and competitors, rewrites for comprehensiveness and SEO.
page-cro
CRO Analysis Framework 1
page-faq-generator
Generate SEO-optimized FAQ sections for any page. Analyzes niche and audience, generates PAA-targeted questions with rich answers, formats for FAQ schema markup with JSON-LD output.
paywall-upgrade-cro
Create and optimize in-app paywalls, upgrade screens, upsell modals, and feature gates. Converts free users to paid at moments of demonstrated value. Distinct from public pricing pages.
popup-cro
Create or optimize popups, modals, overlays, slide-ins, and banners for conversion. Covers timing triggers, copy frameworks, mobile treatment, and A/B testing. For page-wide forms see form-cro.
section-blocks
Philosophy Every block follows these non-negotiable principles: 1
seo-landing-page-creator
Create a high-converting, SEO-optimized landing page from a keyword or topic. Includes competitor analysis, content writing, conversion funnel design, E-E-A-T compliance, and JSON-LD schema output.
shadcn-blocks
Premium pre-built sections and components for shadcn/ui projects from shadcnuikit.com
signup-flow-cro
Optimize free trial signups, registration flows, and account creation. Reduce friction, increase completion, enable faster activation. Post-signup activation: see onboarding-cro. Lead forms: see form-cro.
site-structure-generator
Generate a comprehensive site structure table (25+ rows, 22 columns) from any keyword, niche, or URL. Columns include meta titles, descriptions, keywords, schema types, H1 outlines, and CTAs. Optionally generates full page content for every row.
tailwind-plus-ui
Location - Installed: D:/ClaudeDev/00_GITHUB/_working-on/Templates/ui-blocks/tailwind-plus/ - Backup zips: E:/LOC/Design Templates/tailwind-plus/ Categories (23 folders, 179 JSX files) - heroes/ —
ui-review
Workflow 1
visual-clone
Accepted Inputs - Screenshot (required primary): Any image — drag into chat, Snipping Tool, phone photo, browser screenshot - CSS text (optional): Copied from DevTools Elements > Computed tab
visual-qa-loop
Step 1: Animation Detection (CRITICAL — Do This First) Before starting the loop, scan the project for animation libraries and CSS animations
website-structure-planner
Plan a complete website structure from business context: sitemap, URL strategy, internal linking, and content architecture. The blueprint before any pages are written. Use before full-website-writer.