Skip to content

feat: enhance wizard completion summary with file output options #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
spivx merged 1 commit into from
Oct 2, 2025
Merged

feat: enhance wizard completion summary with file output options #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions agents.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,97 @@


- When you identify reusable effect logic, wrap it in a custom hook under `hooks/` (e.g., `use-window-click-dismiss.ts`) and consume that hook rather than repeating `useEffect` blocks.


---

## Prompt for Codex Agent

You are the **DevContext Assistant**, helping developers generate AI-ready instruction files (`copilot-instructions.md`, `agents.md`, `cursor-rules.md`) for their projects.

Your role is to **analyze input (manual answers or GitHub repo scans)**, infer project conventions, and generate high-quality context/config files tailored to the project.

---

### Core Capabilities

1. **Modes of Use**
- **New Project (Wizard)**
- Ask the user step-by-step questions (IDE, framework, language, tooling, file structure, naming conventions, testing approach, etc.).
- Allow skipping questions and using defaults to generate a boilerplate instructions file.
- **Existing Project (GitHub Repo)**
- Accept a GitHub repo URL or `owner/repo`.
- Fetch metadata (via GitHub API or local scan): languages, frameworks, configs, testing tools, structure.
- Pre-fill wizard answers based on detected information.
- Ask only about missing/ambiguous details.
- Provide smart suggestions (e.g., “Detected ESLint but no Prettier — do you want me to add Prettier rules?”).

2. **Repo Scanning Rules**
- Detect frameworks/languages:
- `package.json` → React, Next.js, Angular, etc.
- `requirements.txt`, `pyproject.toml` → Django, FastAPI, Flask, etc.
- `pom.xml`, `build.gradle` → Java/Spring.
- Detect tooling/config:
- ESLint, Prettier, Babel, Webpack, Vite, Dockerfile, TSConfig.
- Detect testing:
- Jest, Vitest, Cypress, Playwright, Mocha.
- Detect structure:
- Presence of `src/`, `tests/`, `components/`, etc.
- Summarize findings in a clear JSON object.

3. **Output**
- Generate one or more instruction/config files depending on user choice:
- `copilot-instructions.md`
- `agents.md`
- `cursor-rules.md`
- File must include:
- Environment (IDE, framework, language, tooling).
- Project priorities.
- Code style (naming, structure, comments, testing).
- AI-related guidelines (how Copilot, Cursor, or agents should behave).
- Provide options:
- Preview file in UI.
- Copy to clipboard.
- Download file.

---

### UX Rules

- Always make it clear what value you bring:
- For wizard: *“Guided setup for AI coding guidelines.”*
- For repo scan: *“Auto-detect stack and generate context-aware instructions.”*
- Use smart defaults, but let user override.
- Keep the flow simple: *Landing → Choose (New or Existing Project) → Wizard (manual or prefilled) → Generate File.*
- At the end, provide both the file output and short explanation: *“This file was generated based on your repo + your preferences.”*

---

### SEO / Positioning Notes

- Emphasize you are not just a “file generator” but a **repo-aware, AI coding guidelines assistant**.
- Highlight keywords: *AI coding guidelines, Copilot instructions, Cursor rules, GitHub repo analyzer, IDE setup automation, developer onboarding docs.*

---

### Example Workflow (Existing Project)

1. User inputs repo URL → agent scans repo.
2. Agent outputs summary JSON:
```json
{
"language": "TypeScript",
"frameworks": ["Next.js", "React"],
"tooling": ["ESLint", "Tailwind"],
"testing": [],
"structure": { "src": true, "tests": true }
}
```
3. Agent asks:
*“We detected Next.js + React + ESLint. Do you want to add Prettier rules? Do you plan to add Jest or another testing framework?”*
4. Agent generates `copilot-instructions.md` with these conventions baked in.
5. User downloads or copies the file.

---

👉 Use this as your guiding instruction: **always detect what you can, ask only when needed, and generate a repo-aware instructions file that saves the user time.**
40 changes: 25 additions & 15 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,15 @@ const geistSans = Geist({
subsets: ["latin"],
});


const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});

const siteUrl = "https://devcontext.com";
const siteTitle = "DevContext – AI Coding Guidelines & Context Generator";
const siteUrl = "https://devcontext.xyz";
const siteTitle = "DevContext – AI Coding Guidelines & Repo Analyzer";
const siteDescription =
"DevContext helps developers generate AI config files like Copilot instructions, Cursor rules, and prompts — consistent, fast, IDE-ready.";
"DevContext helps developers generate AI config files like Copilot instructions, Cursor rules, and agents.md. Start fresh with a guided wizard or analyze your GitHub repo to auto-detect stack, frameworks, and best practices — consistent, fast, and IDE-ready.";

const ogImage = `${siteUrl}/og-image.png`;

Expand All @@ -46,14 +45,22 @@ const structuredData = {
featureList: [
"Guided wizard for AI coding instructions",
"Prebuilt templates for Copilot, Cursor, and IDE agents",
"Context-aware questions with best-practice examples",
"Scan a GitHub repo to auto-detect stack, frameworks, and tooling",
"Context-aware questions with best-practice suggestions",
"Instant boilerplate generation with smart defaults",
],
keywords: [
"AI coding guidelines",
"Copilot instructions generator",
"Cursor rules builder",
"IDE setup automation",
"Developer onboarding docs",
"generate Copilot instructions file",
"generate agents file",
"generate AI instructions",
"generate Cursor rules",
"AI development workflows",
"AI repo analyzer",
"GitHub repo scanner for Copilot",
"repo-aware coding guidelines",
],
};

Expand All @@ -79,6 +86,10 @@ export const metadata: Metadata = {
"Copilot instructions",
"Cursor rules",
"agents md",
"GitHub repo analyzer",
"generate coding standards from GitHub repo",
"repo-aware AI coding guidelines",
"auto-detect framework coding rules",
],
authors: [{ name: "DevContext" }],
creator: "DevContext",
Expand All @@ -89,8 +100,7 @@ export const metadata: Metadata = {
},
openGraph: {
title: siteTitle,
description:
"Generate AI config files like Copilot instructions, Cursor rules, and prompts. Consistent, fast, and IDE-ready.",
description: siteDescription,
url: siteUrl,
siteName: "DevContext",
images: [
Expand All @@ -107,8 +117,7 @@ export const metadata: Metadata = {
twitter: {
card: "summary_large_image",
title: siteTitle,
description:
"Generate AI config files like Copilot instructions, Cursor rules, and prompts. Consistent, fast, and IDE-ready.",
description: siteDescription,
images: [ogImage],
site: "@devcontext",
},
Expand Down Expand Up @@ -141,20 +150,21 @@ export const metadata: Metadata = {
},
};



export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {

return (
<html lang="en" suppressHydrationWarning className="dark">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<Script id="structured-data" type="application/ld+json" strategy="beforeInteractive">
<Script
id="structured-data"
type="application/ld+json"
strategy="beforeInteractive"
>
{JSON.stringify(structuredData)}
</Script>
<ThemeProvider
Expand Down
176 changes: 36 additions & 140 deletions app/new/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,143 +1,39 @@
"use client"

import { Suspense, useMemo, useState } from "react"

import { Button } from "@/components/ui/button"
import { InstructionsWizard } from "@/components/instructions-wizard"
import { AnimatedBackground } from "@/components/AnimatedBackground"
import { getHomeMainClasses } from "@/lib/utils"
import { ANALYTICS_EVENTS } from "@/lib/analytics-events"
import { track } from "@/lib/mixpanel"
import type { DataQuestionSource, FileOutputConfig } from "@/types/wizard"
import { Github } from "lucide-react"
import Link from "next/link"
import { useSearchParams } from "next/navigation"

import filesData from "@/data/files.json"
import { buildFileOptionsFromQuestion } from "@/lib/wizard-utils"

const fileQuestionSet = filesData as DataQuestionSource[]
const fileQuestion = fileQuestionSet[0] ?? null
const fileOptionsFromData = buildFileOptionsFromQuestion(fileQuestion)

export default function NewInstructionsPage() {
return (
<Suspense fallback={<LoadingFallback />}>
<NewInstructionsPageContent />
</Suspense>
)
}

function NewInstructionsPageContent() {
const searchParams = useSearchParams()
const [showWizard, setShowWizard] = useState(false)
const [selectedFileId, setSelectedFileId] = useState<string | null>(null)

const fileOptions = useMemo(() => fileOptionsFromData, [])
const preferredStackId = searchParams.get("stack")?.toLowerCase() ?? null

const handleFileCtaClick = (file: FileOutputConfig) => {
setSelectedFileId(file.id)
setShowWizard(true)
track(ANALYTICS_EVENTS.CREATE_INSTRUCTIONS_FILE, {
fileId: file.id,
fileLabel: file.label,
})
}

const handleWizardClose = () => {
setShowWizard(false)
setSelectedFileId(null)
}

return (
<div className="relative min-h-screen overflow-hidden bg-background text-foreground">
<AnimatedBackground />
<div className="relative z-10 flex min-h-screen flex-col">
{/* Top utility bar */}
<div
className={`absolute inset-x-0 top-4 flex items-center px-6 sm:px-8 lg:px-12 ${showWizard ? "justify-end" : "justify-between"}`}
>
{!showWizard ? (
<>
<Link href="/" className="text-lg font-semibold tracking-tight text-foreground md:text-xl">
DevContext
</Link>
<Link href="https://github.com/spivx/devcontext" target="_blank">
<Button variant="outline" size="sm">
<Github className="mr-2 h-4 w-4" />
GitHub
</Button>
</Link>
</>
) : (
<Link href="https://github.com/spivx/devcontext" target="_blank">
<Button variant="outline" size="sm">
<Github className="mr-2 h-4 w-4" />
GitHub
</Button>
</Link>
)}
</div>

{/* Hero Section */}
<main className={getHomeMainClasses(showWizard)}>
{showWizard && selectedFileId ? (
<InstructionsWizard
selectedFileId={selectedFileId}
onClose={handleWizardClose}
initialStackId={preferredStackId}
/>
) : (
<>
<div className="space-y-6">
<div className="space-y-4">
<h1 className="text-3xl font-bold">Start a new instructions project</h1>
<p className="mx-auto max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
Choose the file preset that matches what you need. The wizard will open with targeted questions and save progress as you go.
</p>
<div className="mx-auto max-w-2xl text-left text-sm text-muted-foreground/90 md:text-base">
<ul className="list-disc space-y-2 pl-5">
<li>Pick a preset to load stack, architecture, and workflow prompts.</li>
<li>Answer or skip questions — you can revisit any step before exporting.</li>
<li>Download the generated file once every section shows as complete.</li>
</ul>
</div>
</div>

{/* File type CTAs */}
<div className="pt-6">
<div className="flex flex-wrap items-center justify-center gap-5">
{fileOptions.map((file) => {
return (
<button
key={file.id}
type="button"
className="group inline-flex h-32 w-32 items-center justify-center rounded-full border border-border/60 bg-gradient-to-br from-card/95 via-card/90 to-card/80 px-6 text-sm font-medium text-foreground text-center shadow-sm ring-offset-background transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/80"
onClick={() => handleFileCtaClick(file)}
aria-label={`Create ${file.label}`}
>
<span className="break-words text-sm font-semibold leading-tight text-foreground transition-colors duration-200 group-hover:text-primary/90">
{file.filename ?? file.label}
</span>
</button>
)
})}
</div>
</div>
</div>
</>
)}
</main>
</div>
</div>
)
import type { Metadata } from "next"
import { redirect } from "next/navigation"

const title = "Launch the DevContext Wizard"
const description =
"Start a guided flow to assemble AI-ready coding instruction files. Pick your stack, customize conventions, and export Copilot, Cursor, or agents guidelines in minutes."

export const metadata: Metadata = {
title,
description,
alternates: {
canonical: "/new",
},
openGraph: {
title,
description,
url: "/new",
type: "website",
siteName: "DevContext",
images: [
{
url: "/og-image.png",
width: 1200,
height: 630,
alt: "DevContext wizard interface preview",
},
],
},
twitter: {
card: "summary_large_image",
title,
description,
images: ["/og-image.png"],
},
}

function LoadingFallback() {
return (
<div className="flex min-h-screen items-center justify-center bg-background text-sm text-muted-foreground">
Loading wizard…
</div>
)
export default function NewPage() {
redirect(`/new/stack`)
}
Loading