mirror of
https://github.com/duthaho/claudekit.git
synced 2026-06-10 20:24:57 +03:00
refactor: Improved CSS styles for a cohesive theme and better responsiveness
This commit is contained in:
duthaho
@@ -1,72 +0,0 @@
|
||||
name: Deploy to GitHub Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
paths:
|
||||
- 'website/**'
|
||||
- '.github/workflows/deploy.yml'
|
||||
workflow_dispatch:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "20"
|
||||
|
||||
- name: Setup pnpm
|
||||
uses: pnpm/action-setup@v3
|
||||
with:
|
||||
version: 9
|
||||
|
||||
- name: Get pnpm store directory
|
||||
shell: bash
|
||||
run: |
|
||||
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
|
||||
|
||||
- name: Setup pnpm cache
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: ${{ env.STORE_PATH }}
|
||||
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('website/pnpm-lock.yaml') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-pnpm-store-
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
working-directory: ./website
|
||||
|
||||
- name: Build website
|
||||
run: pnpm build
|
||||
working-directory: ./website
|
||||
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: ./website/dist
|
||||
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
needs: build
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
@@ -5,8 +5,7 @@ import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: 'https://duthaho.github.io',
|
||||
base: '/claudekit',
|
||||
site: 'https://claudekit.duthaho.dev',
|
||||
integrations: [
|
||||
starlight({
|
||||
title: 'Claude Kit',
|
||||
@@ -21,10 +20,18 @@ export default defineConfig({
|
||||
},
|
||||
head: [
|
||||
{
|
||||
tag: 'meta',
|
||||
tag: 'link',
|
||||
attrs: { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
|
||||
},
|
||||
{
|
||||
tag: 'link',
|
||||
attrs: { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
|
||||
},
|
||||
{
|
||||
tag: 'link',
|
||||
attrs: {
|
||||
property: 'og:image',
|
||||
content: 'https://duthaho.github.io/claudekit/og-image.png',
|
||||
rel: 'stylesheet',
|
||||
href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@@ -1,46 +1,63 @@
|
||||
<svg width="400" height="300" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Background terminal window -->
|
||||
<rect x="20" y="20" width="360" height="260" rx="12" fill="#0f172a" stroke="#1e293b" stroke-width="2"/>
|
||||
|
||||
<!-- Terminal header -->
|
||||
<rect x="20" y="20" width="360" height="32" rx="12" fill="#1e293b"/>
|
||||
<rect x="20" y="40" width="360" height="12" fill="#1e293b"/>
|
||||
<circle cx="40" cy="36" r="6" fill="#ef4444"/>
|
||||
<circle cx="60" cy="36" r="6" fill="#eab308"/>
|
||||
<circle cx="80" cy="36" r="6" fill="#22c55e"/>
|
||||
|
||||
<!-- Terminal content -->
|
||||
<text x="40" y="80" font-family="monospace" font-size="14" fill="#64748b">$</text>
|
||||
<text x="55" y="80" font-family="monospace" font-size="14" fill="#06b6d4">/feature</text>
|
||||
<text x="125" y="80" font-family="monospace" font-size="14" fill="#94a3b8">"add user authentication"</text>
|
||||
|
||||
<!-- Progress indicators -->
|
||||
<text x="40" y="110" font-family="monospace" font-size="12" fill="#22c55e">✓</text>
|
||||
<text x="58" y="110" font-family="monospace" font-size="12" fill="#94a3b8">Planning feature...</text>
|
||||
|
||||
<text x="40" y="135" font-family="monospace" font-size="12" fill="#22c55e">✓</text>
|
||||
<text x="58" y="135" font-family="monospace" font-size="12" fill="#94a3b8">Implementing auth service...</text>
|
||||
|
||||
<text x="40" y="160" font-family="monospace" font-size="12" fill="#22c55e">✓</text>
|
||||
<text x="58" y="160" font-family="monospace" font-size="12" fill="#94a3b8">Writing tests...</text>
|
||||
|
||||
<text x="40" y="185" font-family="monospace" font-size="12" fill="#22c55e">✓</text>
|
||||
<text x="58" y="185" font-family="monospace" font-size="12" fill="#94a3b8">Code review passed</text>
|
||||
|
||||
<text x="40" y="210" font-family="monospace" font-size="12" fill="#06b6d4">✓</text>
|
||||
<text x="58" y="210" font-family="monospace" font-size="12" fill="#06b6d4">Feature complete!</text>
|
||||
|
||||
<!-- Cursor -->
|
||||
<rect x="40" y="235" width="8" height="16" fill="#06b6d4" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.8;0;0.8" dur="1s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
|
||||
<!-- Decorative glow -->
|
||||
<svg width="400" height="300" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="The six-phase Claude Kit workflow: Think, Review, Build, Ship, Maintain, Setup">
|
||||
<defs>
|
||||
<radialGradient id="glow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#06b6d4" stop-opacity="0.2"/>
|
||||
<stop offset="100%" stop-color="#06b6d4" stop-opacity="0"/>
|
||||
<radialGradient id="glow-d" cx="50%" cy="45%" r="55%">
|
||||
<stop offset="0%" stop-color="#fbbf24" stop-opacity="0.16"/>
|
||||
<stop offset="100%" stop-color="#fbbf24" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<ellipse cx="200" cy="150" rx="180" ry="120" fill="url(#glow)"/>
|
||||
|
||||
<!-- Ambient wash -->
|
||||
<ellipse cx="200" cy="140" rx="200" ry="130" fill="url(#glow-d)"/>
|
||||
|
||||
<!-- Phase labels (row 1) -->
|
||||
<g font-family="'IBM Plex Mono', ui-monospace, monospace" font-size="11" font-weight="500" letter-spacing="0.08em" fill="#a8a29e" text-anchor="middle">
|
||||
<text x="70" y="80">THINK</text>
|
||||
<text x="200" y="80">REVIEW</text>
|
||||
<text x="330" y="80">BUILD</text>
|
||||
</g>
|
||||
|
||||
<!-- Phase numbers (row 1) -->
|
||||
<g font-family="'IBM Plex Mono', ui-monospace, monospace" font-size="9" font-weight="500" fill="#57534e" text-anchor="middle">
|
||||
<text x="70" y="64">01</text>
|
||||
<text x="200" y="64">02</text>
|
||||
<text x="330" y="64">03</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 1 connector line -->
|
||||
<line x1="82" y1="110" x2="188" y2="110" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="2 3"/>
|
||||
<line x1="212" y1="110" x2="318" y2="110" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="2 3"/>
|
||||
|
||||
<!-- Row 1 nodes -->
|
||||
<circle cx="70" cy="110" r="7" fill="#0a0f0a" stroke="#fbbf24" stroke-width="2"/>
|
||||
<circle cx="200" cy="110" r="7" fill="#0a0f0a" stroke="#fbbf24" stroke-width="2"/>
|
||||
<circle cx="330" cy="110" r="7" fill="#fbbf24"/>
|
||||
|
||||
<!-- Elbow: Build (3) -> Ship (4) -->
|
||||
<path d="M 337 110 Q 360 110 360 150 Q 360 190 337 190" fill="none" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="2 3"/>
|
||||
|
||||
<!-- Row 2 connector line -->
|
||||
<line x1="318" y1="190" x2="212" y2="190" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="2 3"/>
|
||||
<line x1="188" y1="190" x2="82" y2="190" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="2 3"/>
|
||||
|
||||
<!-- Row 2 nodes -->
|
||||
<circle cx="330" cy="190" r="7" fill="#0a0f0a" stroke="#fbbf24" stroke-width="2"/>
|
||||
<circle cx="200" cy="190" r="7" fill="#0a0f0a" stroke="#fbbf24" stroke-width="2"/>
|
||||
<circle cx="70" cy="190" r="7" fill="#0a0f0a" stroke="#fbbf24" stroke-width="2"/>
|
||||
|
||||
<!-- Phase labels (row 2) -->
|
||||
<g font-family="'IBM Plex Mono', ui-monospace, monospace" font-size="11" font-weight="500" letter-spacing="0.08em" fill="#a8a29e" text-anchor="middle">
|
||||
<text x="330" y="222">SHIP</text>
|
||||
<text x="200" y="222">MAINTAIN</text>
|
||||
<text x="70" y="222">SETUP</text>
|
||||
</g>
|
||||
|
||||
<!-- Phase numbers (row 2) -->
|
||||
<g font-family="'IBM Plex Mono', ui-monospace, monospace" font-size="9" font-weight="500" fill="#57534e" text-anchor="middle">
|
||||
<text x="330" y="238">04</text>
|
||||
<text x="200" y="238">05</text>
|
||||
<text x="70" y="238">06</text>
|
||||
</g>
|
||||
|
||||
<!-- Footer inscription -->
|
||||
<text x="200" y="270" font-family="'IBM Plex Mono', ui-monospace, monospace" font-size="10" font-weight="400" letter-spacing="0.12em" fill="#57534e" text-anchor="middle">35 SKILLS · 24 AGENTS · 7 MODES</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 3.1 KiB |
@@ -1,46 +1,63 @@
|
||||
<svg width="400" height="300" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Background terminal window -->
|
||||
<rect x="20" y="20" width="360" height="260" rx="12" fill="#f8fafc" stroke="#e2e8f0" stroke-width="2"/>
|
||||
|
||||
<!-- Terminal header -->
|
||||
<rect x="20" y="20" width="360" height="32" rx="12" fill="#f1f5f9"/>
|
||||
<rect x="20" y="40" width="360" height="12" fill="#f1f5f9"/>
|
||||
<circle cx="40" cy="36" r="6" fill="#ef4444"/>
|
||||
<circle cx="60" cy="36" r="6" fill="#eab308"/>
|
||||
<circle cx="80" cy="36" r="6" fill="#22c55e"/>
|
||||
|
||||
<!-- Terminal content -->
|
||||
<text x="40" y="80" font-family="monospace" font-size="14" fill="#94a3b8">$</text>
|
||||
<text x="55" y="80" font-family="monospace" font-size="14" fill="#0891b2">/feature</text>
|
||||
<text x="125" y="80" font-family="monospace" font-size="14" fill="#475569">"add user authentication"</text>
|
||||
|
||||
<!-- Progress indicators -->
|
||||
<text x="40" y="110" font-family="monospace" font-size="12" fill="#22c55e">✓</text>
|
||||
<text x="58" y="110" font-family="monospace" font-size="12" fill="#475569">Planning feature...</text>
|
||||
|
||||
<text x="40" y="135" font-family="monospace" font-size="12" fill="#22c55e">✓</text>
|
||||
<text x="58" y="135" font-family="monospace" font-size="12" fill="#475569">Implementing auth service...</text>
|
||||
|
||||
<text x="40" y="160" font-family="monospace" font-size="12" fill="#22c55e">✓</text>
|
||||
<text x="58" y="160" font-family="monospace" font-size="12" fill="#475569">Writing tests...</text>
|
||||
|
||||
<text x="40" y="185" font-family="monospace" font-size="12" fill="#22c55e">✓</text>
|
||||
<text x="58" y="185" font-family="monospace" font-size="12" fill="#475569">Code review passed</text>
|
||||
|
||||
<text x="40" y="210" font-family="monospace" font-size="12" fill="#0891b2">✓</text>
|
||||
<text x="58" y="210" font-family="monospace" font-size="12" fill="#0891b2">Feature complete!</text>
|
||||
|
||||
<!-- Cursor -->
|
||||
<rect x="40" y="235" width="8" height="16" fill="#0891b2" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.8;0;0.8" dur="1s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
|
||||
<!-- Decorative glow -->
|
||||
<svg width="400" height="300" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="The six-phase Claude Kit workflow: Think, Review, Build, Ship, Maintain, Setup">
|
||||
<defs>
|
||||
<radialGradient id="glow-light" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#0891b2" stop-opacity="0.1"/>
|
||||
<stop offset="100%" stop-color="#0891b2" stop-opacity="0"/>
|
||||
<radialGradient id="glow-l" cx="50%" cy="45%" r="55%">
|
||||
<stop offset="0%" stop-color="#d97706" stop-opacity="0.10"/>
|
||||
<stop offset="100%" stop-color="#d97706" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<ellipse cx="200" cy="150" rx="180" ry="120" fill="url(#glow-light)"/>
|
||||
|
||||
<!-- Ambient wash -->
|
||||
<ellipse cx="200" cy="140" rx="200" ry="130" fill="url(#glow-l)"/>
|
||||
|
||||
<!-- Phase labels (row 1, above nodes) -->
|
||||
<g font-family="'IBM Plex Mono', ui-monospace, monospace" font-size="11" font-weight="500" letter-spacing="0.08em" fill="#57534e" text-anchor="middle">
|
||||
<text x="70" y="80">THINK</text>
|
||||
<text x="200" y="80">REVIEW</text>
|
||||
<text x="330" y="80">BUILD</text>
|
||||
</g>
|
||||
|
||||
<!-- Phase numbers (row 1) -->
|
||||
<g font-family="'IBM Plex Mono', ui-monospace, monospace" font-size="9" font-weight="500" fill="#a8a29e" text-anchor="middle">
|
||||
<text x="70" y="64">01</text>
|
||||
<text x="200" y="64">02</text>
|
||||
<text x="330" y="64">03</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 1 connector line -->
|
||||
<line x1="82" y1="110" x2="188" y2="110" stroke="#d97706" stroke-width="1.5" stroke-dasharray="2 3"/>
|
||||
<line x1="212" y1="110" x2="318" y2="110" stroke="#d97706" stroke-width="1.5" stroke-dasharray="2 3"/>
|
||||
|
||||
<!-- Row 1 nodes -->
|
||||
<circle cx="70" cy="110" r="7" fill="#fffbeb" stroke="#d97706" stroke-width="2"/>
|
||||
<circle cx="200" cy="110" r="7" fill="#fffbeb" stroke="#d97706" stroke-width="2"/>
|
||||
<circle cx="330" cy="110" r="7" fill="#d97706"/>
|
||||
|
||||
<!-- Elbow: Build (3) -> Ship (4) -->
|
||||
<path d="M 337 110 Q 360 110 360 150 Q 360 190 337 190" fill="none" stroke="#d97706" stroke-width="1.5" stroke-dasharray="2 3"/>
|
||||
|
||||
<!-- Row 2 connector line -->
|
||||
<line x1="318" y1="190" x2="212" y2="190" stroke="#d97706" stroke-width="1.5" stroke-dasharray="2 3"/>
|
||||
<line x1="188" y1="190" x2="82" y2="190" stroke="#d97706" stroke-width="1.5" stroke-dasharray="2 3"/>
|
||||
|
||||
<!-- Row 2 nodes -->
|
||||
<circle cx="330" cy="190" r="7" fill="#fffbeb" stroke="#d97706" stroke-width="2"/>
|
||||
<circle cx="200" cy="190" r="7" fill="#fffbeb" stroke="#d97706" stroke-width="2"/>
|
||||
<circle cx="70" cy="190" r="7" fill="#fffbeb" stroke="#d97706" stroke-width="2"/>
|
||||
|
||||
<!-- Phase labels (row 2, below nodes) -->
|
||||
<g font-family="'IBM Plex Mono', ui-monospace, monospace" font-size="11" font-weight="500" letter-spacing="0.08em" fill="#57534e" text-anchor="middle">
|
||||
<text x="330" y="222">SHIP</text>
|
||||
<text x="200" y="222">MAINTAIN</text>
|
||||
<text x="70" y="222">SETUP</text>
|
||||
</g>
|
||||
|
||||
<!-- Phase numbers (row 2) -->
|
||||
<g font-family="'IBM Plex Mono', ui-monospace, monospace" font-size="9" font-weight="500" fill="#a8a29e" text-anchor="middle">
|
||||
<text x="330" y="238">04</text>
|
||||
<text x="200" y="238">05</text>
|
||||
<text x="70" y="238">06</text>
|
||||
</g>
|
||||
|
||||
<!-- Footer inscription -->
|
||||
<text x="200" y="270" font-family="'IBM Plex Mono', ui-monospace, monospace" font-size="10" font-weight="400" letter-spacing="0.12em" fill="#a8a29e" text-anchor="middle">35 SKILLS · 24 AGENTS · 7 MODES</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 3.1 KiB |
@@ -1,14 +1,10 @@
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Terminal icon -->
|
||||
<rect x="2" y="4" width="24" height="18" rx="3" stroke="#06b6d4" stroke-width="2" fill="none"/>
|
||||
<path d="M7 11L11 14L7 17" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line x1="13" y1="17" x2="19" y2="17" stroke="#06b6d4" stroke-width="2" stroke-linecap="round"/>
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Claude Kit">
|
||||
<!-- Phase-spine mark: three progressing dots, rightmost = active -->
|
||||
<circle cx="6" cy="16" r="2.5" fill="#fbbf24" opacity="0.3"/>
|
||||
<circle cx="14" cy="16" r="2.5" fill="#fbbf24" opacity="0.6"/>
|
||||
<circle cx="22" cy="16" r="2.5" fill="#fbbf24"/>
|
||||
|
||||
<!-- Text: Claude Kit -->
|
||||
<text x="34" y="19" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#f8fafc">
|
||||
Claude
|
||||
</text>
|
||||
<text x="90" y="19" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#06b6d4">
|
||||
Kit
|
||||
</text>
|
||||
<!-- Wordmark -->
|
||||
<text x="34" y="21" font-family="'IBM Plex Sans', system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" letter-spacing="-0.01em" fill="#f5f5f4">Claude</text>
|
||||
<text x="95" y="21" font-family="'IBM Plex Sans', system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" letter-spacing="-0.01em" fill="#fbbf24">Kit</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 751 B After Width: | Height: | Size: 764 B |
@@ -1,14 +1,10 @@
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Terminal icon -->
|
||||
<rect x="2" y="4" width="24" height="18" rx="3" stroke="#0891b2" stroke-width="2" fill="none"/>
|
||||
<path d="M7 11L11 14L7 17" stroke="#0891b2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line x1="13" y1="17" x2="19" y2="17" stroke="#0891b2" stroke-width="2" stroke-linecap="round"/>
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Claude Kit">
|
||||
<!-- Phase-spine mark: three progressing dots, rightmost = active -->
|
||||
<circle cx="6" cy="16" r="2.5" fill="#d97706" opacity="0.3"/>
|
||||
<circle cx="14" cy="16" r="2.5" fill="#d97706" opacity="0.6"/>
|
||||
<circle cx="22" cy="16" r="2.5" fill="#d97706"/>
|
||||
|
||||
<!-- Text: Claude Kit -->
|
||||
<text x="34" y="19" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#0f172a">
|
||||
Claude
|
||||
</text>
|
||||
<text x="90" y="19" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#0891b2">
|
||||
Kit
|
||||
</text>
|
||||
<!-- Wordmark -->
|
||||
<text x="34" y="21" font-family="'IBM Plex Sans', system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" letter-spacing="-0.01em" fill="#1c1917">Claude</text>
|
||||
<text x="95" y="21" font-family="'IBM Plex Sans', system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" letter-spacing="-0.01em" fill="#d97706">Kit</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 751 B After Width: | Height: | Size: 764 B |
@@ -207,6 +207,6 @@ Or reference the mode-switching skill keywords.
|
||||
|
||||
## Related Pages
|
||||
|
||||
- [Agents Reference](/claudekit/reference/agents/) — All 24 built-in agents
|
||||
- [Modes Reference](/claudekit/reference/modes/) — All 7 built-in modes
|
||||
- [Creating Skills](/claudekit/customization/creating-skills/) — Custom skill creation
|
||||
- [Agents Reference](/reference/agents/) — All 24 built-in agents
|
||||
- [Modes Reference](/reference/modes/) — All 7 built-in modes
|
||||
- [Creating Skills](/customization/creating-skills/) — Custom skill creation
|
||||
|
||||
@@ -190,5 +190,5 @@ description: Use when deploying to Fly.io or configuring Fly.io
|
||||
|
||||
## Related Pages
|
||||
|
||||
- [Skills Reference](/claudekit/reference/skills/) — All 35 built-in skills
|
||||
- [Creating Agents & Modes](/claudekit/customization/creating-agents-and-modes/) — Custom agents and modes
|
||||
- [Skills Reference](/reference/skills/) — All 35 built-in skills
|
||||
- [Creating Agents & Modes](/customization/creating-agents-and-modes/) — Custom agents and modes
|
||||
|
||||
@@ -124,6 +124,6 @@ You can customize agent behavior in your CLAUDE.md:
|
||||
|
||||
## Next Steps
|
||||
|
||||
- [Workflows](/claudekit/workflows/planning-and-building/) — See how skills work together
|
||||
- [Skills Reference](/claudekit/reference/skills/) — Browse all 35 skills
|
||||
- [Creating Skills](/claudekit/customization/creating-skills/) — Build your own
|
||||
- [Workflows](/workflows/planning-and-building/) — See how skills work together
|
||||
- [Skills Reference](/reference/skills/) — Browse all 35 skills
|
||||
- [Creating Skills](/customization/creating-skills/) — Build your own
|
||||
|
||||
@@ -114,5 +114,5 @@ Make sure you've added the marketplace first:
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. [Configuration](/claudekit/getting-started/configuration/) — Customize rules, modes, and more via `/claudekit:init`
|
||||
2. [Workflows](/claudekit/workflows/planning-and-building/) — See how skills work together
|
||||
1. [Configuration](/getting-started/configuration/) — Customize rules, modes, and more via `/claudekit:init`
|
||||
2. [Workflows](/workflows/planning-and-building/) — See how skills work together
|
||||
|
||||
@@ -61,6 +61,6 @@ No slash commands needed — Claude reads your intent and activates the right sk
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. [Install Claude Kit](/claudekit/getting-started/installation/) — Install the plugin
|
||||
2. [Configuration](/claudekit/getting-started/configuration/) — Run `/claudekit:init` to customize
|
||||
3. [Skills Reference](/claudekit/reference/skills/) — Browse all 35 skills
|
||||
1. [Install Claude Kit](/getting-started/installation/) — Install the plugin
|
||||
2. [Configuration](/getting-started/configuration/) — Run `/claudekit:init` to customize
|
||||
3. [Skills Reference](/reference/skills/) — Browse all 35 skills
|
||||
|
||||
@@ -3,13 +3,13 @@ title: Claude Kit
|
||||
description: The development-workflow plugin for Claude Code. 35 skills across a 6-phase workflow, 24 agents, 7 modes — install as a plugin and go. Free forever.
|
||||
template: splash
|
||||
hero:
|
||||
tagline: The development-workflow plugin for Claude Code. 35 skills across a 6-phase workflow, 24 agents, 7 modes — install as a plugin and go. Free forever.
|
||||
tagline: A development-workflow plugin for Claude Code. 35 skills across a 6-phase spine — Think, Review, Build, Ship, Maintain, Setup — plus 24 agents and 7 modes. Free, open source.
|
||||
image:
|
||||
dark: ../../assets/hero-dark.svg
|
||||
light: ../../assets/hero-light.svg
|
||||
actions:
|
||||
- text: Get Started
|
||||
link: /claudekit/getting-started/introduction/
|
||||
link: /getting-started/introduction/
|
||||
icon: right-arrow
|
||||
variant: primary
|
||||
- text: View on GitHub
|
||||
@@ -20,30 +20,32 @@ hero:
|
||||
|
||||
import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
|
||||
|
||||
## Ship Faster. For Free.
|
||||
|
||||
Claude Kit transforms Claude Code into a production-ready AI development team. Pre-built skills, specialized agents, and intelligent modes — all open source.
|
||||
## Four layers, one plugin
|
||||
|
||||
<CardGrid>
|
||||
<Card title="35 Skills" icon="puzzle">
|
||||
A 6-phase workflow spine (Think → Review → Build → Ship → Maintain → Setup). 13 user-invocable spine skills plus 22 supporting skills that auto-trigger by context.
|
||||
</Card>
|
||||
<Card title="24 Agents" icon="rocket">
|
||||
Specialized subagents for code review, testing, database design, security auditing, UI/UX, plan review, and more — each with focused expertise.
|
||||
</Card>
|
||||
<Card title="7 Modes" icon="setting">
|
||||
Switch between brainstorm, implementation, review, deep research, and more. Each mode optimizes Claude's behavior for your task.
|
||||
</Card>
|
||||
<Card title="MCP Servers" icon="external">
|
||||
Real-time docs via Context7, persistent memory, browser testing, and structured reasoning via Model Context Protocol.
|
||||
</Card>
|
||||
<LinkCard
|
||||
title="35 Skills"
|
||||
description="A 6-phase workflow spine. 13 user-invocable spine skills, plus 22 that auto-trigger by context."
|
||||
href="/reference/skills/"
|
||||
/>
|
||||
<LinkCard
|
||||
title="24 Agents"
|
||||
description="Specialized subagents for code review, testing, database design, security audits, plan review, and more."
|
||||
href="/reference/agents/"
|
||||
/>
|
||||
<LinkCard
|
||||
title="7 Modes"
|
||||
description="Behavioral configurations — brainstorm, implementation, review, deep-research, and more."
|
||||
href="/reference/modes/"
|
||||
/>
|
||||
<LinkCard
|
||||
title="MCP Servers"
|
||||
description="Optional integrations: real-time library docs, persistent memory, browser automation, structured reasoning."
|
||||
href="/reference/mcp-servers/"
|
||||
/>
|
||||
</CardGrid>
|
||||
|
||||
---
|
||||
|
||||
## Quick Start
|
||||
|
||||
Get up and running in under 2 minutes:
|
||||
## Install in 2 minutes
|
||||
|
||||
```bash
|
||||
# Add the marketplace
|
||||
@@ -56,106 +58,43 @@ Get up and running in under 2 minutes:
|
||||
/claudekit:init
|
||||
```
|
||||
|
||||
Skills trigger automatically based on what you're doing. Ask Claude to brainstorm a feature, write a plan, debug an error, or review code — the right skills activate without any commands needed.
|
||||
Skills trigger automatically based on what you're doing. Ask Claude to brainstorm a feature, write a plan, debug an error, or review code — the right skills activate without any commands.
|
||||
|
||||
---
|
||||
## Why Claude Kit
|
||||
|
||||
## Why Claude Kit?
|
||||
Raw Claude Code is powerful but brittle. Long sessions spiral, output quality drifts between runs, every session starts from scratch, and Claude has no built-in sense of your team's patterns.
|
||||
|
||||
### The Problem
|
||||
| Problem | What Claude Kit adds |
|
||||
|---------|----------------------|
|
||||
| Context spirals | Fresh subagents per task; structured 6-phase flow |
|
||||
| Inconsistent output | TDD enforcement + verification-before-completion gates |
|
||||
| No structure | Skills that auto-trigger on intent, not slash commands |
|
||||
| Missing expertise | 24 specialized agents; project-level rules and modes |
|
||||
|
||||
Working with Claude Code is powerful, but raw Claude has limitations:
|
||||
## The 6-phase workflow
|
||||
|
||||
- **Context Spirals** — Token budgets run out, context gets lost mid-task
|
||||
- **Inconsistent Output** — Quality varies between sessions
|
||||
- **No Structure** — Every session starts from scratch
|
||||
- **Missing Expertise** — Claude doesn't know your team's patterns and standards
|
||||
| Phase | What happens | Example skills |
|
||||
|-------|-------------|----------------|
|
||||
| **Think** | Clarify the problem, pick an approach | `brainstorming`, `writing-plans` |
|
||||
| **Review** | Pressure-test the plan before coding | `autoplan`, `plan-eng-review`, `plan-ceo-review` |
|
||||
| **Build** | Execute with TDD, dispatch subagents, verify | `feature-workflow`, `test-driven-development` |
|
||||
| **Ship** | Commit, review, PR, changelog | `finishing-a-development-branch`, `git-workflows` |
|
||||
| **Maintain** | Debug, refactor, trace root causes | `systematic-debugging`, `root-cause-tracing` |
|
||||
| **Setup** | Install rules, modes, hooks, MCP | `init` |
|
||||
|
||||
### The Solution
|
||||
[Explore the workflows →](/workflows/planning-and-building/)
|
||||
|
||||
Claude Kit provides the structure, patterns, and automation that makes Claude Code production-ready:
|
||||
|
||||
<CardGrid>
|
||||
<Card title="Auto-Triggered Skills" icon="puzzle">
|
||||
Say "fix this bug" and the systematic-debugging skill activates. Say "plan this feature" and brainstorming + writing-plans kick in. No commands to memorize.
|
||||
</Card>
|
||||
<Card title="Specialized Agents" icon="rocket">
|
||||
Delegate code review, security audits, testing, and documentation to focused subagents that work in parallel.
|
||||
</Card>
|
||||
<Card title="Consistent Quality" icon="approve-check">
|
||||
Built-in TDD enforcement, verification before completion, and code review workflows ensure every output meets your standards.
|
||||
</Card>
|
||||
<Card title="Fully Customizable" icon="pencil">
|
||||
Add your own skills, agents, and modes. Claude Kit is a template, not a black box.
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
---
|
||||
|
||||
## How It Works
|
||||
|
||||
Claude Kit uses three layers that work together:
|
||||
## Ready to ship faster?
|
||||
|
||||
<CardGrid>
|
||||
<LinkCard
|
||||
title="Skills"
|
||||
description="35 skills organized around a 6-phase workflow. 13 spine skills user-invocable as /claudekit:<name>, plus supporting skills that auto-trigger behind the scenes."
|
||||
href="/claudekit/reference/skills/"
|
||||
title="Installation"
|
||||
description="Step-by-step setup for your first project."
|
||||
href="/getting-started/installation/"
|
||||
/>
|
||||
<LinkCard
|
||||
title="Agents"
|
||||
description="24 specialized subagents you can dispatch for focused tasks: code review, testing, database design, security audits, plan review, and more."
|
||||
href="/claudekit/reference/agents/"
|
||||
/>
|
||||
<LinkCard
|
||||
title="Modes"
|
||||
description="7 behavioral configurations that change how Claude communicates and solves problems: brainstorm, implementation, review, and more."
|
||||
href="/claudekit/reference/modes/"
|
||||
/>
|
||||
<LinkCard
|
||||
title="MCP Servers"
|
||||
description="Optional integrations for real-time library docs, persistent memory, browser automation, and structured reasoning."
|
||||
href="/claudekit/reference/mcp-servers/"
|
||||
/>
|
||||
</CardGrid>
|
||||
|
||||
---
|
||||
|
||||
## Development Workflows
|
||||
|
||||
Claude Kit connects skills and agents into complete workflows:
|
||||
|
||||
| Workflow | What Happens |
|
||||
|----------|-------------|
|
||||
| **Planning & Building** | Brainstorm requirements, write implementation plans, execute with subagents |
|
||||
| **Testing & Debugging** | TDD enforcement, systematic debugging, root cause tracing, verification |
|
||||
| **Reviewing & Shipping** | Code review, git workflows, PR creation, changelog generation |
|
||||
|
||||
[Explore workflows →](/claudekit/workflows/planning-and-building/)
|
||||
|
||||
---
|
||||
|
||||
## Ready to Ship Faster?
|
||||
|
||||
<CardGrid>
|
||||
<LinkCard
|
||||
title="Installation Guide"
|
||||
description="Step-by-step setup for your project"
|
||||
href="/claudekit/getting-started/installation/"
|
||||
/>
|
||||
<LinkCard
|
||||
title="Skills Reference"
|
||||
description="All 35 skills organized by workflow phase"
|
||||
href="/claudekit/reference/skills/"
|
||||
/>
|
||||
<LinkCard
|
||||
title="Agents Reference"
|
||||
description="All 24 specialized subagents"
|
||||
href="/claudekit/reference/agents/"
|
||||
/>
|
||||
<LinkCard
|
||||
title="Customization"
|
||||
description="Create your own skills, agents, and modes"
|
||||
href="/claudekit/customization/creating-skills/"
|
||||
title="Create your own skills"
|
||||
description="Add project-specific skills, agents, and modes."
|
||||
href="/customization/creating-skills/"
|
||||
/>
|
||||
</CardGrid>
|
||||
|
||||
@@ -174,4 +174,4 @@ Claude coordinates multiple agents:
|
||||
|
||||
## Customizing Modes
|
||||
|
||||
After running `/claudekit:init`, mode files are markdown in `.claude/modes/`. You can edit the installed modes or create new ones. See [Creating Agents & Modes](/claudekit/customization/creating-agents-and-modes/) for details.
|
||||
After running `/claudekit:init`, mode files are markdown in `.claude/modes/`. You can edit the installed modes or create new ones. See [Creating Agents & Modes](/customization/creating-agents-and-modes/) for details.
|
||||
|
||||
@@ -192,6 +192,6 @@ These skills activate automatically during planning and building:
|
||||
|
||||
## Related Pages
|
||||
|
||||
- [Testing & Debugging](/claudekit/workflows/testing-and-debugging/) — TDD and debugging workflows
|
||||
- [Reviewing & Shipping](/claudekit/workflows/reviewing-and-shipping/) — Code review and git workflows
|
||||
- [Skills Reference](/claudekit/reference/skills/) — All 35 skills
|
||||
- [Testing & Debugging](/workflows/testing-and-debugging/) — TDD and debugging workflows
|
||||
- [Reviewing & Shipping](/workflows/reviewing-and-shipping/) — Code review and git workflows
|
||||
- [Skills Reference](/reference/skills/) — All 35 skills
|
||||
|
||||
@@ -142,6 +142,6 @@ The git-workflows skill generates changelogs from conventional commits:
|
||||
|
||||
## Related Pages
|
||||
|
||||
- [Planning & Building](/claudekit/workflows/planning-and-building/) — Brainstorm, plan, execute
|
||||
- [Testing & Debugging](/claudekit/workflows/testing-and-debugging/) — TDD and debugging workflows
|
||||
- [Skills Reference](/claudekit/reference/skills/) — All 35 skills
|
||||
- [Planning & Building](/workflows/planning-and-building/) — Brainstorm, plan, execute
|
||||
- [Testing & Debugging](/workflows/testing-and-debugging/) — TDD and debugging workflows
|
||||
- [Skills Reference](/reference/skills/) — All 35 skills
|
||||
|
||||
@@ -140,6 +140,6 @@ Database layer: Constraints (NOT NULL, UNIQUE, CHECK)
|
||||
|
||||
## Related Pages
|
||||
|
||||
- [Planning & Building](/claudekit/workflows/planning-and-building/) — Brainstorm, plan, execute
|
||||
- [Reviewing & Shipping](/claudekit/workflows/reviewing-and-shipping/) — Code review and git workflows
|
||||
- [Skills Reference](/claudekit/reference/skills/) — All 35 skills
|
||||
- [Planning & Building](/workflows/planning-and-building/) — Brainstorm, plan, execute
|
||||
- [Reviewing & Shipping](/workflows/reviewing-and-shipping/) — Code review and git workflows
|
||||
- [Skills Reference](/reference/skills/) — All 35 skills
|
||||
|
||||
+121
-147
@@ -1,180 +1,154 @@
|
||||
/* Ocean Theme - Custom Starlight Styles */
|
||||
|
||||
/* Color Palette:
|
||||
Primary: Deep Navy #0f172a
|
||||
Accent: Cyan #06b6d4
|
||||
Secondary: Slate #64748b
|
||||
Background: #020617
|
||||
*/
|
||||
/* Claude Kit — Amber & Forest theme
|
||||
Accent: amber (workflow progress)
|
||||
Secondary: forest green (success/shipped state)
|
||||
Fonts: IBM Plex Sans + IBM Plex Mono */
|
||||
|
||||
:root {
|
||||
/* Light mode overrides */
|
||||
--sl-color-accent-low: #e0f2fe;
|
||||
--sl-color-accent: #0891b2;
|
||||
--sl-color-accent-high: #164e63;
|
||||
--sl-color-white: #0f172a;
|
||||
--sl-color-gray-1: #1e293b;
|
||||
--sl-color-gray-2: #334155;
|
||||
--sl-color-gray-3: #475569;
|
||||
--sl-color-gray-4: #64748b;
|
||||
--sl-color-gray-5: #94a3b8;
|
||||
--sl-color-gray-6: #cbd5e1;
|
||||
--sl-color-black: #f8fafc;
|
||||
--sl-font: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--sl-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
/* Text colors */
|
||||
--sl-color-text: #0f172a;
|
||||
--sl-color-text-accent: #0891b2;
|
||||
--ck-amber-50: #fffbeb;
|
||||
--ck-amber-100: #fef3c7;
|
||||
--ck-amber-400: #fbbf24;
|
||||
--ck-amber-500: #f59e0b;
|
||||
--ck-amber-600: #d97706;
|
||||
--ck-amber-700: #b45309;
|
||||
--ck-amber-950: #422006;
|
||||
|
||||
--ck-green-400: #4ade80;
|
||||
--ck-green-600: #16a34a;
|
||||
--ck-green-800: #166534;
|
||||
--ck-green-50: #f0fdf4;
|
||||
|
||||
--ck-ink-950: #0a0f0a;
|
||||
--ck-ink-900: #141a14;
|
||||
--ck-ink-800: #1c241c;
|
||||
--ck-stone-200: #e7e5e4;
|
||||
--ck-stone-400: #a8a29e;
|
||||
--ck-stone-600: #57534e;
|
||||
|
||||
/* Light mode (Starlight vars) */
|
||||
--sl-color-accent-low: var(--ck-amber-100);
|
||||
--sl-color-accent: var(--ck-amber-600);
|
||||
--sl-color-accent-high: var(--ck-amber-700);
|
||||
--sl-color-white: #0a0a0a;
|
||||
--sl-color-gray-1: #1c1917;
|
||||
--sl-color-gray-2: #292524;
|
||||
--sl-color-gray-3: #44403c;
|
||||
--sl-color-gray-4: #57534e;
|
||||
--sl-color-gray-5: #78716c;
|
||||
--sl-color-gray-6: #d6d3d1;
|
||||
--sl-color-gray-7: #e7e5e4;
|
||||
--sl-color-black: #fffbeb;
|
||||
|
||||
--sl-color-bg: #fffbeb;
|
||||
--sl-color-bg-nav: #ffffff;
|
||||
--sl-color-bg-sidebar: #fdf8e7;
|
||||
--sl-color-bg-inline-code: #fef3c7;
|
||||
|
||||
--sl-color-text: #1c1917;
|
||||
--sl-color-text-accent: var(--ck-amber-700);
|
||||
--sl-color-hairline-light: #f5f1e3;
|
||||
--sl-color-hairline: var(--ck-stone-200);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] {
|
||||
/* Dark mode - Ocean theme */
|
||||
--sl-color-accent-low: #164e63;
|
||||
--sl-color-accent: #06b6d4;
|
||||
--sl-color-accent-high: #67e8f9;
|
||||
--sl-color-white: #f8fafc;
|
||||
--sl-color-gray-1: #e2e8f0;
|
||||
--sl-color-gray-2: #cbd5e1;
|
||||
--sl-color-gray-3: #94a3b8;
|
||||
--sl-color-gray-4: #64748b;
|
||||
--sl-color-gray-5: #475569;
|
||||
--sl-color-gray-6: #1e293b;
|
||||
--sl-color-black: #020617;
|
||||
--sl-color-accent-low: var(--ck-amber-950);
|
||||
--sl-color-accent: var(--ck-amber-400);
|
||||
--sl-color-accent-high: #fcd34d;
|
||||
--sl-color-white: #f5f5f4;
|
||||
--sl-color-gray-1: #e7e5e4;
|
||||
--sl-color-gray-2: #d6d3d1;
|
||||
--sl-color-gray-3: #a8a29e;
|
||||
--sl-color-gray-4: #78716c;
|
||||
--sl-color-gray-5: #57534e;
|
||||
--sl-color-gray-6: #292524;
|
||||
--sl-color-gray-7: #1c1917;
|
||||
--sl-color-black: var(--ck-ink-950);
|
||||
|
||||
/* Text colors */
|
||||
--sl-color-text: #f8fafc;
|
||||
--sl-color-text-accent: #22d3ee;
|
||||
--sl-color-bg: var(--ck-ink-950);
|
||||
--sl-color-bg-nav: var(--ck-ink-900);
|
||||
--sl-color-bg-sidebar: var(--ck-ink-900);
|
||||
--sl-color-bg-inline-code: #292524;
|
||||
|
||||
/* Background */
|
||||
--sl-color-bg: #020617;
|
||||
--sl-color-bg-nav: #0f172a;
|
||||
--sl-color-bg-sidebar: #0f172a;
|
||||
--sl-color-hairline-light: #1e293b;
|
||||
--sl-color-hairline: #334155;
|
||||
--sl-color-text: #f5f5f4;
|
||||
--sl-color-text-accent: var(--ck-amber-400);
|
||||
--sl-color-hairline-light: #1c241c;
|
||||
--sl-color-hairline: #292524;
|
||||
}
|
||||
|
||||
/* Custom styling for hero section */
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #164e63 100%);
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
/* Code blocks match the palette */
|
||||
:root[data-theme='dark'] .expressive-code {
|
||||
--ec-codeBg: #0f172a;
|
||||
--ec-codeFg: #e2e8f0;
|
||||
--ec-codeSelBg: #1e293b;
|
||||
--ec-codeBrdCol: #1e293b;
|
||||
--ec-codeBg: var(--ck-ink-900);
|
||||
--ec-codeFg: #e7e5e4;
|
||||
--ec-codeSelBg: #292524;
|
||||
--ec-codeBrdCol: #292524;
|
||||
}
|
||||
|
||||
/* Sidebar active state */
|
||||
:root[data-theme='dark'] [data-current='true'] {
|
||||
background: linear-gradient(90deg, transparent, #164e6320);
|
||||
border-left: 2px solid var(--sl-color-accent);
|
||||
/* Sidebar active-state — works in both themes now */
|
||||
[data-current='true'] {
|
||||
background: linear-gradient(90deg, transparent, var(--sl-color-accent-low) 120%);
|
||||
border-inline-start: 2px solid var(--sl-color-accent);
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a:not([class]) {
|
||||
/* Links inside prose */
|
||||
.sl-markdown-content a:not(.sl-link-card):not(.sl-anchor-link) {
|
||||
color: var(--sl-color-text-accent);
|
||||
text-decoration-color: color-mix(in srgb, var(--sl-color-text-accent) 35%, transparent);
|
||||
text-underline-offset: 3px;
|
||||
transition: text-decoration-color 160ms ease;
|
||||
}
|
||||
.sl-markdown-content a:not(.sl-link-card):not(.sl-anchor-link):hover {
|
||||
text-decoration-color: var(--sl-color-text-accent);
|
||||
}
|
||||
|
||||
a:not([class]):hover {
|
||||
color: var(--sl-color-accent-high);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
/* Primary hero button — quietly lifted */
|
||||
.sl-link-button {
|
||||
transition: all 0.2s ease;
|
||||
transition: transform 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.sl-link-button:hover {
|
||||
.sl-link-button.primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
|
||||
box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--sl-color-accent) 55%, transparent);
|
||||
}
|
||||
|
||||
/* Cards in docs */
|
||||
.card {
|
||||
background: var(--sl-color-bg-nav);
|
||||
border: 1px solid var(--sl-color-hairline);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
transition: border-color 0.2s ease;
|
||||
/* Subtle tonal rhythm on the splash page */
|
||||
.hero {
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 50% 0%,
|
||||
color-mix(in srgb, var(--sl-color-accent) 12%, transparent) 0%,
|
||||
transparent 70%);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: var(--sl-color-accent);
|
||||
/* Editorial headings — tighter tracking on Plex Sans */
|
||||
h1, h2, h3, h4 {
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
/* Landing page specific */
|
||||
.landing-hero-gradient {
|
||||
background: radial-gradient(ellipse at top, #164e63 0%, #020617 70%);
|
||||
/* Inline code reads as a warm badge, not a cold chip */
|
||||
.sl-markdown-content :not(pre) > code {
|
||||
font-size: 0.9em;
|
||||
padding: 0.15em 0.4em;
|
||||
border-radius: 4px;
|
||||
background: var(--sl-color-bg-inline-code);
|
||||
color: var(--sl-color-text-accent);
|
||||
border: 1px solid color-mix(in srgb, var(--sl-color-accent) 20%, transparent);
|
||||
}
|
||||
|
||||
/* Feature cards */
|
||||
.feature-card {
|
||||
background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
|
||||
border: 1px solid #1e293b;
|
||||
border-radius: 0.75rem;
|
||||
padding: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
/* Tables — a little more breathing room, aligns with editorial voice */
|
||||
.sl-markdown-content table {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
.sl-markdown-content th {
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
border-color: #06b6d4;
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px -12px rgba(6, 182, 212, 0.15);
|
||||
}
|
||||
|
||||
/* Stats section */
|
||||
.stat-number {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Code snippet styling */
|
||||
.code-snippet {
|
||||
background: #0f172a;
|
||||
border: 1px solid #1e293b;
|
||||
border-radius: 0.5rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
/* Badge styling */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
background: #164e63;
|
||||
color: #67e8f9;
|
||||
}
|
||||
|
||||
.badge-free {
|
||||
background: #065f46;
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
/* Terminal animation */
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.cursor-blink {
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 1.5rem;
|
||||
/* Respect user motion preference — hero SVG animate, link-button lift, etc. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user