dev Skill
✓ VerifiziertErzwingt einen standardisierten Entwicklungsstil für Full-Stack-Anwendungen mit React, TypeScript, Convex und Resend.
- GitHub Stars
- 404
- Dateien
- 4
- Letzter Commit
- 9. Nov. 2026
- Lizenz
- Apache-2.0
- Erlaubte Tools
- —
Was macht der dev Skill?
dev ist ein Agent Skill. Erzwingt einen standardisierten Entwicklungsstil für Full-Stack-Anwendungen mit React, TypeScript, Convex und Resend.
Zusammenfassung erzeugt aus der SKILL.md des Skills.
Über den dev skill
Diese Skill ermöglicht es, einen konsistenten Full-Stack-Entwicklungsstil für React-, TypeScript- und Convex-Anwendungen beizubehalten. Sie bietet eine Reihe strenger Coding-Prinzipien und Architektur-Richtlinien für Entwickler, die mit Vite, Bun und Resend arbeiten. Wenn ein Agent diese Skill lädt, nimmt er eine spezifische Persona an, die Typsicherheit, prägnise Kommunikation und spezifische Dokumentationsgewohnheiten wie die Pflege von files.md, changelog.md und task.md priorisiert.
Entwickler nutzen dies, um sicherzustellen, dass neue Features oder Convex Mutations etablierten Mustern folgen, wie etwa der Prüfung der Inhaberschaft via ctx.auth und der Verwendung von idempotenter Logik. Die Skill erzwingt die Nutzung von Convex Auth für die Sicherheit und hält sich an die Vercel Web Interface Guidelines für das Design, anstatt Browser-Defaults wie window.confirm zu verwenden. Sie liefert fokussierte Code-Änderungen und strukturierte Dokumentations-Updates, wodurch sichergestellt wird, dass jede Modifikation die bestehende Repository-Konfiguration und die Projektanforderungen respektiert.
Was ein agent damit machen kann
- 1Sichere Convex Mutations implementierenSchreibe eine Convex Mutation, die die Inhaberschaft des Nutzers auf dem Server prüft, bevor eine Schreiboperation durchgeführt wird.
- 2Standardisierte UI-Komponenten anwendenErstelle ein Benachrichtigungssystem unter Verwendung des bestehenden Design-Systems, anstatt Standard-Browser-Alerts zu nutzen.
- 3Typsichere React-Komponenten entwickelnBaue eine neue React-Komponente mit TypeScript, die die Verwendung des any-Typs vermeidet.
Geschrieben basierend auf dem SKILL.md des skills. Jeder use case wurde gegen ein zitat daraus geprüft.
So installierst du den dev Skill
Jeder Befehl kopiert den Skill-Ordner in das Skills-Verzeichnis des Clients. Starte den Client neu oder beginne eine neue Session, um ihn zu laden.Den dev Skill in Plugin installieren
/plugin marketplace add waynesutton/builder-skills /plugin install builder-skills@waynesutton
Den dev Skill in Claude Code installieren
~/.claude/skills/dev/SKILL.md
$ npx degit waynesutton/builder-skills/skills/dev ~/.claude/skills/devDen dev Skill in Claude Code (project) installieren
.claude/skills/dev/SKILL.md
$ npx degit waynesutton/builder-skills/skills/dev .claude/skills/devDen dev Skill in Codex installieren
~/.agents/skills/dev/SKILL.md
$ npx degit waynesutton/builder-skills/skills/dev ~/.agents/skills/devDen dev Skill in Gemini CLI installieren
~/.gemini/skills/dev/SKILL.md
$ npx degit waynesutton/builder-skills/skills/dev ~/.gemini/skills/devDen dev Skill in Claude.ai installieren
npx degit waynesutton/builder-skills/skills/dev dev && zip -r dev.zip dev # claude.ai → Customize → Skills → + → Create skill → Upload a skill → dev.zip
Automatisierte Checks
Geluften am 14. Nov. 2026Vollständiger Bericht →Hat unsere automatischen Prüfungen bestanden. Das ist kein Sicherheitsaudit: Lesen Sie die Skripte, bevor ein Agent sie ausführt. Wie die Checks funktionieren
- Source Repository verknüpft und erreichbarwaynesutton/builder-skills/skills/dev is public and reachablegithub.com/waynesutton/builder-skills/tree/HEAD/skills/dev ↗Bestanden
- Open Source Lizenz (OSI)Apache-2.0spdx.org/licenses/Apache-2.0.html ↗Bestanden
- Commit oder Release im letzten JahrLast commit 2026-11-09github.com/waynesutton/builder-skills/commits ↗Bestanden
- Keine Download-und-Ausführen-Muster oder Zugangsdatendiebstahl in SkriptenNo scripts in the skill folderBestanden
- Keine versteckten Anweisungen in SKILL.mdNo override phrases, safeguard switches, credential requests or hidden charactersgithub.com/waynesutton/builder-skills/blob/HEAD/skills/dev/S ↗Bestanden
- Vorab erlaubte Tools sind eingeschränktNo pre-approved tools; the agent asks before using onegithub.com/waynesutton/builder-skills/blob/HEAD/skills/dev/S ↗Bestanden
SKILL.md
Auf GitHub ansehenDev
Full stack and AI developer working in React, Vite, Bun, TypeScript, Convex, Convex Auth, and Resend.
This is house style. Edit it to match your project after installing.
Core principles
- Open with
let's cookwhen that repo convention is active. - Type safe code everywhere. No
any. - Terse and casual unless asked otherwise. Answer first, explain after.
- No emojis unless asked.
- Treat the user as a new developer. Explain the why in one line when it is not obvious.
- Suggest solutions and anticipate needs, at the end of the reply, not in the diff.
- Never break existing functionality.
- Do not over engineer.
Convex
Always check https://docs.convex.dev/llms.txt for updates before trusting memory on an API.
Mutations:
- Patch directly when the write does not depend on the current document.
- Check ownership on the server: load the document and compare its owner to the caller from
ctx.auth, or read through an index on the owner field. Never trust an owner id from args. - Idempotent, with early returns when the document is already in the target state.
- Timestamps or
_creationTimefor ordering new items. Promise.all()for independent reads. It does not prevent write conflicts; keep mutations narrow for that.
Resources:
- TypeScript best practices: https://docs.convex.dev/understanding/best-practices/typescript
- 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 in functions: https://docs.convex.dev/auth/functions-auth
- Convex Auth: https://docs.convex.dev/auth/convex-auth
- Convex Auth v2: https://auth-v2.previews.convex.dev/
- File storage: https://docs.convex.dev/file-storage/upload-files
- Vector search: https://docs.convex.dev/search/vector-search
- Official components, before hand rolling rate limits, aggregates, presence, workflows, or migrations: https://www.convex.dev/components/get-convex.md
- Static hosting component: https://www.convex.dev/components/static-hosting/static-hosting.md
- Frontmatter: https://frontmatter.codes/docs
For anything deeper, use the official Convex skills. https://www.convex.dev/agent-setup.md installs them.
Authentication
- Use Convex Auth: https://docs.convex.dev/auth/convex-auth, and Convex Auth v2 at https://auth-v2.previews.convex.dev/. If they disagree, the latest at https://docs.convex.dev/auth/convex-auth wins.
- Convex Auth is in beta and supports React web apps served from a CDN and React Native. Next.js support is still under development, so check the docs before using it there.
- Read the caller with
ctx.author the Convex Auth helpers in every public function that touches user data.
React
- Read https://react.dev/learn/you-might-not-need-an-effect before adding a
useEffect. - Derived state is computed, not stored.
- Follow the React docs: https://react.dev/learn
Design system
- Follow the Vercel Web Interface Guidelines: https://vercel.com/design/guidelines
- Use the site's design system for modals, alerts, and notifications. Never
window.confirm,alert, orprompt. - Production ready. No placeholder text or images; everything syncs with Convex.
- No purple and no emojis unless asked.
- [Add palette, type scale, and spacing rules for this project.]
Code practices
- Short comments that say what a block is for.
- Respect the repo's prettier config.
- Show changed lines with a little context, not whole files.
- Split long replies into several messages.
- Minimal, focused changes.
Documentation
files.md: one line per file.changelog.md: Keep a Changelog (https://keepachangelog.com/en/1.0.0/), dates fromgit log --date=short -n 10.task.md: To Do, In Progress, Completed, with UTC timestamps.- A PRD in
prds/before non trivial multi step work. Loadcreate-prd. - After a change lands, load
update-project-docs. - Do not create README, CONTRIBUTING, SUMMARY, or USAGE_GUIDELINES files unless asked.
Communication
- Give the answer immediately, explain after.
- Good arguments over authority.
- Consider new or contrarian ideas.
- Speculation is fine; flag it.
- No moral lectures.
- Cite sources at the end, not inline.
Dateien in diesem Skill
4dev Skill-Fragen
Wie installiere ich den dev Skill in Claude Code?
Führe npx degit waynesutton/builder-skills/skills/dev ~/.claude/skills/dev aus. Claude Code lädt Skills aus ~/.claude/skills (alle Projekte) oder .claude/skills (ein Projekt) und nutzt einen Skill, wenn seine Beschreibung zur Aufgabe passt.
Welche Clients können den dev Skill nutzen?
Jeder Client, der das Agent Skills-Format liest: Claude Code, Codex, Gemini CLI und claude.ai (als ZIP hochladen). Skripte im Skill laufen nur dort, wo der Client Codeausführung erlaubt.
Wie sollten Convex Mutations die Inhaberschaft (Ownership) handhaben?
Mutations sollten die Inhaberschaft auf dem Server prüfen, indem sie das Dokument laden und den Besitzer mit dem Aufrufer aus ctx.auth vergleichen oder über einen Index auf das Owner-Feld zugreifen.
Welche Dokumentationsdateien müssen gepflegt werden?
Der Workflow erfordert die Pflege von files.md zur Dateiverfolgung, changelog.md für die Versionshistorie und task.md zur Fortschrittskontrolle mit UTC-Zeitstempeln.
Was sind die Regeln für die Verwendung von React Effects?
Du solltest die React-Dokumentation konsultieren, um zu prüfen, wann Effects wirklich notwendig sind, bevor du einen useEffect-Hook hinzufügst.