本文へ移動
cccskills
無料GitHub で公開

dev

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.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md3.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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 cook when 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

Authentication

React guidelines

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.md with brief file descriptions
  • Maintain changelog.md following https://keepachangelog.com/en/1.0.0/
  • Keep task.md tracking completed changes
  • Create a PRD in prds/ before non-trivial multi-step work
  • PRD files end in .md and go in prds/ folder
  • Include UTC timestamps in PRDs and completed task entries
  • Run git log --date=short -n 10 before 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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

adapt

無料

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.

日本語の概要は準備中です。原文の説明を表示しています。

waynesutton/waynesutton-ai22026年9月8日 更新

Agent Ready project design context for navigation, docs links, and interface tone. Use when building or reviewing UI in this repo so patterns match the documented product feel.

日本語の概要は準備中です。原文の説明を表示しています。

waynesutton/waynesutton-ai22026年9月8日 更新

animate

無料

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.

日本語の概要は準備中です。原文の説明を表示しています。

waynesutton/waynesutton-ai22026年9月8日 更新

arrange

無料

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

日本語の概要は準備中です。原文の説明を表示しています。

waynesutton/waynesutton-ai22026年9月8日 更新

audit

無料

Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.

日本語の概要は準備中です。原文の説明を表示しています。

waynesutton/waynesutton-ai22026年9月8日 更新

Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints. Use when structuring a page or component, spacing or aligning controls, deciding what collapses at small sizes, handling RTL layout direction, or reviewing frontend code for layout. Triggers on layout, spacing, alignment, grouping, negative space, whitespace, visual hierarchy, reading order, progressive disclosure, breakpoints, responsive layout, container queries, safe area, full-bleed, edge-to-edge, layout margins, RTL layout, logical properties.

日本語の概要は準備中です。原文の説明を表示しています。

waynesutton/waynesutton-ai22026年9月8日 更新

waynesutton のスキルをすべて見る

このスキルの問題を報告する