mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-18 00:56:30 +03:00
Add FAQ section with accordion-style questions
Covers: - Where to put downloaded files (project vs global) - Troubleshooting missing commands/skills - Getting started resources for beginners Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
71d34aa31e
commit
bd76b63b8e
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
+53
-1
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user