Guidance for working with Create Studio, a Nuxt 3 app for creating structured data cards with JSON-LD generation and embeddable visual cards. Includes TDD workflow, testing patterns, and development commands.
This skill provides comprehensive guidance for working with the Create Studio codebase using Claude Code.
Create Studio is a Nuxt 3 application that enables publishers and bloggers to create structured data cards (recipes, how-to guides, FAQs) with automatic JSON-LD generation and embeddable, interactive visual cards.
**Tech Stack:**
When working with this project, use these commands:
**Development:**
```bash
npm run dev # Start dev server (localhost:3000)
npm run dev:setup # Copy .env.example to .env (first time only)
```
**Build & Deploy:**
```bash
npm run build # Production build
npm run generate # Static site generation
npm run preview # Preview production build
```
**Testing:**
```bash
npm test # Run all tests
npm run test:ui # Tests with Vitest UI
npm run test:e2e # E2E tests
npm run test:unit # Unit tests only
npm run test:components # Component tests only
npm test tests/unit/specific-file.test.ts # Run specific test
```
**Directory Structure:**
**Configuration Files:**
**CRITICAL: This project follows strict TDD principles. Always write tests FIRST.**
1. **Write failing test FIRST** - Define expected behavior before any implementation
2. **Run test to confirm failure** - Verify test properly detects missing functionality
3. **Write minimal code to pass** - Implement only what's necessary
4. **Refactor if needed** - Improve code while keeping tests green
**Example TDD Workflow:**
```bash
npm test
npm test
```
**Unit Tests** (Pure functions, utilities):
```typescript
import { describe, it, expect } from 'vitest'
describe('myFunction', () => {
it('should return expected value', () => {
expect(myFunction(input)).toBe(expectedOutput)
})
})
```
**Component Tests** (Vue components):
```typescript
import { mountSuspended } from '@nuxt/test-utils/runtime'
import MyComponent from '~/components/MyComponent.vue'
describe('MyComponent', () => {
it('renders correctly', async () => {
const wrapper = await mountSuspended(MyComponent, {
props: { /* props */ }
})
expect(wrapper.text()).toContain('expected text')
})
})
```
**E2E Tests** (Page flows):
```typescript
import { describe, test, expect } from 'vitest'
import { createPage, setup, url } from '@nuxt/test-utils/e2e'
describe('App E2E', async () => {
await setup()
test('loads home page', async () => {
const page = await createPage(url('/'))
const heading = page.locator('h1')
const headingText = await heading.textContent()
expect(headingText).toBe('Welcome')
})
})
```
**Test Utilities Available:**
When developing new features:
1. **Start with TDD** - Write tests first, always
2. **For page-based features** (CRUD operations like new, edit, view, delete):
- Scaffold the page first to ensure it exists and is navigable
- Develop functionality incrementally
- Build UI piece by piece to watch progress visually
3. **Focus on incremental progress** - See features added step by step
4. **Test at each step** - Verify functionality works before moving forward
Create files in `pages/` directory for automatic routing:
```vue
<!-- pages/my-page.vue -->
<template>
<div>My page content</div>
</template>
```
DaisyUI classes are available globally:
```vue
<button class="btn btn-primary">Click me</button>
<div class="card">
<div class="card-body">Card content</div>
</div>
```
**Themes:** "claudette" (light), "claudia" (dark)
Create stores in `stores/` directory:
```typescript
// stores/my-store.ts
export const useMyStore = defineStore('myStore', () => {
const state = ref(initialValue)
const action = () => { /* logic */ }
return { state, action }
})
```
Create server routes in `server/api/`:
```typescript
// server/api/my-endpoint.ts
export default defineEventHandler(() => {
return { message: 'Hello from API' }
})
```
1. Copy `.env.example` to `.env` (run `npm run dev:setup`)
2. Prefix with `NUXT_PUBLIC_` for client-side access
3. Server-only variables don't need prefix
When working on features:
1. **Read PROJECT_PLAN.md** for phased development approach and current progress
2. **Write tests first** - Always start with failing tests
3. **Implement incrementally** - Small, visible steps
4. **Run tests frequently** - Verify each change
5. **Keep pages navigable** - Scaffold routing before deep implementation
6. **Use auto-imports** - Components and composables are auto-imported
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/claude-code-project-guide-create-studio/raw