wpank/ai
Skill Claude CodeCodex
Patterns for skeleton loaders, shimmer effects, and loading states that match design system aesthetics. Covers skeleton components, shimmer animations, and progressive loading. Use when building polished loading experiences. Triggers on skeleton, loading state, shimmer, placeholder, loading animation.
wpank/ai
Skill Claude CodeCodex
Curated collection of professional color and typography themes for styling artifacts — slides, docs, reports, landing pages. Use when applying visual themes to presentations, generating themed content, or creating custom brand palettes. Triggers on theme, color palette, font pairing, slide styling, presentation theme…
wpank/ai
Skill Claude CodeCodex
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
wpank/ai
Skill Claude CodeCodex
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
wpank/ai
Skill Claude CodeCodex
CSS implementation patterns for layout, typography, color, spacing, and responsive design. Complements ui-design (fundamentals) with code-focused examples.
wpank/ai
Skill Claude CodeCodex
WHAT: Docker containerization expertise - multi-stage builds, image optimization, security hardening, Docker Compose orchestration, and production deployment patterns. WHEN: User needs Dockerfile optimization, container issues, image size problems, security hardening, networking configuration, Docker Compose setup, or…
wpank/ai
Skill Claude CodeCodex
WHAT: Kubernetes manifest generation - Deployments, StatefulSets, CronJobs, Services, Ingresses, ConfigMaps, Secrets, and PVCs with production-grade security and health checks. WHEN: User needs to create K8s manifests, deploy containers, configure Services/Ingress, manage ConfigMaps/Secrets, set up persistent storage…
wpank/ai
Skill Claude CodeCodex
Create production-ready Kubernetes manifests for Deployments, Services, ConfigMaps, and Secrets following best practices and security standards. Use when generating Kubernetes YAML manifests, creating K8s resources, or implementing production-grade Kubernetes configurations.
wpank/ai
Skill Claude CodeCodex
Prometheus monitoring — scrape configuration, service discovery, recording rules, alert rules, and production deployment for infrastructure and application metrics.
wpank/ai
Skill Claude CodeCodex
Smart contract security patterns, vulnerability prevention, gas optimization, and audit preparation for Solidity development. Use when writing, auditing, or hardening smart contracts against reentrancy, overflow, access control, oracle manipulation, and front-running attacks.
wpank/ai
Skill Claude CodeCodex
WHAT: Turborepo monorepo build system - caching, task pipelines, and parallel execution for JS/TS projects. WHEN: User configures turbo.json, creates packages, sets up monorepo, shares code between apps, runs --affected builds, debugs cache misses, or has apps/packages directories. KEYWORDS: turborepo, turbo.json…
wpank/ai
Skill Claude CodeCodex
Extract design systems, architecture patterns, and methodology from codebases into reusable skills and documentation. Use when analyzing a project to capture patterns, creating skills from existing code, extracting design tokens, or documenting how a project was built. Triggers on "extract patterns", "extract from…
wpank/ai
Skill Claude CodeCodex
Build flexible, maintainable React components using compound components, context providers, and explicit variants. Avoid boolean prop proliferation.
wpank/ai
Skill Claude CodeCodex
Build beautiful native iOS/Android apps with Expo Router. Covers route structure, native tabs, animations, blur effects, liquid glass, SF Symbols, and platform patterns.
wpank/ai
Skill Claude CodeCodex
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Focuses on creative direction and memorable design choices.
wpank/ai
Skill Claude CodeCodex
Building native mobile UIs with Expo Router and React Native. Covers routing, navigation, styling, native controls, animations, and platform conventions following Apple Human Interface Guidelines.
wpank/ai
Skill Claude CodeCodex
Next.js App Router best practices — Server Components, data fetching, caching, routing, middleware, metadata, error handling, streaming, Server Actions, and performance optimization for Next.js 14-16+.
wpank/ai
Skill Claude CodeCodex
React and Next.js performance optimization guidelines from Vercel Engineering. 57 rules across 8 categories for writing, reviewing, and refactoring React code.
wpank/ai
Skill Claude CodeCodex
React composition patterns for scalable component architecture. Use when refactoring components with boolean prop proliferation, building flexible component libraries, designing reusable component APIs, or working with compound components and context providers.
wpank/ai
Skill Claude CodeCodex
Upgrade React applications from class components to hooks, adopt concurrent features, and migrate between major versions.
wpank/ai
Skill Claude CodeCodex
React and Next.js performance optimization patterns. Use when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance. Triggers on tasks involving components, data fetching, bundle optimization, re-render reduction, or server component architecture.
wpank/ai
Skill Claude CodeCodex
Modern responsive CSS patterns using container queries, fluid typography, CSS Grid, and mobile-first strategies.
wpank/ai
Skill Claude CodeCodex
Build accessible, customizable UIs with shadcn/ui, Radix UI, and Tailwind CSS. Use when setting up shadcn/ui, installing components, building forms with React Hook Form + Zod, customizing themes, or implementing component patterns.
wpank/ai
Skill Claude CodeCodex
Build production-ready component libraries with Tailwind CSS using CVA, compound components, design tokens, and theming.