Claude Skills by Uwayxt

Audit against WCAG 2.1 AA across perceivable, operable, understandable, robust. Use when accessibility, a11y, WCAG, contrast, screen reader, tap target, or is this accessible.

Run accessibility checks on the actual built product, not just the design. Use when accessibility audit, a11y runtime check, WCAG on real build, screen reader, keyboard navigation, or ARIA attributes.

Define how components change interaction patterns across devices, not just size. Use when adapting UI for mobile, component transformation, sidebar to bottom-nav, table to card, or touch interaction patterns.

Design intuitive UX patterns for AI interfaces including streaming, confidence, overrides, and prompts. Use when AI features, prompt UX, streaming UI, LLM interface, or AI assistant.

Architects high-converting SaaS pricing models and paywall UX using behavioral economics principles: Decoy Effect (asymmetric dominance), Loss Aversion framing, Default Anchoring (annual billing toggle), and strategic Feature Gating hierarchies. Use when: pricing table, paywall, monetization, pricing tiers, decoy effect, how to price this product, subscription pricing, feature gating, upgrade UX.

Translate a Business Model Canvas into product modules. Use when bridging business strategy to product architecture.

Evaluate monetization and unit economics. Use when how will this make money, business model, monetization, unit economics, or pricing.

Predict visual attention paths and audit cognitive friction using eye-tracking simulation, Fitts's Law motor effort, Hick-Hyman Decision Time, and Visual Saliency Ratio. Use when cognitive load, attention heatmap, eye tracking, visual friction, CTA hierarchy, decision overload, or first 500ms attention.

Document every component state and variant. Use when component states, button variants, how should this component look in all states, state matrix, or interactive states.

Review through business, UX, UI, and technical lenses before shipping. Use when final review, is this ready to ship, review business + UX + UI + tech, launch readiness, or cross-functional check.

Define dual-theme token layer and elevation models for light and dark mode. Use when dark mode, theme switching, color scheme, or dark theme.

Choose and configure the application shell, grid, and responsive behavior for data-dense layouts. Use when dashboard layout, admin panel, management interface, data grid layout, sidebar layout, or topbar vs sidebar.

Establish a manifest-driven dashboard shell. Use when designing scalable, module-agnostic layouts.

Scans a codebase for design token violations — components bypassing the design system with hardcoded colors, magic number spacings, literal font sizes, and other CSS anti-patterns. Produces a severity-sorted drift report with auto-fix recipes. Use when: audit:drift, hardcoded CSS, token drift, design drift, hardcoded colors, magic numbers, CSS violations, design system enforcement.

Construct a cohesive UI component library. Use when assembling reusable elements, setting up a UI kit, or auditing component consistency.

Map design specs to implementation-ready code tasks. Use when handoff to dev, implement this design, turn spec into code, design to code, or start building from the design.

Define color, spacing, shadow, and radius tokens as single source of truth. Use when design tokens, color palette, spacing scale, create a design system, consistent styling, or at the start of any new UI project.

Design comprehensive state resilience including empty, partial, offline, timeout, and failure states. Use when error state, empty state, offline mode, fallback UI, or resilient UX.

Execute user flows as functional test cases and verify outcomes match the design. Use when functional testing, user flow testing, end-to-end test, verify the flow works, or test this feature.

Evaluate systemic impact of new additions. Use when scaling dashboards, adding new modules, or assessing layout stress.

Define internationalization, RTL layout, translation tokens, and locale formatting. Use when i18n, localization, RTL, multi-language, translation, or locale support.

Design intuitive, scalable navigation structures. Use when building a sitemap, defining navigation menus, or organizing complex feature sets.

Scan all interactive elements for missing handlers, broken links, and unconnected state changes. Use when buttons without actions, orphaned interactive elements, dead links, form without submit, or incomplete interactions.

Designs physics-based UI motion systems using harmonic spring oscillator equations (mass, stiffness, damping), asymmetric entrance/exit curves, staggered cascading delays, and mandatory reduced-motion fallbacks. Use when: spring animation, physics motion, cubic-bezier, enter exit animation, staggered list animation, modal transition, interactive gestures, agentway gen:spring.

Define motion tokens, interaction patterns, and feedback animations. Use when animation, transitions, micro-interaction, hover effects, loading states, motion, or make the UI feel alive.

Maintain the single source of truth for modules. Use when defining new feature modules, auditing module manifests, or wiring dashboard scaffolding.

Define the smallest product that tests the riskiest assumption. Use when MVP, minimum viable, what's the smallest version, cut scope, or phase 1.

Define loading strategies that make the product feel fast regardless of actual load time. Use when skeleton loaders, lazy loading, progressive rendering, perceived performance, or mobile loading speed.

Map every PRD requirement to its UI element, route, and implementation status. Use when traceability, requirement tracking, PRD coverage, what has been built, or which requirements are missing.

Execute product discovery. Use when framing new problems, mapping actors, or synthesizing initial product hypotheses.

Prioritize features with positioning and RICE/MoSCoW. Use when prioritize features, what should we build first, roadmap, MoSCoW, or RICE.

Autonomous project health audit engine that computes a Token Adherence Index (TAI) score (0–100), maps quality gaps to specific Agentway skills, and generates a structured Health Report Card with a prioritized prescription queue. Use when: health check, diagnose project, TAI score, what skills do I need, agentway doctor, project quality audit, skill recommender.

Orchestrate the closed-loop QA cycle: collect findings, batch-report with PRD references, trigger fixes, and re-test until resolved or escalated. Use when QA loop, orchestrate testing, auto-fix findings, self-healing QA, or close the feedback loop.

Define the breakpoint system and grid strategy for cross-device layouts. Use when setting up responsive design, breakpoints, mobile-first layout, fluid grid, or container queries.

Audit the product across all breakpoints before shipping. Use when responsive QA, cross-device testing, mobile audit, breakpoint check, or elements overflowing on mobile.

Audit and maintain route connections across the application. Use when adding pages or refactoring navigation.

Audit interface for auth boundaries, sensitive data exposure, and privacy compliance. Use when security review, privacy audit, data exposure, GDPR, or auth UX.

Translate cross-department needs into unified requirements. Use when requirements from sales/ops/finance, cross-department needs, stakeholder alignment, or conflicting requirements.

Define touch targets, gestures, and thumb-zone layout for touch interfaces. Use when designing for mobile, touch targets, gesture patterns, swipe, pull-to-refresh, or thumb reachability.

Define type scale, font pairing, and text hierarchy. Use when typography, font pairing, type scale, heading sizes, text hierarchy, or which font.

Evaluate UI against Nielsen's 10 usability heuristics. Use when heuristic evaluation, usability check, Nielsen's heuristics, is this UI usable, or usability review.

Map user decisions from entry to goal. Use when user flow, journey map, how does the user get from A to B, task flow, or map the steps.

Turn raw user data into ranked design insights. Use when synthesize interviews, user feedback, what did users say, research findings, analyze survey, or interview notes.

Inject destructive chaos vectors — extreme text, edge-case data, and flaky network conditions — to stress-test UI resilience before real users find the breaks. Use when stress test, chaos test, text overflow, data edge case, network failure, layout break, or "what happens when…" questions arise.

Audit layout for focal point, contrast, rhythm, and CTA hierarchy. Use when visual hierarchy, does this layout read well, check contrast and rhythm, what should the eye see first, or layout review.

Detect visual regressions and missing responsive transformations across breakpoints. Use when visual regression, screenshot comparison, layout broke on mobile, element overflowing, or component not transforming correctly.

Extract design tokens, component structure, and visual language from a reference image. Use when reference image, match this design, copy this style, extract colors from screenshot, or replicate this UI.