All authors
Claude Skills by JoshuaShepherd
github.com/JoshuaShepherd397 skills10 installs150 views
- Chat Ui AuditAudit and fix chat-based AI UI (chatbots, agents, floating chat) against production best practices from Claude, ChatGPT, and modern conversational AI interfaces. Use when building, reviewing, or improving any chat UI.Votes: 0GitHub stars: 2
- Color AuditExpert color palette audit for movemental — verify semantic token completeness, WCAG contrast compliance, 60-30-10 distribution, and tonal stacking correctness. Light-primary site with regional Midnight sections.Votes: 0GitHub stars: 2
- Design AuditAudit a page or component against the Digital Curator design spec (DESIGN.md) and movemental project conventions. Use to check visual quality, accessibility, token compliance, and consistency before shipping.Votes: 0GitHub stars: 2
- Design Chain AuditUnified design chain audit for Movemental — flushes drift across all 5 layers (Stitch → tokens → primitives → components → layouts) covering color, typography, Tailwind hygiene, pattern, a11y, and interaction fidelity against the "Warm Scholarly Authority" design system. Use before shipping any UI or after a large build sprint.Votes: 0GitHub stars: 2
- Design ChainAudit and enforce the five-layer design chain (tokens → Tailwind → primitives → sections → pages) across all components and pages. Finds hardcoded values, layer violations, broken mode parity, and missing primitives.Votes: 0GitHub stars: 2
- Design SectionDesign a new UI section or component for movemental using DESIGN.md conventions — tonal stacking, primitives, semantic tokens, and the Stitch-informed editorial style.Votes: 0GitHub stars: 2
- Designer DashboardApply the Stitch → tokens → primitives → components → layouts design chain to React/Tailwind dashboard UI for cohesive, on-brand surfaces. Use when building or refactoring dashboard routes, course/lesson editors, metadata pages, shell chrome, or running an agentic UI pass that must stay token-aligned.Votes: 0GitHub stars: 2
- Figma PromptGenerate a complete Figma Make prompt package — Context Primer, Checkpoint, Section Build Prompts, and Iteration Templates — for any UI page, component, or screen. Uses intent-first prompting and Figma-native vocabulary. Counterpart to the studio-prompt skill, tuned for design artifacts rather than working code.Votes: 0GitHub stars: 2
- Frontend CleanupAudit a React/Next.js codebase for unused components, -v2 naming debt, and folder disorganization. Archives dead code and renames/restructures live components.Votes: 0GitHub stars: 2
- Html To React TailwindConvert HTML/CSS/JS files into production-ready React components with Tailwind CSS. Handles CSS-to-utility mapping, JS-to-React state/effects, component decomposition, and TypeScript types. Triggers on "HTML to React", "convert HTML", "migrate to React", "React conversion".Votes: 0GitHub stars: 2
- Icon AuditAudit and fix icon usage for movemental — mixed libraries, wrong sizes, hardcoded colors, missing accessibility, and illustration anti-patterns. Enforces lucide-react as the single icon library.Votes: 0GitHub stars: 2
- Icon SystemEstablish or validate the canonical Icon wrapper component, size token scale, stroke weight conventions, and illustration usage standards. Creates src/components/ui/icon.tsx and documents the full icon system. Run once to bootstrap, then as a validator.Votes: 0GitHub stars: 2
- Movemental InkFront-end UI design expert for movemental-ai's "Ink Band" design system — the agent room. Use when building or restyling any screen, primitive, shell zone, or component on the .ink-band-surface to match the existing visual language. Anchors to the .ink-band-surface tokens in src/app/globals.css, the agent-room CSS module (src/components/agent-room/ink-band.module.css), the real component tree (shell/ · screen/ · ink/), and docs/design/INK_BAND_DESIGN_CHAIN.md. Keywords: Ink Band, agent room, ...Votes: 0GitHub stars: 2
- New PageScaffold a new public page following project conventions. Use when adding a new route under (public).Votes: 0GitHub stars: 2
- Oatmeal Editorial UiFront-end UI design expert for the movemental-html-template "Oatmeal" static marketing template. Use when building or restyling any HTML page, hero, section, card, nav, CTA band, or footer to match the existing visual language. Anchors to css/tokens.css (the token SSOT), css/components.css (ml-* primitives), the design-chain/design-chain.html charter, and _reference/style-spec.json. Keywords: oatmeal, cream paper, Playfair Display, Inter, pill CTA, surface tiers, hairlines, terminal period, m...Votes: 0GitHub stars: 2
- Page AuditHolistic audit of any movemental.com page — UI, content, architecture, UX, and conversion — writes a markdown report and a standalone fix prompt.Votes: 0GitHub stars: 2
- Puck Visual EditorBuild, extend, and persist Puck visual editors with React/Next.js and Supabase. Use whenever the user mentions Puck, @puckeditor/core, visual editor, site pages, puck_data, drag-and-drop CMS, block registry, Render vs Puck, RSC, per-page component palettes, richtext, plugin rail, slots, permissions, or data migration — even if they do not say "Puck" by name.Votes: 0GitHub stars: 2
- Responsive AuditAudit and fix responsiveness issues for movemental — breakpoint coverage, layout collapse, touch targets, typography scaling, overflow, and navigation. Enforces mobile-first design for Next.js 16 + Tailwind v4.Votes: 0GitHub stars: 2
- Scholarly Authority UiFront-end UI design expert for movemental-visual-editor-main's "Warm Scholarly Authority" dashboard design system. Use when building or restyling any dashboard page, content/course card, editor surface, list/detail view, shell chrome, or component to match the existing visual language. Anchors to src/app/globals.css (@theme tokens), the src/components/ui/* primitives, and golden pages like src/app/(dashboard)/content/page.tsx. Keywords: warm scholarly authority, cream paper, deep navy, amethy...Votes: 0GitHub stars: 2
- Scholarly Editorial UiFront-end UI design expert for the alan-hirsch app's "Scholarly Editorial / Plum & Parchment" design system. Use when building or restyling any page, section, hero, card, nav, or component in this repo — to match the existing visual language. Anchors to src/app/globals.css tokens, tailwind.config.ts, and _docs/_build/design/SCHOLARLY_EDITORIAL.md. Keywords: plum, parchment, Newsreader, Manrope, scholarly, editorial, tonal surfaces, no-line rule, shadcn, Radix, motion/react, design tokens, the...Votes: 0GitHub stars: 2
- Tailwind Cleanup GeneralDesign-agnostic Tailwind best-practice cleanup that conforms to the CURRENT repo's design schema. If the schema is already documented, it enforces it; if not, it first documents the schema as a layered charter (charter → tokens → primitives → components → layouts) by reading the repo, then runs the cleanup and applies fixes. Use whenever a Tailwind/CSS best-practice pass is needed in any repo and you want fixes that stay inside the established design system instead of imposing a new one. Trig...Votes: 0GitHub stars: 2
- Tailwind CleanupScan and fix Tailwind anti-patterns for movemental — hardcoded colors, arbitrary values, raw HTML bypassing shadcn/primitives, border violations, and non-semantic tokens. Enforces DESIGN.md token-first design.Votes: 0GitHub stars: 2
- TypesetImprove typography by fixing font choices, hierarchy, sizing, weight consistency, and readability. Makes text feel intentional and polished.Votes: 0GitHub stars: 2
- Typography PolishAudit and fix typography across movemental — heading hierarchy, Inter font compliance, display tracking, eyebrow conventions, prose width, and content readability across all page surfaces.Votes: 0GitHub stars: 2
- Ui Hook Wiring AuditAudit and fix UI component data wiring — verifies every component renders the correct data by tracing rendered fields back to the type-safe hooks layer. Checks that book thumbnails, author profiles, course cards, video metadata, and all other domain data reach the correct UI locations through the right simplified or custom hooks. Reports status for each component, then fixes only incorrectly wired paths.Votes: 0GitHub stars: 2
- Visual Storytelling AuditCross-platform audit of visual storytelling components — cards, grids, stats, comparisons, numbered steps, section rhythm, and narrative flow. Ensures every visual element tells the story with the best design possible. Use when auditing pages for narrative clarity, visual hierarchy, and design token compliance.Votes: 0GitHub stars: 2
- Zenwrite Design ChainBuild new UI or audit/align existing UI for the ZenWrite scholarly-writing app — its light-primary, dual-sphere design system (Newsreader serif + Manrope, brand-violet content sphere, sky/emerald/rose community sphere) plus React 19 + Tailwind v4 and general web/a11y/responsive best practice. Use whenever creating, editing, reviewing, or "bringing into alignment" any ZenWrite component, panel, screen, or page — even when the user only says "build a component," "make this match our style," "au...Votes: 0GitHub stars: 2
- Zenwrite DesignDesign and build new UI for ZenWrite — the light-primary, distraction-free scholarly-writing app — the best possible way within its own design chain (Tokens → Primitives → Components → Built → Patterns). Newsreader serif + Manrope, brand-violet content sphere, sky/emerald/rose community sphere, React 19 + Tailwind v4 (CSS-first). Use whenever CREATING or EXTENDING a ZenWrite component, panel, screen, tile, overlay, wizard, or page — including "build a component," "add a panel," "make a new sc...Votes: 0GitHub stars: 2
- Zenwrite Ui AuditAudit and improve existing ZenWrite UI — React 19 + Tailwind v4 quality plus the ZenWrite design chain (light-primary, dual-sphere; Newsreader serif + Manrope; brand-violet content, sky/emerald/rose community). Finds and fixes design drift (hardcoded hex, dynamic color strings, wrong sphere accents, missing focus rings, ad-hoc badges, dark-mode hijacks, token misuse) AND React/Tailwind/a11y/perf issues, ranked by severity, then applies the fixes. Use whenever REVIEWING, ALIGNING, CLEANING UP,...Votes: 0GitHub stars: 2
- Docs Design SystemAudit and update design documentation in _docs/_build/design/ to match the actual UI stack (tokens, Tailwind, shadcn primitives, domain components, pages). Keeps DESIGN_SYSTEM_SSOT.md and the design chain aligned with src/.Votes: 0GitHub stars: 2
- Docs SetupBootstrap the canonical two-part _docs directory for any context-coded project in the Claude/AntiGravity environment. Creates _build/ (finite agent-only technical docs) and _public/ (facts/, insights/, proposals/) plus a CONSTITUTION.md that governs the split. Writes every README, seeding voice and audience expectations for _public. Run once at project start, or run on an existing project to audit and migrate into the correct structure.Votes: 0GitHub stars: 2
- Docs Type SafetyAudit and update the type safety documentation in _docs/type/ to match the actual codebase state. Ensures docs are the single source of truth without errors or gaps.Votes: 0GitHub stars: 2
- Analytics AuditAudit the analytics implementation across all providers (GA4, PostHog, Vercel Analytics, Supabase) — verifies events fire correctly, tenant_id is set on all events, no duplicates, user identity is wired, and privacy/GDPR compliance is met.Votes: 0GitHub stars: 2
- Analytics DashboardBuild React analytics dashboard components for this platform — KPI metric cards, time series charts (Recharts), funnel views, and per-tenant data scoping. Uses shadcn/ui + Recharts, wired to React Query hooks over the analytics_events Supabase table.Votes: 0GitHub stars: 2
- Analytics SetupBootstrap the complete analytics stack for this Next.js 15 + Supabase project — GA4 (org-wide + per-tenant), PostHog, Vercel Analytics, and Supabase-native analytics. Runs sub-skills in sequence and validates each layer.Votes: 0GitHub stars: 2
- Auth SetupSet up Supabase Auth for Next.js 15 (App Router) or Vite + React — sign-up, sign-in, OAuth providers, session middleware, protected routes, RLS user scoping, and auth UI components. Handles both frameworks with SSR-safe cookie patterns. Use when bootstrapping auth on any new project.Votes: 0GitHub stars: 2
- Ci SetupSet up GitHub Actions CI/CD pipeline for Next.js 15 or Vite + Express — lint, typecheck, unit tests, e2e tests, build validation, and Vercel preview deployment. Writes workflow YAML files and configures branch protection. Use when setting up CI on any new project.Votes: 0GitHub stars: 2
- Deploy To VercelDeploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment". Supports both interactive login and token-based authentication.Votes: 0GitHub stars: 2
- E2e Studio TestsRun e2e tests in the Studio app. Use when asked to run e2e tests, run studio tests, playwright tests, or test the feature.Votes: 0GitHub stars: 2
- Email SetupSet up transactional email via Resend for Next.js 15 or Vite + Express — React Email templates, send helpers, welcome/magic-link/notification emails, and local dev preview. Use when adding email to any project in this stack.Votes: 0GitHub stars: 2
- Env SetupScaffold and validate environment variables for Next.js 15 or Vite + Express — Zod-validated env schema, .env.example with all required vars, runtime validation that fails fast on missing values, and a check:env script. Use when starting a new project or auditing env var hygiene.Votes: 0GitHub stars: 2
- Feature ConstitutionExport a platform feature as a product constitution — data model, API contracts, business rules, and acceptance criteria for pasting into AI Studio Build mode or any prototyping tool. Use when generating a feature spec, exporting a course/article/agent feature, or creating a data reference document.Votes: 0GitHub stars: 2
- Ga4 SetupSet up Google Analytics 4 for this Next.js 15 multi-tenant platform — org-wide property, per-tenant custom dimensions, typed event utilities, server-side Measurement Protocol, and GA4 Admin API for programmatic tenant provisioning.Votes: 0GitHub stars: 2
- Liveblocks WorkspaceWork with the Liveblocks + BlockNote collaborative workspace — add features, debug content rendering, configure rooms, manage auth, set up webhooks, add comments/threads, implement version history, or troubleshoot collaborative editing. Use when touching any workspace/docs collaboration code.Votes: 0GitHub stars: 2
- Migrations WorkflowManage the full Drizzle ORM migration lifecycle — generate, review, apply, rollback, and sync with Supabase. Covers the safe workflow for schema changes, CI migration checks, and multi-environment migration strategy. Use when making any database schema change.Votes: 0GitHub stars: 2
- Postgres Best PracticesComprehensive PostgreSQL reference covering performance optimization, schema design, indexing, query patterns, connection management, security, and advanced features. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, migrations, or database configurations.Votes: 0GitHub stars: 2
- Posthog SetupSet up PostHog product analytics for this Next.js 15 + Supabase multi-tenant platform — person identification, group analytics (org + tenant), session replay, feature flags, funnels, and server-side event capture.Votes: 0GitHub stars: 2
- Project SetupBootstrap a production-ready React + Tailwind + Supabase + Sentry app — either Next.js 15 (App Router) or Vite + React Router. Installs all core libraries, writes every config file, sets up shadcn/ui, Supabase auth clients, Sentry three-config, Zod env validation, React Query, dark mode, and the full token system. Asks Vite vs Next.js upfront. Use when starting any new project in this stack.Votes: 0GitHub stars: 2
- React AuditAudit React 19 configuration and usage patterns for correctness and optimization — hooks, components, error boundaries, routing, state management, performance, and best practices. Use to check React health before shipping.Votes: 0GitHub stars: 2
- Repo CleanupHolistic single-repo hygiene pass for context-coded React + Next.js/Vite + Tailwind + Supabase + Vercel + OpenAI/Anthropic/Gemini stacks. Use when a repo needs its docs triaged, dead code archived, stale HTML/templates removed, unused deps flagged, and its CLAUDE.md / AGENTS.md / .claude skill surface re-tightened so Cursor and Claude Code have a clean working context. Always archives (does not delete) under `_archive/<YYYY-MM-DD>/`. Defers component- and style-level work to $frontend-cleanup...Votes: 0GitHub stars: 2