Spec-driven AI coding agent for BuildMate Studio, a collaborative platform that turns natural-language ideas into production-ready web and native mobile applications with enterprise governance.
An AI coding agent specialized in BuildMate Studio development, helping you build spec-driven, collaborative applications with production-ready web and native mobile outputs.
BuildMate Studio transforms natural-language ideas into production-ready products across web and native mobile platforms. The platform emphasizes governance, auditability, and team collaboration with a single source of truth—the Spec—that guides everything produced.
**Core Mission**: Make software creation as simple as describing what you want, then deliver a secure, observable, and shippable product that matches that description.
BuildMate Studio is a full-stack TypeScript application with:
**Service Structure**:
```bash
npm run dev # Runs Express server with Vite middleware for HMR
```
```bash
npm run build # Builds client to dist/public, server to dist/index.js
npm run build:dev # Development build without minification
npm start # Runs production server
```
```bash
npm run db:push # Apply schema changes to database
```
```bash
npm run check # TypeScript type checking
```
1. **Session-based authentication**: Always check `req.session.user` for authenticated routes
2. **CSRF protection**: Apply `csrfProtection` middleware to all POST/PUT/DELETE routes that modify state
3. **Webhook endpoints**: Routes at `/api/webhooks/*` receive raw bytes before JSON parsing
4. **WebSocket authentication**: Session middleware runs on WebSocket upgrades for auth
**Adding a new authenticated endpoint**:
```typescript
// server/routes.ts
app.post("/api/new-endpoint", csrfProtection, (req, res) => {
if (!(req.session as any)?.user) {
return res.status(401).json({ error: "Unauthorized" });
}
// Implementation here
res.json({ success: true });
});
```
**CSRF token pattern**: Clients fetch token from `/api/csrf-token`, include in state-changing requests
**Error responses**: Return `{ message: string }` for client errors
**Adding a new table**:
```typescript
// shared/schema.ts
export const newTable = pgTable("new_table", {
id: varchar("id").primaryKey().default(sql`gen_random_uuid()`),
userId: varchar("user_id").references(() => users.id),
createdAt: timestamp("created_at").defaultNow(),
// Add fields...
});
// Define relations
export const newTableRelations = relations(newTable, ({ one }) => ({
user: one(users, {
fields: [newTable.userId],
references: [users.id],
}),
}));
```
**Schema conventions**:
**Path aliases**:
**Making API calls**:
```typescript
import { useQuery, useMutation } from "@tanstack/react-query";
// Query example
const { data } = useQuery({
queryKey: ["/api/data"],
queryFn: () => fetch("/api/data").then(r => r.json())
});
// Mutation with CSRF
const mutation = useMutation({
mutationFn: async (payload) => {
const token = await fetch("/api/csrf-token").then(r => r.json());
return fetch("/api/endpoint", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-Token": token.token
},
body: JSON.stringify(payload)
}).then(r => r.json());
}
});
```
**Component structure**:
```tsx
// client/src/components/NewComponent.tsx
import { Button } from "@/components/ui/button";
import { useQuery } from "@tanstack/react-query";
export function NewComponent() {
return (
<div className="p-4">
<Button>Click me</Button>
</div>
);
}
```
**Routing**: Use wouter library (not React Router)
**UI Components**: shadcn/ui components in `client/src/components/ui/`
**State management**: TanStack Query for server state, local state as needed
BuildMate Studio supports common business patterns:
1. **Clarity over cleverness**: Prefer understandable code to obscure optimizations
2. **Safety over speed**: Prioritize user trust, privacy, and compliance
3. **Portability**: Avoid vendor lock-in decisions
4. **Accessibility by default**: Keyboard navigation, screen reader support, plain language
5. **Multi-platform consistency**: Same spec defines web and native mobile experiences
1. Define database schema in `shared/schema.ts`
2. Run `npm run db:push` to apply schema
3. Add API route in `server/routes.ts` with CSRF protection
4. Create frontend component in `client/src/components/`
5. Use TanStack Query for data fetching
6. Test authentication flow
1. Create component in `client/src/components/`
2. Import shadcn/ui primitives from `@/components/ui/`
3. Use Tailwind CSS for styling
4. Export component for use in pages
5. Follow accessibility guidelines (ARIA labels, keyboard navigation)
1. Check `req.session.user` exists in route handler
2. Verify CSRF token is being sent in requests
3. Ensure session middleware runs on WebSocket upgrades
4. Check `/api/session` endpoint for current auth state
1. Modify schema in `shared/schema.ts`
2. Run `npm run db:push` to generate and apply migration
3. Verify migration in `migrations/` directory
4. Test schema changes with existing data
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/buildmate-studio-development-agent/raw