Development Claude Skills
8 676 development skills from 759 authors. They write and change code. Half of them fit into 1 830 tokens or less — that is what one costs your context window when the agent loads it. 1 213 ship runnable scripts rather than instructions alone. 42 of them cannot work without an MCP server, most often rube. We also found 1 172 copies of these same skills sitting in other people's repositories — counted once here, not 1 172 times.
8 676 unique 759 authors 5 250 updated this month 1 369 from vendors
Debug Python: pdb REPL + debugpy remote (DAP).
Everything about the data layer — pick one of six ready-to-run backend templates (TanStack Start + Drizzle + better-auth, Hono + Drizzle + better-auth, Hono + Prisma + better-auth, Hono + Drizzle + Auth.js/NextAuth, FastAPI + SQLAlchemy + JWT, Supabase) and wire the frontend to it through the Repository + AuthProvider seams; scaffold a CRUD resource (Postgres table + server fns + query hooks + DataTable page + create/edit dialog + sidebar entry); bind or swap one resource's data source (Drizzle / REST / GraphQL / in-memory); or re-point the whole app's data + auth at a different backend. Use when adding a data entity or pointing the app at a backend other than the default Postgres + better-auth.
Stand up the dashboard foundation (the platform layer — UI primitives, form system, charts, Repository + adapters, auth seam, theme, routing shell) into a new project as a zero-config runnable app. Run this FIRST when building a dashboard, then compose screens from the add-component catalogue's shapes (add-detail-page, add-kanban, …) and the add-backend operation skill.
Assess the current codebase against the feature's spec, plan, and tasks, then append any remaining unbuilt work as new tasks to tasks.md so implement can complete it.
Generate feature specifications by analyzing existing source code.
Convert existing tasks into actionable, dependency-ordered GitHub issues for the feature based on available design artifacts.
Generate an actionable, dependency-ordered tasks.md for the feature based on available design artifacts.
Deep technical documentation generation workflow using zen mcp's clink and docgen tools. First uses clink to launch gemini CLI in WSL for code analysis, then uses docgen for structured document generation with complexity analysis. Specializes in documents requiring deep understanding of code logic, model architecture, or performance bottleneck analysis. Use when user requests "use gemini for deep analysis", "generate architecture analysis document", "analyze performance bottlenecks", "deeply understand code logic", or similar deep analysis tasks. Default output is .md format.
Control the Chrome the user already has open and logged in through the Browser Relay CLI, without launching a separate automation browser or taking over the foreground tab. Use when an agent needs to work with existing sessions, cookies, extensions, SSO or intranet pages, or a browser on another machine. Prefer the CLI; use HTTP only for code, tests, or integrations. Skip static pages and pure REST APIs.
> Delegate a coding task to Mistral Vibe and supervise the result via git diff. Also handles /vibe-report [--since N] [--project NAME] [--fails] — token/cost/failure report.
Undo or revert code changes safely. Use when the user asks to undo, revert, roll back, restore, recover, go back, remove recent changes, or compare current work against a previous checkpoint.
Preserve a rollback path before risky code or website edits. Use when changes may touch many files, delete files, overwrite generated output, alter user work, refactor shared behavior, modify deployment config, or otherwise risk losing working code.
Use before installing or recommending npm packages, GitHub repos, templates, MCP servers, plugins, Codex skills, ChatGPT skills, scripts, CLI tools, design libraries, scraping tools, or AI agent tools for frontend or website work. Produces trust classifications, install-safety decisions, safer alternatives, and project-local/global install guidance.
Audit frontend websites and apps before launch. Use for production-readiness reviews, visual polish checks, responsive QA, accessibility risks, performance and SEO basics, interaction states, forms, media, copy clarity, trust signals, and ship/no-ship recommendations for React, Next.js, static sites, dashboards, landing pages, portfolios, and product UI.
Implement Motion for React layout transitions. Use for layout prop, layoutId, shared element transitions, tabs, expanding cards, accordions, reordering lists, filterable grids, animated underline nav, product UI panels, portfolio previews, and smooth size/position changes in React.
Define website motion direction before implementation. Use for cinematic websites, Viktor-style motion, GSAP/ScrollTrigger pages, Motion for React microinteractions, Framer-like transitions, scroll reveals, product storytelling, luxury pacing, and any site where animation should feel intentional rather than generic.
Implement refined React and Motion for React microinteractions. Use for buttons, menus, nav, modals, tabs, cards, accordions, layout transitions, reveal wrappers, hover/tap states, mobile menus, and interactive UI that should feel premium without heavy GSAP timelines.
Implement beautiful modern websites and web apps with an opinionated premium frontend stack. Use for Next.js, React, Tailwind, Motion, GSAP, Lenis, Three.js/React Three Fiber, shadcn/ui customization, responsive layouts, landing pages, portfolios, cinematic sites, luxury brand sites, Squarespace-like sites, and any frontend build where Codex should produce polished modern UI by default.
Create Motion for React page transitions and route transitions. Use for AnimatePresence, route-level enter/exit, view transitions, shared page elements, Next.js client navigation, loading transitions, portfolio detail transitions, and cinematic but accessible navigation motion.
Implement Motion for React animation patterns for premium websites and apps. Use for motion/react, motion components, variants, initial/animate/exit, whileHover, whileTap, whileInView, useAnimate, useInView, useReducedMotion, MotionConfig, LazyMotion, microinteractions, reveal animations, and React-state-driven UI motion.
Design Next.js Server Component and Client Component boundaries. Use when deciding where to add use client, how to pass props from server to client, how to keep secrets off the client, how to reduce bundle size, how to interleave interactive components, or how to structure React components in App Router projects.
Plan and implement Next.js App Router routing for premium websites and apps. Use when working with app/ routes, pages, layouts, templates, loading, error, not-found files, route groups, dynamic segments, nested navigation, Link usage, or homepage structure in a Next.js project.
Structure modern Next.js websites and landing pages. Use for App Router projects, TypeScript, metadata, fonts, images, static pages, route groups, sections, component organization, performance, SEO basics, and production-ready architecture for premium websites.
Use when Codex needs premium visual inspiration sources, website galleries, studio references, product-site references, motion references, UI examples, luxury/editorial/Squarespace/Raycast/Linear/Vercel-level references, or a non-generic reference set before designing a website.
Use Radix Primitives for accessible custom React UI. Use for dialogs, dropdown menus, popovers, tooltips, tabs, accordions, switches, sliders, radio groups, checkboxes, select menus, navigation menus, focus management, keyboard interactions, and unstyled primitives that need premium custom styling.
Craft React component composition for websites and apps. Use when splitting large JSX files, creating reusable sections, primitives, slots, children-based composition, product UI components, portfolio sections, landing-page modules, design-system primitives, or maintainable component structure.
Build accessible React components for websites and apps. Use when creating buttons, links, menus, dialogs, tabs, accordions, carousels, forms, icon buttons, nav, skip links, focus states, keyboard behavior, ARIA, semantic markup, or reusable UI primitives.
Craft polished React components for websites and apps. Use for reusable sections, UI primitives, composition, props, state, responsive behavior, interaction states, accessibility, and avoiding monolithic or brittle frontend implementations.
Implement polished React form patterns. Use for contact forms, lead forms, booking forms, waitlists, checkout steps, newsletter signup, controlled or uncontrolled fields, validation, labels, errors, loading, success states, server actions, autocomplete, accessibility, and conversion-focused form UX.
Design and implement React loading, error, empty, offline, retry, not-found, Suspense, skeleton, and route-boundary states. Use when a website or app needs polished fallbacks for data fetching, async UI, lists, forms, dashboards, product pages, commerce, portfolios, or Next.js route files.
Build responsive React components and sections for premium websites. Use when components need mobile, tablet, desktop, container-query, CSS-grid, flex, aspect-ratio, text-fit, overflow, media-crop, navigation, dashboard density, or responsive interaction behavior.
Discipline React state, derived data, effects, refs, reducers, context, and event handlers. Use when components have duplicated state, unnecessary useEffect, prop-to-state syncing, stale closures, event logic in effects, external subscriptions, DOM integration, network sync, or complex UI state.
>- The official Skill Base CLI client. Use the `skb` (Skill Base CLI) command to search, install (single skill or collection), update, delete, publish, and import-from-GitHub skills from Skill Base, as well as configure skb. Triggered when users say "publish skill to skill base", "install collection", "import skill from github", "download/update/delete skill from skill base", "configure skb", "am I logged in", "check skb login", or "configure skill-base-cli".
Run external coding agents (Codex, Claude Code, OpenCode, native Grok Build, Gemini) as independent reviewers, repository researchers, or single-agent implementers. Use for multi-model opinions and code review, evidence-backed exploration of local or remote repositories, full-access delegation, steerable long-running work, or reattaching to delegated runs. Not for simple questions answerable directly from docs or the current codebase.
Software-engineering heuristics based on Mark Seemann's Code That Fits in Your Head (2021), updated for agent-driven development. Use when writing or reviewing code, refactoring accidental complexity or a Big Ball of Mud, controlling technical or architectural debt in generated code, designing APIs and invariants, adding a feature through a walking skeleton and acceptance tests, debugging a defect with reproducible tests or bisection, threat-modelling endpoints and trust boundaries with STRIDE, planning a legacy or Strangler migration with rollback, or setting up a maintainable codebase. Covers decomposition and cyclomatic complexity, cohesion, encapsulation, outside-in TDD, separation of concerns, Git/review discipline, safe evolution, and troubleshooting. Not for language syntax, framework tutorials, production incident response, or performance profiling.
Manage hooks and automation for coding agents (Claude Code, Codex CLI, OpenCode). Use when users want to add, list, remove, update, or validate hooks. Triggers on requests like "add a hook", "create a hook that...", "list my hooks", "remove the hook", "validate hooks", or any mention of automating agent behavior with shell commands or plugins.
Install, upgrade, configure, and verify developer CLI tools safely. Use when a user asks to install a new CLI, command-line app, SDK tool, package-manager binary, GitHub release binary, language runtime tool, or AI/vendor CLI; configure shell PATH/completions; run first login; set API keys, tokens, or env variables for a CLI; migrate an existing CLI install; or troubleshoot a CLI installation while avoiding secret leakage.
Investigate GitHub repository history before risky code changes using git blame/log, GitHub PRs, review comments, squash/rebase/cherry-pick/rename heuristics, and cited evidence. Use when asking why code exists, whether a change is safe, what PR introduced behavior, or before editing API, compatibility, security, concurrency, persistence, migration, or performance-sensitive code.
Create, publish, delete, and submit plugins for coding agents (Claude Code, OpenCode). Use when user wants to (1) create a new plugin with proper structure, (2) create or configure a plugin marketplace, (3) publish plugins to GitHub/GitLab/npm, (4) delete/uninstall plugins, (5) validate plugin structure, or (6) prepare and submit plugins to the official Anthropic directory or the OpenCode ecosystem.
Use this skill when the user asks to plan, design, scope, estimate, or implement a feature, bug fix, refactor, migration, integration, API change, UI change, or other project modification. Enforces a planning gate before editing code — investigate project context, analyze the task, surface ambiguities, contradictions, risks, dependencies, and blockers, ask focused questions, produce an evidence-based step-by-step plan, and implement only after explicit user approval. Not for trivial one-line edits, pure questions about the codebase, or changes the user has already reviewed and approved for direct implementation.
| Maintain a project thesaurus (domain glossary) following DDD ubiquitous language modules, database fields, API endpoints, events, files, or directories. Also use when the user asks to "create thesaurus", "update glossary", "add term", "rename to match domain", "check naming consistency", "what should I call this", "domain language", "ubiquitous language", or "naming conventions". Ensures all names in the codebase are consistent, descriptive, and aligned with the shared domain vocabulary. Not for general code style or linting — only for domain term consistency.
Expo React Native mobile app development with RevenueCat payments, AdMob ads, i18n localization, onboarding flow, paywall, and NativeTabs navigation
Find new skills on GitHub or check a specific skill before installing. Use when the user wants to search for skills, evaluate a skill URL, check overlap and security risk before installing, or compare a local skill against alternatives. Trigger with '/janitor-discover'.
Use when the user wants to add an in-site feedback loop to a website repo — a floating "提个建议" button where allowlisted visitors submit suggestions that become a GitHub Issue, which GitHub Actions turns into an automatic code change via Claude Code, auto-merges and deploys, and records on a /_feedback dashboard with one-click revert. Triggers — "给网站加个反馈对话框", "提一句话就自动改网站", "装上反馈闭环", "feedback loop", "/wjs-looping-feedback".
为 iOS 项目配置 fastlane + GitHub Actions，实现推送 main 分支自动构建并上传 TestFlight。参考实现：Cathier 项目。触发词：「testflight」「fastlane」「自动构建」「CI TestFlight」「/wjs-publishing-testflight」。
Upload one or many videos to YouTube. Use when the user wants to "上传到 YouTube", "发 YouTube", "批量上传", "upload to YouTube", "post videos to YouTube", or to publish a finished `final/` directory of MP4s. Reads per-video metadata (title / description / tags) from a sibling `UPLOAD_META.md` file when present (the user's standard markdown format), or from command-line flags. Survives behind a SOCKS/HTTP proxy by using `requests` directly for the resumable upload (the stock `google-api-python-client` MediaFileUpload stalls under this user's proxy setup).
Use when 王建硕 wants to systematically improve his X (Twitter) content by iterating on the content-generation prompt (prompts/x/prompt.md, used by the every-6h tweet Action) and finding which prompt version produces the highest-reach tweets. Each prompt edit is a git-SHA-versioned, numbered experiment with a hypothesis; tweets are attributed to the version live at post time and judged on median impressions per tweet. Also mines per-tweet impression data for content-feature signals (angle / length / topic) that feed the next prompt edit. North-star = impressions per tweet. Triggers — "改 X 的 prompt", "X 内容改进", "哪版 prompt 最好", "什么内容 impression 高", "improve my tweets", "A/B test the X prompt", "/wjs-x-improving-content".
Backend API design specialist. Use when building REST/GraphQL APIs, designing endpoints, data models, or backend architecture. Covers RESTful principles, HTTP semantics, error handling, versioning, and OWASP-aligned security.