Web Architect Skill

Implements the brand system by generating all required assets. Also audits web code against best practices.

Related Skills

•react-best-practices - React/Next.js performance optimization. Use when building or auditing React sites.

Capabilities

•Generate favicon package (all sizes)
•Create social assets (OG images, banners, PFP)
•Build CSS with brand tokens
•Export SVGs to PNGs
•Audit asset completeness
•Update preview files with final assets

Input Requirements

Requires knowledge/BRAND_DECISIONS.md with:

•Selected mark
•Color palette
•Typography choices

Commands

code

/web-architect                    # Show status
/web-architect audit              # Check what's missing
/web-architect implement all      # Generate everything
/web-architect implement css      # Generate CSS only
/web-architect implement favicons # Generate favicon package
/web-architect implement social   # Generate social assets
/web-architect implement marks    # Generate mark size variants
/web-architect export png         # Export all SVGs to PNG

Workflow

Audit

code

/web-architect audit

Checking brand assets...

MARKS:
├─ [✓] Primary mark selected
├─ [✓] Transparent version
├─ [ ] Size variants (80, 160, 400)
└─ [ ] Dark/light variants

FAVICONS:
├─ [ ] 16px
├─ [ ] 32px
├─ [ ] 48px
├─ [ ] 96px
├─ [ ] 180px (Apple Touch)
├─ [ ] 192px (Android)
└─ [ ] 512px (PWA)

SOCIAL:
├─ [ ] Twitter banner (1500x500)
├─ [ ] OG image (1200x630)
├─ [ ] Twitter PFP (400x400)
└─ [ ] Banner size variants

CSS:
├─ [ ] Color tokens
├─ [ ] Typography tokens
└─ [ ] global.css generated

Missing: 18 assets
Run /web-architect implement all to generate.

Implement All

code

/web-architect implement all

Generating brand assets...

MARKS:
├─ [✓] mark-v3-80-dark.svg
├─ [✓] mark-v3-80-light.svg
├─ [✓] mark-v3-160-dark.svg
├─ [✓] mark-v3-400-dark.svg
└─ Saved to outputs/svg/mark/

FAVICONS:
├─ [✓] favicon-16-dark.svg
├─ [✓] favicon-32-dark.svg
├─ [✓] favicon-48-dark.svg
├─ [✓] favicon-96-dark.svg
├─ [✓] favicon-180-dark.svg
├─ [✓] favicon-192-dark.svg
├─ [✓] favicon-512-dark.svg
└─ Saved to outputs/svg/favicon/

SOCIAL:
├─ [✓] twitter-banner-sm-1500x500-dark.svg
├─ [✓] twitter-banner-md-1500x500-dark.svg
├─ [✓] twitter-banner-lg-1500x500-dark.svg
├─ [✓] twitter-banner-xl-1500x500-dark.svg
├─ [✓] og-default-1200x630-dark.svg
├─ [✓] pfp-400-dark.svg
└─ Saved to outputs/svg/social/

CSS:
├─ [✓] outputs/css/global.css
└─ Tokens from BRAND_DECISIONS.md

PNG EXPORT:
├─ [✓] All SVGs exported to PNG
└─ Saved to outputs/png/

Complete! 24 assets generated.

Asset Generation

Favicons

Generate all standard favicon sizes:

bash

# Sizes needed
16   - Browser tab
32   - Browser tab @2x
48   - Windows
96   - Android Chrome
180  - Apple Touch Icon
192  - Android Chrome @2x
512  - PWA splash

SVG structure:

xml

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {size} {size}">
  <rect width="100%" height="100%" fill="{bg-color}"/>
  <!-- Mark scaled to fit with padding -->
</svg>

Social Assets

Twitter Banner (1500x500)

•Box with mark inside
•Left-aligned with padding
•Size variants: sm, md, lg, xl

OG Image (1200x630)

•Mark centered in box
•Optional: tagline variant

PFP (400x400)

•Square crop
•Mark centered
•High contrast

CSS Generation

Read from BRAND_DECISIONS.md and generate:

css

:root {
  /* Colors from decisions */
  --brand-bg: {bg};
  --brand-fg: {fg};
  --brand-accent: {accent};

  /* Typography from decisions */
  --brand-font: {font-stack};
  --brand-font-weight: {weight};
}

PNG Export

Use rsvg-convert for all SVG → PNG conversions:

bash

# Single file
rsvg-convert -w {width} -h {height} input.svg -o output.png

# Batch export script
./scripts/export-pngs.sh

File Structure

code

outputs/
├── svg/
│   ├── mark/
│   │   ├── mark-v3-transparent.svg
│   │   ├── mark-v3-80-dark.svg
│   │   ├── mark-v3-80-light.svg
│   │   ├── mark-v3-160-dark.svg
│   │   ├── mark-v3-400-dark.svg
│   │   └── ...
│   ├── social/
│   │   ├── twitter-banner-sm-1500x500-dark.svg
│   │   ├── twitter-banner-md-1500x500-dark.svg
│   │   ├── twitter-banner-lg-1500x500-dark.svg
│   │   ├── twitter-banner-xl-1500x500-dark.svg
│   │   ├── og-default-1200x630-dark.svg
│   │   ├── pfp-400-dark.svg
│   │   └── (light variants)
│   └── favicon/
│       ├── favicon-16-dark.svg
│       ├── favicon-32-dark.svg
│       └── ...
├── png/
│   ├── mark/
│   ├── social/
│   └── favicon/
└── css/
    └── global.css

Naming Conventions

code

{type}-{variant}-{size}-{theme}.{ext}

Examples:
mark-v3-80-dark.svg
twitter-banner-xl-1500x500-dark.svg
og-tagline-1200x630-dark.svg
favicon-32-dark.png

Error Handling

No Decisions Found

code

No brand decisions found.

Run /brand-architect first to:
1. Generate mark options
2. Select colors and typography
3. Record decisions

Then run /web-architect implement all.

Missing Dependencies

code

rsvg-convert not found.

PNG export requires librsvg. Install with:
  brew install librsvg   # macOS
  apt install librsvg2-bin  # Ubuntu

Incomplete Decisions

code

Brand decisions incomplete.

Missing:
- Primary mark selection
- Color palette

Update knowledge/BRAND_DECISIONS.md or run /brand-architect decide.

Code Auditing

React/Next.js Projects

For React or Next.js sites, use the react-best-practices skill:

code

/web-architect audit react

This runs the Vercel React Best Practices audit covering:

•Eliminating waterfalls (CRITICAL)
•Bundle size optimization (CRITICAL)
•Server-side performance (HIGH)
•Client-side data fetching (MEDIUM-HIGH)
•Re-render optimization (MEDIUM)
•Rendering performance (MEDIUM)
•JavaScript performance (LOW-MEDIUM)

See skills/react-best-practices/SKILL.md for full rule reference.

Static Sites

For static HTML sites:

code

/web-architect audit static

Checks:

•Asset optimization (images, SVGs)
•CSS best practices
•Accessibility basics
•Performance hints