Skip to content

Commit db52117

Browse files
nolrmnolrm
committed
feat: Additional support for VScode and docs updates
1 parent 558038c commit db52117

20 files changed

Lines changed: 971 additions & 714 deletions

File tree

‎README.md‎

Lines changed: 72 additions & 307 deletions
Large diffs are not rendered by default.

‎integrations/vscode-settings.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@
99
"vibeKit.templatesPath": ".vibe-kit/templates",
1010
"vibeKit.commandsPath": ".vibe-kit/commands",
1111

12+
"// Quick Usage in Copilot Chat": "Simply mention @.vibe-kit in your prompts",
13+
"// Examples": [
14+
"// @.vibe-kit Create a login button",
15+
"// @.vibe-kit/standards Create a component (standards only)",
16+
"// @.vibe-kit/standards/code-style.md For specific files"
17+
],
18+
1219
"// AI Guidelines": "Use these in your prompts with Copilot",
1320
"ai.guidelines": [
1421
"Follow: .vibe-kit/standards/code-style.md",
1522
"Testing: .vibe-kit/standards/testing.md",
1623
"Architecture: .vibe-kit/standards/architecture.md",
1724
"Guidelines: .vibe-kit/standards/ai-guidelines.md"
18-
],
19-
20-
"// Quick Prompts for Copilot Chat": "You can use these patterns",
21-
"copilot.prompts": {
22-
"createComponent": "Create a component following .vibe-kit/standards/code-style.md and .vibe-kit/templates/component.tsx",
23-
"addTests": "Add tests following .vibe-kit/standards/testing.md with numbered cases",
24-
"analyze": "Read .vibe-kit/commands/analyze.md and execute analysis"
25-
}
25+
]
2626
}

‎lib/commands/install.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,7 +398,59 @@ class InstallCommand {
398398
settings['vibeKit.templatesPath'] = '.vibe-kit/templates';
399399

400400
await fs.writeJson(settingsPath, settings, { spaces: 2 });
401+
402+
// Create a README for VS Code usage
403+
const vscodeReadme = `.vibe-kit/VSCODE_USAGE.md`;
404+
const vscodeReadmeContent = `# Using Vibe Kit with VS Code Copilot
405+
406+
## ⚡ Easiest Method: Just @ mention .vibe-kit
407+
408+
In Copilot Chat, simply mention the vibe-kit folder:
409+
410+
### Recommended (simplest):
411+
\`\`\`
412+
@.vibe-kit Create a login button
413+
\`\`\`
414+
This includes ALL context files: standards, templates, and commands!
415+
416+
### Or mention just standards folder:
417+
\`\`\`
418+
@.vibe-kit/standards Create a login button
419+
\`\`\`
420+
This includes only your standards files.
421+
422+
### Individual files (if you want specific ones):
423+
\`\`\`
424+
@.vibe-kit/standards/glossary.md @.vibe-kit/standards/code-style.md Create a login button
425+
\`\`\`
426+
427+
## Available Context Files
428+
429+
- \`@.vibe-kit/standards/glossary.md\` - Project shortcuts & terminology
430+
- \`@.vibe-kit/standards/code-style.md\` - Coding conventions
431+
- \`@.vibe-kit/standards/testing.md\` - Testing patterns
432+
- \`@.vibe-kit/standards/architecture.md\` - Architecture decisions
433+
- \`@.vibe-kit/standards/ai-guidelines.md\` - AI behavior rules
434+
- \`@.vibe-kit/templates/component.tsx\` - Component template
435+
- \`@.vibe-kit/templates/\` - All templates
436+
437+
## Pro Tips
438+
439+
1. **Best:** Mention \`@.vibe-kit\` to include everything in one mention
440+
2. Or mention just standards: \`@.vibe-kit/standards\`
441+
3. Copilot automatically reads the mentioned files/folders as context
442+
4. One folder mention = all your context files included!
443+
444+
## Difference from Cursor
445+
446+
**Cursor**: Auto-loads all context (no @ mentions needed)
447+
**VS Code**: Manual @ mentions required for each prompt
448+
`;
449+
450+
await fs.writeFile('.vscode/VSCODE_USAGE.md', vscodeReadmeContent);
451+
401452
console.log(chalk.green(' ✅ VS Code integration installed'));
453+
console.log(chalk.yellow(' 💡 Tip: Use @ mentions in Copilot Chat to include Vibe Kit context files'));
402454
}
403455

404456
async installCLIHelpers() {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nolrm/vibe-kit",
3-
"version": "0.3.0",
3+
"version": "0.3.1",
44
"description": "Context Engineering for AI Development - Provide rich context to AI through structured MD files with standards, code guides, and documentation",
55
"main": "lib/index.js",
66
"bin": {

‎vibe-kit-docs/README.md‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
# Vibe Kit Documentation Site
2+
3+
This is the official documentation website for [Vibe Kit](https://github.com/nolrm/vibe-kit), built with **Next.js 16**, **Tailwind CSS v4**, and **shadcn/ui** components.
4+
5+
## What is This?
6+
7+
The `vibe-kit-docs` directory contains the complete source code for the Vibe Kit documentation website. This site provides comprehensive documentation about Vibe Kit, including:
8+
9+
- Quick start guide (installation + setup)
10+
- Platform-specific examples (Cursor, VS Code, Aider, Claude CLI, Gemini)
11+
- Project structure overview
12+
- CLI commands reference
13+
14+
## Technologies
15+
16+
- **Framework**: Next.js 16 with App Router
17+
- **Styling**: Tailwind CSS v4
18+
- **Components**: shadcn/ui component library
19+
- **Language**: TypeScript
20+
- **Package Manager**: pnpm
21+
22+
## Directory Structure
23+
24+
```
25+
vibe-kit-docs/
26+
├── app/ # Next.js App Router pages
27+
│ ├── docs/ # Documentation pages
28+
│ │ ├── platform-examples/ # Platform examples (Cursor, VS Code, Aider, etc.)
29+
│ │ │ └── page.tsx
30+
│ │ ├── project-structure/ # Project structure guide
31+
│ │ │ └── page.tsx
32+
│ │ ├── commands/ # CLI commands reference
33+
│ │ │ └── page.tsx
34+
│ │ ├── quick-start/ # Complete installation + setup guide
35+
│ │ │ └── page.tsx
36+
│ │ ├── layout.tsx # Docs layout with sidebar
37+
│ │ └── page.tsx # Main docs landing page
38+
│ ├── globals.css # Global styles
39+
│ ├── layout.tsx # Root layout
40+
│ └── page.tsx # Home page
41+
│
42+
├── components/ # React components
43+
│ ├── ui/ # shadcn/ui components (57 files)
44+
│ │ ├── button.tsx
45+
│ │ ├── card.tsx
46+
│ │ ├── input.tsx
47+
│ │ └── ... # Other UI components
48+
│ ├── docs-header.tsx # Documentation header
49+
│ ├── docs-sidebar.tsx # Documentation sidebar navigation
50+
│ ├── features.tsx # Features section
51+
│ ├── footer.tsx # Footer component
52+
│ ├── header.tsx # Main header
53+
│ ├── hero.tsx # Hero section
54+
│ └── theme-provider.tsx # Theme provider
55+
│
56+
├── hooks/ # Custom React hooks
57+
│ ├── use-mobile.ts # Mobile detection hook
58+
│ └── use-toast.ts # Toast notification hook
59+
│
60+
├── lib/ # Utility functions
61+
│ └── utils.ts # Utility functions (cn, etc.)
62+
│
63+
├── public/ # Static assets
64+
│ ├── images/
65+
│ │ ├── context-flow.png # Context engineering flow diagram
66+
│ │ └── project-structure.png # Project structure diagram
67+
│ └── placeholder-*.png # Placeholder images
68+
│
69+
├── styles/
70+
│ └── globals.css # Global CSS styles
71+
│
72+
├── components.json # shadcn/ui configuration
73+
├── next.config.mjs # Next.js configuration
74+
├── package.json # Dependencies and scripts
75+
├── pnpm-lock.yaml # Dependency lock file
76+
├── postcss.config.mjs # PostCSS configuration
77+
├── tsconfig.json # TypeScript configuration
78+
└── next-env.d.ts # Next.js type definitions
79+
```
80+
81+
## Getting Started
82+
83+
### Prerequisites
84+
85+
- Node.js 16.x or higher
86+
- pnpm (or npm/yarn)
87+
88+
### Installation
89+
90+
```bash
91+
# Install dependencies
92+
pnpm install
93+
```
94+
95+
### Development
96+
97+
```bash
98+
# Start development server
99+
pnpm dev
100+
```
101+
102+
The site will be available at `http://localhost:3000`
103+
104+
### Build
105+
106+
```bash
107+
# Build for production
108+
pnpm build
109+
110+
# Start production server
111+
pnpm start
112+
```
113+
114+
### Scripts
115+
116+
- `pnpm dev` - Start development server
117+
- `pnpm build` - Build for production
118+
- `pnpm start` - Start production server
119+
- `pnpm lint` - Run ESLint
120+
121+
## Features
122+
123+
### Documentation Sections
124+
125+
1. **Introduction** (`/docs`) - Overview of Vibe Kit and Context Engineering
126+
2. **Quick Start** (`/docs/quick-start`) - Complete installation and setup guide (3 steps)
127+
3. **Platform Examples** (`/docs/platform-examples`) - How to use with Cursor, VS Code, Aider, Claude CLI, Gemini
128+
4. **Project Structure** (`/docs/project-structure`) - Directory structure and customization
129+
5. **Commands** (`/docs/commands`) - Complete CLI command reference
130+
131+
### Key Components
132+
133+
- **Responsive Sidebar** - Sticky navigation for easy browsing
134+
- **Modern UI** - Built with shadcn/ui components
135+
- **Dark Theme** - Optimized for dark mode
136+
- **Syntax Highlighting** - Code examples with proper formatting
137+
- **Mobile Responsive** - Works on all device sizes
138+
139+
## Styling
140+
141+
The project uses **Tailwind CSS v4** with custom CSS variables for theming. Global styles are located in:
142+
- `app/globals.css` - Root-level styles
143+
- `styles/globals.css` - Additional styling
144+
145+
The site uses CSS variables for colors and theming:
146+
- `--background`, `--foreground`
147+
- `--primary`, `--secondary`
148+
- `--muted`, `--accent`
149+
- And more...
150+
151+
## Deployment
152+
153+
This site is deployed to Vercel. Configuration is in the root `vercel.json` file.
154+
155+
## Contributing
156+
157+
To update documentation:
158+
159+
1. Edit the relevant page in `app/docs/`
160+
2. Update components in `components/` if needed
161+
3. Run `pnpm dev` to preview changes
162+
4. Commit and push changes
163+
164+
## License
165+
166+
MIT License - see [LICENSE](../LICENSE) file for details.
167+

‎vibe-kit-docs/app/apple-icon.svg‎

Lines changed: 8 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)