Agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more by @JohnWayneeee
Skill Claude CodeCodex
Generate and deploy a complete brand asset pack for a Next.js App Router project. Scans the project, prints what to generate with exact specs, then imports and wires everything correctly.
Skill Claude CodeCodex
Run a pre-deploy browser audit of a live, preview, or local web page for accessibility, SEO, Lighthouse quality, and critical UX issues. Use when asked to audit a page/site before deployment, check WCAG 2.2 AA, WAI-ARIA, Lighthouse, accessibility, SEO, contrast, keyboard navigation, focus states, semantic HTML, forms…
Skill Claude CodeCodex
Convert Figma or Pencil designs into production-ready frontend code using Feature-Sliced Design and Tailwind CSS v4. Use when translating designs into code, extracting tokens, mapping UI to FSD layers (shared / entities / features / widgets / pages / app-shell / app), enforcing Server vs Client boundaries when…
Skill Claude CodeCodex
Model product UI actions from user intent questions after a meaningful outcome, completion, created resource, imported data, uploaded file, synced integration, report, deployment, automation, review state, handoff, or workflow milestone. Use when deciding which actions to show, hide, group, name, prioritize, defer, or…
Skill Claude CodeCodex
Convert Pencil .pen design files and named Pencil node IDs into production frontend code. Use when asked to implement, migrate, reproduce, or refine a Pencil/Figma-like visual design in code, especially for responsive artboards, glassmorphism, typography matching, background image layers, design tokens, or visual…
Skill Claude CodeCodex
Best practices for writing, reviewing, and refactoring React Flow / @xyflow/react v12 canvases. Use when work touches React Flow components, custom nodes, custom edges, handles, node data typing, viewport controls, MiniMap/Background/Panel usage, NodeToolbar, NodeResizer, or workflow-builder review tasks.
Skill Claude CodeCodex
Final visual polish for an existing UI without redesigning it. Use after structure is clear, when asked to improve spacing, alignment, text hierarchy, readability, shadows, highlights, effects, action placement, or overall production feel. For screen structure, layer naming, code handoff, preview scenes, or animation…
Skill Claude CodeCodex
Configure, adjust, debug, and verify React Flow workflow nodes. Use when working on custom node components, especially for node handles, multi-channel connections, edge ids/styles, NodeResizer behavior, drag handles, nodrag/nowheel areas, and markdown scroll containers.
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: