网站架构设计完整教程

---
name: my-custom-skill
description: A brief description of what this skill does
version: 1.0.0
author: Your Name
---

# Skill Name

## Description
Explain what this skill does in detail.

## When to Use
Describe the scenarios where this skill should be invoked.

## Workflow
1. Step 1
2. Step 2
3. Step 3

## Output Format
Describe the expected output format.

## Examples
Provide example prompts and responses.

.trae/
└── skills/
    ├── b2b-product-writer/
    │   └── SKILL.md
    ├── seo-content-writer/
    │   └── SKILL.md
    └── ui-ux-pro-max/
        └── SKILL.md

# Color System

## CSS Variables
```css
:root {
    --primary: #3b82f6;
    --secondary: #6366f1;
    --accent: #8b5cf6;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    
    --bg-body: #ffffff;
    --bg-card: #f9fafb;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --border: #e5e7eb;
}

[data-theme="dark"] {
    --bg-body: #0f172a;
    --bg-card: #1e293b;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
}
```

## Usage Guidelines
- Use `--primary` for main CTAs and important actions
- Use `--secondary` for secondary actions
- Use `--accent` for highlights and special elements
- Always use CSS variables, never hardcode colors

# WordPress Configuration
WP_URL=https://your-site.com
WP_USERNAME=your-username
WP_PASSWORD=your-application-password
WP_API_KEY=your-rest-api-key

# Optional: Custom Post Type
WP_POST_TYPE=page

# Optional: Custom Taxonomy
WP_TAXONOMY=category

:root {
    /* Brand Colors */
    --brand-primary: #2563eb;
    --brand-secondary: #4f46e5;
    --brand-accent: #7c3aed;
    
    /* Semantic Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;
    
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    
    /* Text Colors */
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-dark: #9ca3af;
}

[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    
    --border-light: #334155;
    --border-medium: #475569;
    --border-dark: #64748b;
}

:root {
    /* Font Families */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-heading: 'Inter', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
}

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

website/
├── global/
│   ├── header.html
│   ├── footer.html
│   └── styles.css
└── pages/
    ├── home/
    ├── about/
    └── contact/