메뉴
Visual language, tone, typography, color systems, and asset usage across TopNetworks brands — TopFinanzas, KardTrust, and BudgetBee. Use when building any UI, writing copy, selecting imagery, or configuring design tokens for any TopNetworks property.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Auth flows, session management, OAuth integration, domain-restricted access, and role-based access control for TopNetworks properties. Primary implementation is Better Auth 1.x with Google OAuth in route-genius. Use when implementing login, session checks, protected routes, or any access control logic.
API design, server-side logic, service architecture, and integration patterns with third-party services (ActiveCampaign, Brevo, ConvertKit, Supabase, Vertex AI) for TopNetworks properties. Use when building API routes, Server Actions, background jobs, or service integrations.
Schema design, migration strategies, indexing conventions, query patterns, and ORM usage for TopNetworks properties. Covers Supabase PostgreSQL (route-genius), Cloud SQL PostgreSQL (emailgenius), and BigQuery (arbitrage-dashboard). Use when designing schemas, writing migrations, or building data access layers.
Environment configuration, CI/CD conventions, Vercel deployment standards, PM2 process management, Git workflow automation, and environment variable management for TopNetworks properties. Use when configuring deployments, managing environments, running builds, or setting up new projects.
Component architecture, UI patterns, design system integration, accessibility standards, and framework-specific conventions for TopNetworks properties built on Next.js 15+ and Astro 5. Use when building pages, components, or layouts for any TopNetworks project.
GCP service configuration and full-stack Next.js bootstrapping workflow for TopNetworks properties. Generates browser agent instruction sets for GCP project setup, OAuth, Supabase, Cloud Storage, and Firebase provisioning, then enforces a hard wait state before any backend code is written. Use when creating a new full-stack Next.js application, adding backend services to an existing frontend, or refactoring/upgrading an existing full-stack Next.js codebase.
SOC 직업 분류 기준
| name | brand-identity |
| description | Visual language, tone, typography, color systems, and asset usage across TopNetworks brands — TopFinanzas, KardTrust, and BudgetBee. Use when building any UI, writing copy, selecting imagery, or configuring design tokens for any TopNetworks property. |
Apply this skill whenever producing code, copy, or design artifacts for any TopNetworks property. Brand compliance is non-negotiable: deviating from these standards negatively affects SEO, conversion rates, and brand trust across markets.
Use for: UI components, page layouts, email templates, copy writing, image selection, color application, font loading, logo placement, and any output visible to end users across TopFinanzas (US/UK/MX), KardTrust, BudgetBee, MejoresFinanzas, and EmailGenius.
Not for: Internal tooling with no public-facing UI (use general Next.js patterns there).
| Brand | Domain | Market | Audience |
|---|---|---|---|
| TopFinanzas US | us.topfinanzas.com | United States | US consumers, financial products |
| TopFinanzas UK | uk.topfinanzas.com | United Kingdom | UK consumers, FCA-regulated content |
| TopFinanzas MX | topfinanzas.com/mx/ | Mexico | Mexican market, Spanish language |
| MejoresFinanzas | mejoresfinanzas.com | Latin America | LatAm, Spanish-speaking |
| BudgetBee | budgetbeepro.com | United States | Gen-Z and Millennials |
| KardTrust | kardtrust.com | Multi-market | Credit card comparison |
| EmailGenius | email.topfinanzas.com | Internal | Marketing operations team |
| RouteGenius | route.topnetworks.co | Internal | Traffic distribution tool |
Primary brand palette using Tailwind CSS class names and hex values:
/* Brand tokens — define in globals.css as @theme inline */
--color-brand-blue: #2563eb; /* blue-600 — primary actions, links */
--color-brand-cyan: #0891b2; /* cyan-600 — secondary accent */
--color-brand-lime: #84cc16; /* lime-500 — highlight accent */
/* Gradient backgrounds */
background: linear-gradient(to bottom right, #f0fdf4, #ecfeff, #dbeafe);
/* Tailwind: from-lime-50 via-cyan-50 to-blue-100 */
Usage rules:
bg-blue-600 hover:bg-blue-700bg-cyan-600 hover:bg-cyan-700bg-lime-500bg-gradient-to-br from-lime-50 via-cyan-50 to-blue-100text-gray-800 (headings), text-gray-700 (body), text-gray-600 (secondary)--color-bee-gold: #e6b432; /* Primary — honey/bee theme */
--color-bee-black: #000000; /* Deep contrast */
--color-bee-white: #ffffff; /* Background */
--color-bee-teal: #3daaaa; /* Accent */
--color-bee-orange: #f4a261; /* Warm accent */
Usage rules:
#E6B432) on black or whiteKardTrust uses the same Tailwind utility approach as TopFinanzas. Default to the TopFinanzas blue/cyan/lime palette unless a KardTrust-specific design system is in place. Credit card imagery should be crisp, trust-signaling, and neutral in tone.
// Next.js font loading — app/layout.tsx
import { Poppins } from "next/font/google";
const poppins = Poppins({
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
variable: "--font-poppins",
display: "swap",
});
// Apply to <html>
<html className={`${poppins.variable} font-sans`}>
/* tailwind.config */
fontFamily: {
sans:
[ "var(--font-poppins)",
"system-ui",
"sans-serif"];
}
Weight usage:
Never use external font requests at runtime. Always load via next/font/google with display: "swap".
TopNetworks Logo (positive, no background):
https://storage.googleapis.com/media-topfinanzas-com/images/topnetworks-positivo-sinfondo.webp
Global Favicon:
https://storage.googleapis.com/media-topfinanzas-com/favicon.png
Media CDN base (images, cards, hero shots):
https://storage.googleapis.com/media-topfinanzas-com/
Always reference CDN assets via next/image with explicit width, height, and descriptive alt text. Never inline SVG logos as strings; use <Image> or an SVG component.
The bee mascot lives in /public/ as local assets. It is a friendly cartoon bee inside a hexagonal frame. Use it:
<AIContentDisclaimer /> on all AI-generated content pages.us.topfinanzas.comuk.topfinanzas.comtopfinanzas.com/mx/ (NOT mx.topfinanzas.com)mejoresfinanzas.compriority={false} with loading="lazy" unless above-the-foldalt text (not keyword-stuffed)https://storage.googleapis.com/media-topfinanzas-com/images/{market}/{filename}.webpAll TopFinanzas content pages require these ad container divs with exact IDs:
<!-- First ad unit — placed after H1, before first content section -->
<div id="square01" data-topads data-topads-size="square"></div>
<!-- Second ad unit — placed in final third of article -->
<div id="square02" data-topads data-topads-size="square"></div>
UK properties use AdZep unit IDs uk_topfinanzas_3 and uk_topfinanzas_4 (see authentication skill for AdZep details). Never call window.AdZepActivateAds() manually.
console.log() — always use the project's Pino logger (import { logger } from "@/lib/logger")