web-architect

Generate brand assets and audit web code against best practices.

Updated Jan 25, 2026

Search Tags:#react #nextjs #favicon #css-tokens #brand-assets #web-audit #social-images

Ready to run

npx skills add https://github.com/hathbanger/fridas-choppers-gtm --skill web-architect

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-architect
Source: https://github.com/hathbanger/fridas-choppers-gtm/tree/main/.claude/skills/web-architect
Command: npx skills add https://github.com/hathbanger/fridas-choppers-gtm --skill web-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the generation of brand assets and audits web code against established best practices for CSS, favicons, social images, and React/Next.js performance.

Core Features & Use Cases

Generate favicon package (all sizes) and social assets (OG, banners, PFP)
Build CSS with brand tokens and export updated CSS
Audit asset completeness and ensure preview files reflect final assets
Convert SVG assets to PNGs for broader compatibility
Use Case: Launching a new brand site, run this skill to produce all required assets and verify performance guidelines are met.

Quick Start

Use the web-architect skill to audit your current site assets and generate the missing items. Run /web-architect audit to identify what's missing, then /web-architect implement all to generate the full set of assets.

Frequently Asked Questions about web-architect

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate favicons and social images for a React or Next.js site?▼

Generate favicons and social images by running an automated asset workflow that produces all required sizes for favicons, OG tags, and banners, outputting files under the outputs/svg and outputs/png directories for direct integration into your React or Next.js project.

What is the best way to audit web code against React and Next.js performance best practices?▼

Audit web code by running the audit command, which checks your asset completeness and evaluates your CSS and React/Next.js workflows against established performance guidelines to identify missing items and areas for optimization.

Do I need a specific configuration file to generate brand assets and CSS tokens?▼

Yes, you need a knowledge/BRAND_DECISIONS.md file containing your branding decisions to drive the generation of brand-driven CSS tokens, favicons, and social assets.

Can I export SVG brand assets to PNG for broader web compatibility?▼

Yes, you can convert and export SVG brand assets to PNG format, placing the output files in the outputs/png directory to ensure broader compatibility across different web platforms and preview environments.

How do I build CSS with brand tokens and update my site's styles?▼

Build CSS with brand tokens by applying your branding decisions to generate a stylesheet with defined CSS tokens, and export the updated CSS file to maintain consistent brand styling across your web application.

What are the limitations when auditing web assets for a new brand site launch?▼

The audit is limited to checking asset completeness, brand-driven CSS, favicons, and social images for React/Next.js workflows, meaning it will verify that preview files reflect final assets but does not cover general functional testing.