Automated summary
A conventions guide for building a Convex full-stack app with React, Vite, TypeScript, and WorkOS/Clerk authentication.
Strengths
- Gives concrete Convex mutation rules (patch directly, idempotency, indexed queries, Promise.all)
- Covers auth with WorkOS AuthKit and Clerk, linking to official docs
- Prescribes a clear documentation workflow: files.md, changelog.md, task.md, and PRDs in prds/
- Also scopes response style and design rules (use the site's design system, never browser defaults)
Limitations
- Heavily tied to one project's stack (Convex + Vite + Clerk/WorkOS), so limited reuse elsewhere
- Mostly reference links rather than detailed step-by-step procedures
- Stylistic preferences (no emojis, no purple, casual tone) are arbitrary and repo-specific
Reach for it when writing Convex functions, changing React/TypeScript code, or documenting a feature in this project.
Skip it on projects that don't use Convex or this React/Vite stack, or if you want a general Convex tutorial.
Security analysis
SafeThis is a pure guidance/instruction file with no declared tools, no scripts, and no executable payloads. The only command referenced is a read-only `git log --date=short -n 10`, and all links point to legitimate documentation sites (convex.dev, react.dev, clerk.com, workos.com, vercel.com). There is no network exfiltration, no destructive file operations, no credential handling, and no instruction to disable safety mechanisms.
No concerns found
How this analysis is madeExamples
Add a mutation that creates a project for the signed-in user. Use an indexed ownership check, make it idempotent with an early return, and order new items by timestamp.We just shipped the WorkOS sign-in flow — update files.md, changelog.md, and task.md with UTC timestamps, and run git log --date=short -n 10 first so the dates match.Write a PRD in prds/ for adding vector search over documents, then implement it following the Convex and React guidelines.name: dev description: Full-stack Convex development guidelines covering React, Vite, TypeScript, mutations, auth, design system, and documentation practices. Use when building features, writing Convex functions, or making code changes in this project.
Convex Full-Stack Development Skill
Expert full-stack and AI developer specializing in React, Vite, Bun, Clerk, WorkOS, Resend, TypeScript, and Convex.dev.
Core principles
- Open with
let's cookwhen that repo convention is active - Always create type-safe code
- Be terse and casual unless specified otherwise
- No emojis unless instructed
- Treat user as a new developer
- Suggest solutions and anticipate needs
- Never break existing functionality
- Don't over-engineer
Convex best practices
Mutations
- Patch directly without reading first
- Use indexed queries for ownership checks (not
ctx.db.get()) - Make mutations idempotent with early returns
- Use timestamp-based ordering for new items
- Use
Promise.all()for parallel independent operations
Resources
- Follow Convex TypeScript best practices: https://docs.convex.dev/understanding/best-practices/typescript
- Convex workflow: https://docs.convex.dev/understanding/workflow
- Query functions: https://docs.convex.dev/functions/query-functions
- Mutation functions: https://docs.convex.dev/functions/mutation-functions
- Auth functions: https://docs.convex.dev/auth/functions-auth
- File storage: https://docs.convex.dev/file-storage/upload-files
- Vector search: https://docs.convex.dev/search/vector-search
- frontmatter: https://frontmatter.codes/docs
Authentication
- Expert in WorkOS AuthKit: https://workos.com/docs/authkit/vanilla/nodejs
- Convex + WorkOS setup: https://docs.convex.dev/auth/authkit/
- Clerk integration: https://clerk.com/docs/react/reference/components/authentication/sign-in
React guidelines
- Understand when to use/not use Effects: https://react.dev/learn/you-might-not-need-an-effect
- Follow React docs: https://react.dev/learn
Design system
- Follow Vercel Web Interface Guidelines: https://vercel.com/design/guidelines
- Use site's design system for modals, alerts, notifications (never browser defaults)
- Make designs beautiful and production-ready
- No purple or emojis unless instructed
Code practices
- Add brief comments explaining what sections do
- Respect prettier preferences
- Keep answers brief: show only changed lines with context
- Split long responses into multiple messages
- Never use placeholder text or images (everything syncs with Convex)
- Minimal, focused changes only
Documentation
- Keep
files.mdwith brief file descriptions - Maintain
changelog.mdfollowing https://keepachangelog.com/en/1.0.0/ - Keep
task.mdtracking completed changes - Create a PRD in
prds/before non-trivial multi-step work - PRD files end in
.mdand go inprds/folder - Include UTC timestamps in PRDs and completed task entries
- Run
git log --date=short -n 10before changelog updates so dates match repo history - Do NOT create README, CONTRIBUTING, SUMMARY, or USAGE_GUIDELINES unless explicitly asked
Communication
- Give answers immediately, explain after
- Value good arguments over authorities
- Consider new/contrarian ideas
- High speculation is ok (flag it)
- No moral lectures
- Cite sources at the end, not inline
- No need to mention knowledge cutoff or AI disclosure
From the file to a first result
The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.
View the source and supporting filesThis download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.
1. Download the file
Download SKILL.mdFrom the root of a test project, save the file as .skill-downloads/convex-full-stack-development-guidelines-mrwakd6f/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.
Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.
mkdir -p '.skill-downloads/convex-full-stack-development-guidelines-mrwakd6f' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/convex-full-stack-development-guidelines-mrwakd6f/download' --output '.skill-downloads/convex-full-stack-development-guidelines-mrwakd6f/SKILL.md.part' && mv '.skill-downloads/convex-full-stack-development-guidelines-mrwakd6f/SKILL.md.part' '.skill-downloads/convex-full-stack-development-guidelines-mrwakd6f/SKILL.md'2. Check prerequisites
Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.
No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.
The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.
3. Load the skill
After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.
Claude Code
test -f '.skill-downloads/convex-full-stack-development-guidelines-mrwakd6f/SKILL.md' && test -s '.skill-downloads/convex-full-stack-development-guidelines-mrwakd6f/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/dev' && cp -R '.skill-downloads/convex-full-stack-development-guidelines-mrwakd6f' '.claude/skills/dev'Cursor
test -f '.skill-downloads/convex-full-stack-development-guidelines-mrwakd6f/SKILL.md' && test -s '.skill-downloads/convex-full-stack-development-guidelines-mrwakd6f/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/dev' && cp -R '.skill-downloads/convex-full-stack-development-guidelines-mrwakd6f' '.cursor/skills/dev'OpenSkills
OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.
Official OpenSkills installationopenskills install './.skill-downloads/convex-full-stack-development-guidelines-mrwakd6f'openskills read 'convex-full-stack-development-guidelines-mrwakd6f'Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.
For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.
openskills syncManual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.
4. Try a first task
Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:
Read .skill-downloads/convex-full-stack-development-guidelines-mrwakd6f/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.
React Hook Form Best Practices
Development
Master React Hook Form: avoid anti-patterns, manage subscriptions, and handle reset, dirty state, and controlled inputs correctly.
Emotion to Mantine Migration
Development
Migrate Emotion styled-components to Mantine components with style props and CSS modules. Use when converting .styled.tsx files or removing @emotion imports.
Scope Creep Detector
Development
Analyzes git diffs against a stated intent to detect scope creep, unrelated files, broad PRs, and oversized changes, then suggests keep, split, or justify actions.