Claude Skills by Intense-Visions

> Load Vue components lazily to reduce initial bundle size using defineAsyncComponent

> Communicate from child to parent components using emits and defineEmits

> Extract and reuse stateful logic across components using Vue composables

> Create custom Vue directives for low-level DOM manipulation and reusable DOM behavior

> Manage shared application state with Pinia stores in the Options or Setup style

> Share data across a component tree without prop-drilling using provide/inject

> Create and manage reactive primitive values and objects using ref and reactive

> Extract behavior into components that render nothing, delegating all rendering to the consumer via slots

> Use named, scoped, and dynamic slots to build flexible, composable component APIs

> Render a component's HTML at a different location in the DOM using Vue's Teleport

> React to data changes with watch and watchEffect for side effects and async operations

> Spawn and manage child actors for independent, concurrent state machines that communicate via message passing

> Control transition eligibility with guards and execute side effects with entry, exit, and transition actions

> Remember and restore previous state configurations with shallow and deep history pseudo-states

> Invoke promises, callbacks, observables, and child machines as services tied to state node lifecycles

> Define statecharts with createMachine for explicit states, transitions, context, and events

> Model concurrent, independent state regions that are active simultaneously within a single machine

> Connect XState machines to React components with useMachine, useActor, and useSelector hooks

> Test XState machines with direct state transition assertions and model-based testing for path coverage

> Generate full type safety for XState machines with typegen (v4) and the setup pattern (v5)

> Visualize and inspect XState machines at design time and runtime with Stately Studio, Inspector, and VS Code extension

> Validate arrays, tuples, records, maps, and sets with Zod's collection primitives

> Run async Zod validation with parseAsync, safeParseAsync, async refinements, and external checks

> Handle Zod validation failures with safeParse, ZodError, error.format, error.flatten, and custom error maps

> Derive TypeScript types from Zod schemas with z.infer, input vs output types, and ZodTypeAny

> Validate Next.js server actions, API routes, and form data with Zod schemas

> Shape and compose Zod objects with pick, omit, partial, required, extend, merge, strict, and passthrough

> Define runtime-validated TypeScript schemas with z.object, primitives, enums, literals, and schema composition

> Validate and transform strings with Zod's min, max, email, url, regex, trim, and custom error messages

> Transform and validate data with Zod's transform, refine, superRefine, and preprocess APIs

> Model variant types with z.union, z.discriminatedUnion, z.intersection, and type narrowing

> Apply ARIA roles, states, and properties correctly to enhance assistive technology support for custom widgets

> Ensure sufficient color contrast ratios and never use color as the sole means of conveying information

> Build accessible forms with proper labeling, grouped controls, inline validation, and clear error communication

> Write effective alt text for images and provide text alternatives for all non-text content

> Ensure all interactive elements are reachable and operable via keyboard alone without requiring a mouse

> Build accessible modal dialogs with focus trapping, escape dismissal, background inertness, and screen reader announcements

> Implement animations that respect user motion preferences, avoid seizure triggers, and provide pause controls

> Test web applications with screen readers to verify accessible navigation, announcements, and interaction patterns

> Use semantic HTML elements to convey document structure, meaning, and navigation landmarks to assistive technology

> Automate accessibility testing with axe-core, jest-axe, Playwright, and CI pipeline integration

> Pre-execution LLM-judgment: does this spec carry measurable, testable, complete acceptance criteria before work begins? Resolves the spec's acceptance section, critiques observability / testability / completeness (advisory `criteriaFindings`), flags user-visible behaviors with no covering test (advisory `coverageFindings`), and emits a confidence-rated `AcceptanceVerdict` (`MEASURABLE | NOT_MEASURABLE | INCONCLUSIVE`) with a rationale. Merge authority is derived in TypeScript, never trusted...

> Apply codemods for safe DRIFT-T001/T002/T003 token-bypass findings (replace hex / font-family / px-spacing literals with token references) and emit precise suggestions for DRIFT-T004 (deprecated tokens) and all DRIFT-P\* (primitive adoption). The FIX half of design-pipeline drift-remediation sub-project, paired with detect-design-drift.

> Author Angular components with correct inputs/outputs, change detection strategy, and lifecycle hooks

> Create attribute and structural directives with @Directive to add behavior, handle host events, and conditionally render DOM without modifying component templates

> Intercept HTTP requests and responses with HttpInterceptorFn for auth headers, retry logic, loading state, and centralized error handling

> Reduce initial bundle size with loadComponent, loadChildren, preloading strategies, and deferrable views (@defer)

> Optimize Angular rendering with OnPush change detection, trackBy, virtual scrolling, deferrable views, and signals for zoneless-ready apps

> Create custom Angular pipes for pure data transformation and use built-in pipes correctly to keep templates declarative and performant

> Build type-safe reactive forms with FormGroup, FormControl, Validators, and dynamic FormArrays