Web Architect

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

/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

/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

/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:

# 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 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:

: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:

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

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

File Structure

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

{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

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

rsvg-convert not found.

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

Incomplete Decisions

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:

/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:

/web-architect audit static

Checks:

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