Redesign website with interactive demos and improved layout

- Add interactive before/after demos for all skills (UX Writing, Spatial Design, Motion Design, Typography, Interaction Design, Color & Contrast, Responsive Design)
- Implement tabbed demo navigation for skills with multiple examples
- Refactor app.js into modular JS files (skills.js, commands.js, data.js, skill-demos.js, command-demos.js, demo-toggles.js)
- Add new CSS modules (skill-demos.css, workflow.css, problem-section.css, solution-section.css)
- Redesign commands section with sidebar nav matching skills layout
- Replace large download buttons with compact icon buttons
- Fix gray-on-pink color clashing throughout UI
- Remove frontend-design skill (Anthropic's work, not ours)
- Format skill names properly (e.g., 'UX Writing' not 'ux-writing')
- Remove redundant 'Combines Well With' from skills
- Add 'The Problem' and 'The Solution' sections to homepage
- Various CSS fixes for buttons, backgrounds, and spacing

public/css/solution-section.css

@@ -0,0 +1,96 @@
+/**
+ * Solution Section - Skills + Commands explanation
+ */
+
+.solution-section {
+  padding: var(--s-2xl) 0;
+  border-top: 1px solid var(--c-mist);
+}
+
+.solution-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--s-xl);
+}
+
+.solution-content {
+  max-width: 680px;
+}
+
+.solution-content .section-title {
+  margin-bottom: var(--s-md);
+}
+
+.solution-lead {
+  font-size: 1.375rem;
+  line-height: 1.6;
+  color: var(--c-charcoal);
+}
+
+.solution-lead strong {
+  color: var(--c-text);
+  font-weight: 600;
+}
+
+/* Solution Cards - Side by side */
+.solution-cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--s-lg);
+  
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.solution-card {
+  padding: var(--s-lg);
+  background: var(--c-paper);
+  border-left: 3px solid var(--c-accent);
+  transition: all var(--duration-base) var(--ease-out);
+}
+
+.solution-card:hover {
+  background: color-mix(in oklch, var(--c-paper) 90%, var(--c-accent));
+  transform: translateX(4px);
+}
+
+.solution-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--s-md);
+  color: var(--c-accent);
+}
+
+.solution-card h3 {
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 400;
+  margin: 0 0 var(--s-sm) 0;
+  color: var(--c-text);
+}
+
+.solution-card p {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--c-ash);
+  margin: 0;
+}
+
+.solution-card code {
+  font-family: 'Space Grotesk', monospace;
+  font-size: 0.875em;
+  background: color-mix(in oklch, var(--c-accent) 15%, transparent);
+  color: var(--c-accent);
+  padding: 0.125em 0.375em;
+  border-radius: 3px;
+}
+
+.solution-card em {
+  font-style: italic;
+  color: var(--c-charcoal);
+}
+