skills.rest
hathbanger
hathbangerCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/hathbanger/fridas-choppers-gtm --skill web-architect
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
jackspacejackspace
16

web-asset-generator

Generate favicons, app icons, and Open Graph images from logos or text slogans.

Community
Advanced
deomiarndeomiarn

favicon-pwa

Generate favicon variants, apple-touch-icon, and PWA manifest from brand colors.

Community
Intermediate
hughescrhughescr
1

hugo-asset-pipeline

Automate Hugo asset processing with Hugo Pipes for SCSS, JS, and images.

Community
Advanced
IsNoobgrammerIsNoobgrammer
4

logo-favicon

Generate SVG logos, favicons, and social media assets from project names.

Community
Advanced