sdh-claude-skills

ReactJS Vite SPA conventions — React Router, Zustand, TanStack Query, Tailwind, Framer Motion, ApexCharts. Use when building Vite web SPA pages or components.

WCAG 2.2 AA accessibility audit with 4-principle framework, automated checks, color contrast analysis, keyboard navigation testing, and ARIA pattern validation. Triggers on "accessibility audit", "WCAG audit", "a11y audit", "accessibility check", "screen reader test", "keyboard accessibility", or "accessibility compliance".

Design and review REST APIs for consistency, standards compliance, and developer experience. Use this skill whenever someone asks to design an API, create endpoints, review API contracts, generate OpenAPI specs, or says things like "design the API for X", "review this endpoint", "what should the API look like", "create a REST interface", "write the OpenAPI spec", or "check my API design". Also trigger when someone mentions pagination strategy, error response format, API versioning, or rate limiting design.

Atomic Design methodology for component hierarchy across Phlex (Rails), ReactJS Vite SPA, Next.js App Router, and React Native. Covers atoms, molecules, organisms, templates, and pages with composition rules. Triggers on "atomic design", "component hierarchy", "atom component", "molecule component", "organism component", "design system structure", or "component organization".

React composition patterns for scalable component architecture. Use when refactoring components with boolean prop proliferation, building component libraries, designing compound components, or reviewing component APIs. Triggers on "composition pattern", "compound component", "boolean props", "component architecture", "render props", or "React 19 patterns".

Execute deployment workflows with pre-flight checks, environment validation, health verification, and rollback procedures. Use this skill whenever someone asks to deploy, push to staging, release to production, or says things like "deploy to staging", "release this to production", "run the deployment checklist", "is this ready to deploy", "execute the release", or "roll back the deployment". Also trigger when someone mentions deployment readiness, smoke tests after deploy, rollback procedures, or canary/blue-green deployment strategy.

Implement internationalization (i18n) and localization (l10n) for Rails backends, React Native mobile, ReactJS Vite SPA, and Next.js web apps. Use this skill whenever someone asks about translations, locales, internationalization, or says things like "add i18n support", "translate this", "support multiple languages", "add locale", "RTL support", "pluralization", "localize the app", or "web translations". Also trigger for date/currency/number formatting across locales, CSS logical properties for RTL, or server component i18n.

Monorepo architecture and management — workspace layout by deployable unit (apps/packages/tooling), dependency boundary enforcement, task orchestration and caching (Turborepo, Nx, Bazel), affected-only CI with remote cache and merge queue, one-version policy, per-app release tagging, and a generated api-client/types contract between the Rails API and its web/mobile consumers. Use this skill when someone asks about monorepo structure, workspace layout, "where should this package live", cross-package imports, module boundaries, packwerk, Turborepo or Nx setup, slow monorepo CI, affected-only builds, remote caching, merge queues, CODEOWNERS, one lockfile vs many, Changesets, or says "our monorepo is slow", "everything imports everything", or "should we use a monorepo".

Build Next.js App Router web features with Server Components, server actions, data fetching, Suspense streaming, middleware, SEO metadata, and deployment to Vercel or AWS. Use this skill whenever someone asks to build a server-rendered page, create a server component, implement a server action, set up Next.js routing, configure ISR/SSG, or says things like "create a server component for X", "build the SSR page", "add a server action", "set up Next.js middleware", "configure ISR for Y", "deploy to Vercel", or "add SEO metadata". Also trigger when someone mentions App Router patterns, Server vs Client Components, streaming with Suspense, or Next.js deployment.

Build Phlex (Ruby) view components for Rails with Atomic Design methodology, Tailwind CSS styling, Stimulus controllers, and Turbo integration. Triggers on "Phlex component", "Phlex view", "Ruby view component", "build a Phlex", "Rails component", or "view_template".

Design and implement Rails backend features with Panko serializers, PostgreSQL/PostGIS, Redis caching, Sidekiq jobs, and Centrifugo real-time channels. Use this skill whenever someone asks to build a backend feature, design a Rails model, create an API endpoint, architect a service, or says things like "build the backend for X", "design the model layer", "add a Sidekiq job", "implement caching for X", "create the controller", or "how should we structure this service". Also trigger when someone mentions Panko serializer design, PostGIS spatial queries, Redis cache strategy, or Centrifugo channel topology.

React and Next.js performance optimization with 57 rules across 8 categories. Use when reviewing React components for performance, optimizing bundle size, eliminating data fetching waterfalls, or refactoring for re-render efficiency. Triggers on "optimize React performance", "bundle size", "fix waterfall", "re-render optimization", "React best practices", or "performance review".

React Native and Expo performance best practices with 36 rules across 14 categories. Use when optimizing list performance, implementing animations with Reanimated, reviewing React Native code for performance, or working with native modules. Triggers on "React Native performance", "list optimization", "FlashList", "Reanimated best practices", "mobile performance", or "React Native best practices".

Build React Native mobile features with Zustand state management, TanStack Query data fetching, and Centrifugo real-time subscriptions. Use this skill whenever someone asks to build a mobile screen, create a component, add a Zustand store, write a TanStack Query hook, or says things like "build the mobile UI for X", "create a screen for Y", "add real-time updates", "implement offline support", "set up navigation for X", or "how should I structure this component". Also trigger when someone mentions React Native performance, MMKV storage, map integration, or push notification implementation.

Build ReactJS (Vite) web SPA features with React Router, Zustand client state, TanStack Query server state, Tailwind CSS styling, Framer Motion animations, and ApexCharts dashboards. Use this skill whenever someone asks to build a web page, create a Vite component, add a web dashboard, build a web SPA feature, or says things like "build the web UI for X", "create a web page for Y", "add a dashboard chart", "set up Vite routing", "build the admin panel", or "create a web form". Also trigger when someone mentions Vite configuration, Tailwind component styling, Framer Motion page transitions, or ApexCharts integration.

Core engineering standards and tech stack for a Software Development House — Rails + Phlex backend, React Native, ReactJS (Vite), Next.js, PostgreSQL/PostGIS, Redis/Sidekiq, Terraform on AWS/Vercel. Use whenever writing, reviewing, planning, or scaffolding code in this stack, choosing a library, or setting up a project. Detailed per-area conventions live in the std-* skills (each scoped by file path — load the one that fits the task); specialized work routes to the agents.

Terraform infrastructure-as-code best practices with 47 rules across 9 categories. Covers state management, security, module design, resource patterns, variables, networking, data stores, compute, and cost optimization for AWS deployments. Triggers on "terraform", "infrastructure as code", "IaC", "HCL", "terraform module", "terraform state", or "terraform plan".

Generate comprehensive test suites including unit, integration, and E2E tests following AAA pattern. Use this skill whenever someone asks to write tests, generate specs, improve coverage, add test cases, or says things like "write tests for this", "add test coverage", "generate specs", "I need tests for X", "create a test suite", or "help me test this function". Also trigger when someone mentions flaky test investigation, test infrastructure setup, or mock strategy questions.

Web interface design review for accessibility, performance, and UX compliance. Fetches its rule set at run time from an upstream URL (requires WebFetch); falls back to the pinned local accessibility skills when that fetch is unavailable. Use when reviewing UI code, auditing design implementation, checking accessibility, or validating web UX. Triggers on "review UI", "check accessibility", "audit design", "review UX", "web design guidelines", or "UI compliance check". Also reviews flows for storytelling / narrative UX (StoryBrand, narrative arc, emotional beats) alongside component-level rules.

Evaluate architectural decisions, design system components, produce ADRs, and assess technical debt. Use this skill whenever someone asks to design a system, evaluate architecture, create an ADR, plan a large refactor, choose between technologies, or says things like "how should we architect X", "write an ADR", "evaluate this design", "what are the tradeoffs", "review the architecture", or "should we use X or Y". Also trigger for bounded context design, scalability planning, or migration strategy.

Brand identity creation with design tokens, color psychology, typography pairing, and brand book generation. Covers brand archetypes, voice matrix, narrative & protagonist voice (user-as-hero / StoryBrand), trend-aware positioning, and token output for Tailwind CSS and React Native. Triggers on "brand identity", "brand guidelines", "brand book", "logo usage", "brand colors", "brand voice", "brand archetype", "brand narrative", "storytelling", "narrative UX", "StoryBrand", or "brand system".

Review code and pull requests for quality, security, test coverage, and adherence to team conventions. Use this skill whenever someone asks to review a PR, check code quality, audit a diff, evaluate a changeset, or says things like "review my code", "check this PR", "look at my changes", "is this code good", "audit this module", or "what do you think of this diff". Also trigger when someone mentions code quality concerns, technical debt assessment, or asks for feedback on implementation approach.

Audit and generate compliance documentation for regulatory frameworks including SOC2, HIPAA, PCI-DSS, and GDPR. Use this skill whenever someone asks about compliance, regulatory requirements, data protection, or says things like "SOC2 audit", "HIPAA compliance", "PCI-DSS requirements", "GDPR review", "compliance checklist", "data protection audit", "regulatory controls", "privacy impact assessment", or "control mapping". Also trigger for data classification, retention policies, or audit evidence gathering.

Generate technical documentation including API docs, architecture decision records (ADRs), runbooks, changelogs, and technical specifications. Use this skill whenever someone asks to write documentation, create an ADR, generate API docs, write a runbook, or says things like "document this API", "write an ADR for X", "create a runbook for Y", "generate the tech spec", "write the changelog entry", "update the docs", or "we need documentation for this feature". Also trigger when someone mentions architecture decision recording, technical specification writing, or operational runbook creation.

Figma-to-code translation for Auto Layout, frames, components, and design tokens. Maps Figma properties to CSS/Tailwind, HTML structure, and React Native styles. Triggers on "Figma handoff", "Figma to code", "auto layout", "design handoff", "Figma translation", "design specs", or "Figma implementation".

Guide incident response for production issues including diagnosis, mitigation, communication, and post-mortem analysis. Use this skill whenever someone reports an outage, performance degradation, production error, or says things like "production is down", "users are reporting errors", "the API is slow", "we have an incident", "something broke in prod", "check the logs for errors", or "we need a post-mortem". Also trigger when someone mentions SEV1/SEV2 classification, incident communication, root cause analysis, or wants to write a post-mortem document.

Marketing asset creation with platform ad specs, email templates, landing page architecture, and social content planning. Covers Google, Meta, TikTok, LinkedIn ad formats and copy frameworks. Triggers on "marketing assets", "ad copy", "landing page", "email template", "social media content", "ad campaign", "marketing material", "content calendar", "storytelling", "narrative UX", or "StoryBrand".

Build and ship React Native betas to testers — TestFlight (internal vs external groups, Beta App Review, 90-day build expiry) and Google Play testing tracks (internal, closed, open, staged rollout), with fastlane lanes, build-number strategy, and release notes. Use when shipping a build to testers or QA, setting up TestFlight or a Play internal/closed track, automating beta distribution in CI, deciding which track a build belongs on, or when someone asks "how do I get this to testers", "push to TestFlight", "Play internal testing", "staged rollout", or why a beta build is stuck in processing or review.

iOS and Android code-signing identity management — Apple certificates, App IDs, provisioning profiles, APNs (.p8) and App Store Connect API keys, fastlane match; Android upload key vs app signing key, keystores, Play App Signing, and Play Console service accounts. Use when setting up or fixing code signing, when a certificate or provisioning profile expires, when a build fails to sign in CI, when rotating or resetting keys, when onboarding a machine or a new developer to signing, or when someone asks about keystores, .p8 keys, match, Play App Signing, "no signing certificate found", "provisioning profile doesn't include signing certificate", or "upload key vs app signing key".

Create developer onboarding guides, setup documentation, and knowledge base articles for software teams. Use this skill whenever someone asks to create onboarding docs, setup instructions, a getting started guide, team documentation, runbooks, or says things like "help new devs get started", "document our setup process", "write the onboarding guide", "create a runbook for X", or "how should we document this for the team". Also trigger when someone asks about reducing onboarding time, knowledge transfer, or team documentation strategy.

Profile and optimize application performance including Rails query optimization, React Native rendering, Redis cache strategy, PostgreSQL/PostGIS query tuning, and Sidekiq job performance. Use this skill whenever someone asks to investigate slowness, profile performance, optimize queries, reduce latency, or says things like "why is this slow", "profile this endpoint", "optimize this query", "find the bottleneck", "improve performance of X", or "this page takes too long to load". Also trigger when someone mentions N+1 queries, EXPLAIN ANALYZE, memory leaks, bundle size analysis, or cache hit rate optimization.

Safely refactor code using Fowler's patterns with test-first methodology and incremental steps. Use this skill whenever someone asks to refactor code, reduce technical debt, extract patterns, restructure modules, or says things like "refactor this", "clean up this code", "extract this into a service", "this code smells", "reduce duplication", "decompose this function", or "restructure this module". Also trigger for code smell identification, large-scale codebase transformations, or safe migration of legacy code.

Clarify vague requirements, discover hidden assumptions, and produce scoped user stories with acceptance criteria. Use when requirements are ambiguous, incomplete, or when starting a new feature, epic, or project. Also trigger when someone says "what should we build", "scope this feature", "break this down", "write user stories", "acceptance criteria", "requirements gathering", "feasibility check", or mentions unclear specifications.

Audit code for security vulnerabilities, OWASP Top 10 issues, exposed secrets, and compliance gaps. Use this skill whenever someone asks to check security, scan for vulnerabilities, audit authentication, review access control, or says things like "is this secure", "check for secrets", "security review", "audit this for OWASP", "scan for vulnerabilities", or "check our auth flow". Also trigger when someone mentions penetration testing prep, dependency CVE scanning, or security hardening.

Facilitate sprint planning, effort estimation, capacity planning, and backlog grooming. Use this skill whenever someone asks about sprint planning, story points, effort estimation, or says things like "plan the sprint", "estimate this work", "story points", "capacity planning", "backlog grooming", "prioritize the backlog", "what fits in this sprint", "velocity", or "sprint retrospective". Also trigger when someone mentions iteration planning, work breakdown, or release planning.

Design system / token standards — color, typography, spacing, motion tokens; component styling; cross-platform consistency. Use when styling components or defining tokens.

Error handling standards across Rails, React Native, Sidekiq, and API responses — Result objects, custom errors, retry/discard, consistent error JSON. Use when handling errors.

Monitoring/observability standards — structured logs with request_id, no sensitive data, health checks, CloudWatch alarms, Sentry. Use when adding logging, jobs, or controllers.

Next.js App Router conventions — Server Components, server actions, ISR/SSG, Vercel. Use when building Next.js pages, layouts, or server actions.

Phlex view component conventions — Atomic Design structure, class_variants, Stimulus, Turbo. Use when building Phlex (Ruby) view components.