diff --git a/public/css/workflow.css b/public/css/workflow.css
index 4de1a3d89..7e17eb64b 100644
--- a/public/css/workflow.css
+++ b/public/css/workflow.css
@@ -695,3 +695,119 @@
     width: 100%;
   }
 }
+
+/* ============================================
+   FAQ SECTION
+   ============================================ */
+
+.faq-section {
+  position: relative;
+  padding: var(--spacing-xl) 0;
+  border-top: 1px solid var(--color-mist);
+}
+
+.faq-list {
+  max-width: var(--width-content);
+  margin: var(--spacing-lg) auto 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.faq-item {
+  border-bottom: 1px solid var(--color-mist);
+}
+
+.faq-item:first-child {
+  border-top: 1px solid var(--color-mist);
+}
+
+.faq-question {
+  font-family: var(--font-display);
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: var(--color-ink);
+  padding: var(--spacing-md) 0;
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: color 0.2s ease;
+}
+
+.faq-question::-webkit-details-marker {
+  display: none;
+}
+
+.faq-question::after {
+  content: '+';
+  font-family: var(--font-body);
+  font-size: 1.5rem;
+  font-weight: 300;
+  color: var(--color-accent);
+  transition: transform 0.3s var(--ease-out);
+}
+
+.faq-item[open] .faq-question::after {
+  transform: rotate(45deg);
+}
+
+.faq-question:hover {
+  color: var(--color-accent);
+}
+
+.faq-answer {
+  padding: 0 0 var(--spacing-md);
+  color: var(--color-charcoal);
+  line-height: 1.7;
+  animation: faqFadeIn 0.3s var(--ease-out);
+}
+
+.faq-answer p {
+  margin: 0 0 var(--spacing-sm);
+}
+
+.faq-answer p:last-child {
+  margin-bottom: 0;
+}
+
+.faq-answer ul {
+  margin: var(--spacing-sm) 0;
+  padding-left: var(--spacing-md);
+}
+
+.faq-answer li {
+  margin-bottom: var(--spacing-xs);
+}
+
+.faq-answer code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--color-mist);
+  padding: 2px 6px;
+  border-radius: 3px;
+  color: var(--color-ink);
+}
+
+.faq-answer a {
+  color: var(--color-accent);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.2s ease;
+}
+
+.faq-answer a:hover {
+  border-bottom-color: var(--color-accent);
+}
+
+@keyframes faqFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/public/index.html b/public/index.html
index 33a8ca8e4..de7e95e92 100644
--- a/public/index.html
+++ b/public/index.html
@@ -418,7 +418,59 @@
       </div>
     </section>
 
-    <!-- 7. OPEN SOURCE -->
+    <!-- 7. FAQ -->
+    <section class="faq-section" id="faq">
+      <div class="section-header" data-reveal>
+        <span class="section-number">07</span>
+        <h2 class="section-title">Frequently Asked Questions</h2>
+      </div>
+
+      <div class="faq-list" data-reveal>
+        <details class="faq-item">
+          <summary class="faq-question">Where do I put the downloaded files?</summary>
+          <div class="faq-answer">
+            <p>Extract the ZIP to your <strong>project root</strong> (same level as your <code>package.json</code> or <code>src/</code> folder). The files should create a hidden folder like <code>.claude/</code>, <code>.cursor/</code>, <code>.gemini/</code>, or <code>.codex/</code>.</p>
+            <p>Alternatively, you can install <strong>globally</strong> to your home directory:</p>
+            <ul>
+              <li>Claude Code: <code>~/.claude/</code></li>
+              <li>Cursor: <code>~/.cursor/</code></li>
+              <li>Gemini CLI: <code>~/.gemini/</code></li>
+              <li>Codex CLI: <code>~/.codex/</code></li>
+            </ul>
+            <p>Project-level installation takes precedence and lets you version control your skills.</p>
+          </div>
+        </details>
+
+        <details class="faq-item">
+          <summary class="faq-question">Commands or skills aren't appearing. What do I do?</summary>
+          <div class="faq-answer">
+            <p><strong>For commands:</strong> Type <code>/</code> in your AI tool and look for commands like <code>/audit</code>, <code>/polish</code>, etc. If they don't appear, double-check the files are in the correct location.</p>
+            <p><strong>For skills:</strong> Skills are applied automatically when relevant. To verify, explicitly mention "use the frontend-design skill" in your prompt—this forces the AI to acknowledge and apply it.</p>
+            <p><strong>Tool-specific setup:</strong></p>
+            <ul>
+              <li><strong>Cursor:</strong> Requires Nightly channel + Agent Skills enabled in Settings → Rules</li>
+              <li><strong>Gemini CLI:</strong> Requires <code>@google/gemini-cli@preview</code> + Skills enabled via <code>/settings</code></li>
+            </ul>
+          </div>
+        </details>
+
+        <details class="faq-item">
+          <summary class="faq-question">I'm new to AI coding tools. Where do I start?</summary>
+          <div class="faq-answer">
+            <p>Skills and commands are intermediate features. If you're just getting started, learn the basics first:</p>
+            <ul>
+              <li><strong>Claude Code:</strong> <a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank" rel="noopener">Official Documentation</a></li>
+              <li><strong>Cursor:</strong> <a href="https://docs.cursor.com" target="_blank" rel="noopener">Cursor Docs</a></li>
+              <li><strong>Gemini CLI:</strong> <a href="https://geminicli.com/docs/" target="_blank" rel="noopener">Gemini CLI Docs</a></li>
+              <li><strong>Codex CLI:</strong> <a href="https://github.com/openai/codex" target="_blank" rel="noopener">Codex GitHub</a></li>
+            </ul>
+            <p>Once you're comfortable with basic prompting and code generation, come back and install Impeccable to level up your design output.</p>
+          </div>
+        </details>
+      </div>
+    </section>
+
+    <!-- 8. OPEN SOURCE -->
     <section class="opensource-section" id="opensource">
       <div class="opensource-content" data-reveal>
         <h2 class="opensource-title">Open Source</h2>