What frameworks does this skill support?

It is specifically optimized for Next.js 15+ using the App Router and Astro 5.0 for content-heavy sites.

Which icon library is used with this skill?

This skill uses Lucide-react exclusively to maintain visual consistency and minimize bundle size.

Does this skill allow standard console logging?

No, it strictly enforces the use of a custom Pino logger utility to ensure consistent, production-grade observability across all properties.

How are blog posts synchronized?

When creating content, the skill ensures metadata is updated across six critical locations, including the blog index, category pages, sidebars, and header navigation.

How does it handle SEO for financial pages?

It enforces a specific, data-validated order of elements—including H1 placement, ad unit positioning, and CTA logic—proven to maximize conversion and search rankings.

TopNetworks Frontend Standards

Name: TopNetworks Frontend Standards
Author: juanjaragavi

byjuanjaragavi

0•

设计工具

Implements standardized frontend architectures, UI patterns, and SEO-optimized layouts for Next.js and Astro projects.

This skill provides a comprehensive framework for building high-performance frontend interfaces within the TopNetworks ecosystem. It enforces strict design system integration using Tailwind CSS and Shadcn/UI, ensures adherence to specific SEO-driven layout standards for financial products, and automates complex blog synchronization tasks. By applying production-validated patterns for Next.js 15+ and Astro 5, it helps developers maintain consistency across multiple properties while optimizing for accessibility, performance, and conversion rates.

主要功能

01Provides standardized React Server Component and Client Component implementation patterns.

02Enforces mandatory layout sequences for financial product and requirements pages to maximize SEO.

030 GitHub stars

04Implements built-in Google Tag Manager and TopAds integration with automated navigation handling.

05Integrates Shadcn/UI and Tailwind CSS following strict typography and spacing conventions.

06Automates synchronization of blog post metadata across listing pages, sidebars, and navigation files.

使用场景

01Managing large-scale blog deployments with synchronized metadata and recent post sidebars.

02Developing accessible and responsive UI components using Next.js 15+ and Tailwind CSS.

03Building high-converting financial product pages with non-negotiable SEO layouts.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add juanjaragavi/social-media-genius frontend

For use in Claude.ai and ChatGPT

Download Skill