hzblj-skills

Plugin hzblj-skills from marketplace hzblj in hzblj/skills. Commands read from the repo's manifest — 12 days ago.

Skills (38)

• reanimated-core

  Reanimated core — useSharedValue, useAnimatedStyle, useDerivedValue, useAnimatedReaction, useAnimatedProps, worklet rules, UI vs JS thread, runOnUI/runOnJS, and the .value-only-in-worklets rule. Triggers on: shared value, useAnimatedStyle, worklet, runOnJS, UI thread, .value in render.

• reanimated-gestures

  Reanimated + gesture-handler v2 — Gesture.Pan/Tap/Pinch, GestureDetector, driving shared values, withDecay, runOnJS, gesture composition, activeOffset/failOffset. Triggers on: gesture, pan, swipe, drag, GestureDetector, withDecay, pinch.

• reanimated-layout-animations

  Reanimated layout animations — entering/exiting presets, custom builders, LinearTransition/CurvedTransition, Keyframe, LayoutAnimationConfig, itemLayoutAnimation. The first choice for enter/exit. Triggers on: entering, exiting, FadeIn, layout animation, LinearTransition, list item animation.

• reanimated-text-and-numbers

  Reanimated animated text and numbers — the useAnimatedProps + TextInput (ReText) pattern, animated counters, per-character staggered reveals, tabular figures, blur/opacity mount reveal. Triggers on: animate number, animated counter, ReText, animate text, typewriter, tabular nums.

• reanimated-timing

  Reanimated timing — withTiming vs withSpring vs withDecay, Easing, spring configs, withSequence/withDelay/withRepeat, cancelAnimation, reduced motion, recommended constant configs. Triggers on: withSpring, withTiming, easing, damping stiffness, withRepeat, reduced motion.

• skia

  Opinionated rules for @shopify/react-native-skia in Expo + TypeScript — the declarative <Canvas> API (Circle/Rect/Path/Group/Paint/gradients/Blur), driving animation from Reanimated shared values with useDerivedValue and useClock, runtime SkSL shaders, on-canvas text/images, and the GPU-vs-CPU cost

• react-navigation

  React Navigation setup, typed routes, navigator structure, deep linking, and navigation actions. Use when building or modifying navigation in React Native. Triggers on: React Navigation, navigation, typed routes, navigator, stack navigator, tab navigator, deep linking, useNavigation, screen options.

• native-feel

  Opinionated rules for making an Expo + TypeScript app feel genuinely native on both platforms — a strict spacing/design-token system, Platform.OS/Platform.select branching, expo-haptics (impact/selection/notification) used with restraint, per-platform Pressable feedback, safe areas and edge-to-edge,

• lists

  Strict performance rules for lists — FlashList, stable renderItem, extracted item components, and naming patterns. Use when building or optimizing list views. Triggers on: FlashList, FlatList, renderItem, estimatedItemSize, list performance, list item component, list naming.

• comments

  Clean-code comments — explain why not how, delete redundant and dead comments, prefer self-explaining code. Use when writing or reviewing comments and docs. Triggers on: comment, commented-out code, TODO, TSDoc, why not how, dead code.

• error-handling

  Clean-code error handling — exceptions over error codes, wrap third-party APIs at a boundary, don't use catch as an if, don't return or pass null. Use when designing failure paths and error boundaries. Triggers on: error handling, exceptions, try catch, error codes, wrap library, throw, return null,

• formatting

  Clean-code formatting — vertical ordering (stepdown/newspaper), declaring near use, team-enforced tooling. Use when ordering or formatting code. Triggers on: formatting, code order, Prettier, ESLint, vertical spacing, where to declare variables.

• functions

  Clean-code functions — small, do one thing, one abstraction level, few arguments, no side effects, command-query separation, plus DRY and refactor discipline. Use when writing or reviewing functions. Triggers on: function too long, do one thing, too many arguments, side effects, command query, DRY,

• meaningful-names

  Clean-code naming — intention-revealing, honest, distinct, pronounceable, searchable names with no type encoding. Use when naming or reviewing variables, functions, types, and components. Triggers on: naming, rename, meaningful names, magic number, Hungarian notation, unclear name.

• objects-and-data

  Clean-code objects vs. data structures — Tell Don't Ask, object/data anti-symmetry, Law of Demeter, contract-first design. Use when designing types, classes, and module boundaries. Triggers on: encapsulation, Tell Don't Ask, Law of Demeter, train wreck, DTO vs class, interface first.

• hooks

  Rules for custom hooks — naming, logic extraction, and separation of view and logic. Use when creating or refactoring hooks. Triggers on: custom hook, use prefix, extract logic into hook, separate view and logic, move state out of component.

• how

  Use for \"how does X work\", code walkthroughs before changing something, and placement / ownership / layering questions (\"where should this live\", \"which package owns this\", \"is this the right layer\"). Explains subsystem architecture, runtime flow, onboarding mental models. Can critique archi

• orchestration

  Tiered multi-agent orchestration — an expensive model plans and synthesizes while specialized subagents do the work in their own isolated contexts. Covers the agent tiers, routing rules, why context isolation saves tokens, parallel fan-out, and the cost model. Use when a task spans multiple files or

• project

  Monorepo project structure — Turborepo layout with packages/core-*, packages/platform-*, packages/feature-*, and deployable apps (mobile, web, backend, e2e), dependency direction, package boundaries, public-API exports, and per-package internal structure. Use when creating packages/features/apps, wi

• teach

  Explain a body of work plainly so a person actually understands it. Runs the `how` and `why` skills and weaves what they find into one clear explanation. Use for 'teach me this', 'help me really understand X', 'explain this change or subsystem to me'.

• type-safety

  Strict TypeScript typing — type over interface, no any, no as casts, narrow literal unions, discriminated unions, constructive modeling, exhaustive switch with never, satisfies, branded types, boundary validation, and safe array indexing. Use when defining, composing, or reviewing types. Triggers on

• atomic-design

  Structure the UI library (core-ui) with Atomic Design — atoms, molecules, organisms, templates — where composition flows one way (higher composes lower). Covers which level a component belongs to, the file/folder conventions, and the promotion policy: obvious primitives (Button, Input) go straight i

• component-architecture

  Defines component structure, prop typing, responsibility separation, and ref handling patterns. Use when creating or refactoring React components. Triggers on: component structure, FC, prop type, forwardRef, ref handling, split component, responsibility separation.

• compound-components

  Build flexible components as a compound/composer set — namespaced parts (Tabs.Item, WizardCard.Provider) that share one context, exposed via Object.assign or an object literal. Covers the context + guard-hook pattern, memoizing the context value, the controlled/uncontrolled hybrid, exposing the raw

• ui-interactions

  Cross-platform interaction polish — press/tap feedback (scale 0.96), haptics, hover, focus rings, disabled/loading, minimum hit area, no transition:all, will-change. Triggers on: press feedback, scale on press, haptics, ripple, hover, focus-visible, active state.

• ui-motion

  Cross-platform motion polish — interruptible animations, split & stagger enter, subtle exit, contextual icon cross-fade, skip-animation-on-load. Web uses CSS/Tailwind + GSAP (no motion library). Triggers on: stagger, enter animation, exit animation, icon cross-fade, interruptible, GSAP stagger, skip

• performance

  Enforces rendering performance best practices — memoization, stable references, and avoiding unnecessary re-renders. Use when optimizing component performance. Triggers on: re-render, useMemo, useCallback, memoization, stable reference, inline arrow in JSX, inline object prop.

• ui-surfaces

  Cross-platform surfaces polish — concentric border radius, optical alignment, shadows vs. elevation, image outlines, minimum hit areas. Triggers on: concentric radius, optical alignment, box-shadow, elevation, image outline, hitSlop, hit area.

• ui-typography

  Cross-platform (React web + React Native) typography polish — text-wrap balance/pretty, font smoothing, tabular numbers, Dynamic Type, adjustsFontSizeToFit, letter spacing, layout-shift avoidance. Triggers on: text wrapping, tabular numbers, font smoothing, Dynamic Type, adjustsFontSizeToFit, orphan

• unslop

  Cut AI tells from writing and put a real voice back in. Use when drafting or editing any prose: READMEs, docs, commit messages, PR descriptions, changelogs, release notes, code comments, blog posts. Triggers on: unslop, slop, AI tells, sounds like AI, robotic, em dash, delve, tapestry, prose, writin

• why

  Investigate why code is the way it is — design rationale, rejected alternatives, the incident or customer that forced a threshold. Use when the question is about motivation and history rather than mechanics. Enumerates the available evidence sources (git/gh, issue tracker, long-form docs, team chat,

• css-animations

  Pure-CSS web animations best practices — interruptible transitions vs. keyframes, staggered enter, subtle exit, icon cross-fade with no motion library, scale-on-press, transition specificity, will-change, and prefers-reduced-motion. Use for web motion that doesn't need a JS timeline (reach for GSAP

• gsap-react

  GSAP with React/Next.js — the useGSAP hook, scope, contextSafe, automatic cleanup, plugin registration, never animating React state, SSR. Use when wiring GSAP into React. Triggers on: useGSAP, gsap.context, cleanup, contextSafe, registerPlugin, next.js use client.

• gsap-scroll-trigger

  GSAP ScrollTrigger — trigger/start/end, scrub, pin, toggleActions, snap, batch, responsive matchMedia, cleanup. Use for scroll-linked web animations. Triggers on: ScrollTrigger, scroll animation, scrub, pin, parallax, markers.

• gsap-text

  GSAP SplitText type/text animations — split into chars/words/lines, staggered reveals, line masking, font readiness, revert for a11y, reduced motion. Use for animated text reveals. Triggers on: SplitText, text reveal, type animation, word stagger, line mask.

• gsap-timelines

  GSAP 3 timelines — sequencing, defaults, labels, relative position, stagger, repeat/yoyo, control methods, nesting. Use when building sequenced web animations. Triggers on: gsap timeline, sequence, stagger, labels, yoyo, timeScale.

• nextjs-routing

  Next.js App Router patterns — route structure, layouts, server vs client components, dynamic routes, loading/error states, metadata, and navigation. Use when building or modifying routing. Triggers on: App Router, route, layout, server component, client component, dynamic route, loading.tsx, error.t

• tailwind

  Tailwind CSS conventions — utility-first, semantic theme tokens used directly (so light/dark flips in one place, not a dark: on every element), no arbitrary values, class ordering, cn() for conditional/merged classes, and tv() (tailwind-variants) for component variants. Use when styling web componen

Slash commands (8)

• /hzblj-skills:audit-imports

  Audit the monorepo against the project structure boundaries and dependency direction

• /hzblj-skills:clean-review

  Review the current git diff against the repo's clean-code + type-safety standards

• /hzblj-skills:make-composer

  Refactor a prop-heavy component into a compound/composer following the compound-components skill

• /hzblj-skills:new-component

  Scaffold a component following component-architecture + clean-code standards

• /hzblj-skills:new-feature

  Scaffold a new feature-* package following the project (monorepo) skill

• /hzblj-skills:orchestrate

  Plan a task, then delegate across the tiered agents (deep-reasoner, domain builders, fast-worker) and synthesize the results

• /hzblj-skills:polish

  Apply an interface-polish pass to a component (web or React Native)

• /hzblj-skills:refactor

  Refactor a file or area to the repo's clean-code + type-safety standards, preserving behavior

Subagents (8)

• animation-specialist

  Use for focused motion work across web and mobile — GSAP timelines and ScrollTrigger, Reanimated gestures and layout animations, Skia GPU effects, text/type reveals, and diagnosing janky or broken animations. This is a motion specialist, not a general feature builder — reach for it when the animatio

• clean-code-reviewer

  Use to review code — a diff, a PR, or specific files — against this repo's clean-code standards (naming, functions, comments, formatting, objects vs. data, error handling) plus the type-safety rules. Read-only: it reports findings, it never edits. Reach for it before merging, or when the user says "

• code-refactorer

  Use to refactor existing code to this repo's clean-code + type-safety standards WITHOUT changing behavior — const arrows, named exports, guard clauses, extracted functions, cn(), type over interface, meaningful names. This is the acting counterpart to clean-code-reviewer. Reach for it on "clean this

• deep-reasoner

  Use for the hard-thinking parts of a task — architecture decisions, package boundaries, tricky TypeScript type gymnastics, algorithm design, and diagnosing bugs whose cause isn't obvious. This is the reasoning tier of the orchestration setup: reach for it when the difficulty is *figuring out what to

• fast-worker

  Use for the mechanical, well-specified parts of a task — boilerplate, barrel/`index.ts` files, test skeletons, formatting fixes, default→named export conversions, import rewrites, and renames. This is the cheap execution tier of the orchestration setup: reach for it when the work needs no design jud

• mobile-developer

  Use when building mobile features in React Native with Expo — screens, components, animations, gestures, and flows. Specifically: <example> Context: Adding a new feature screen with data fetching and animations user: "Build a profile screen with an animated collapsible header, pull-to-refresh, and a

• monorepo-architect

  Use to scaffold and enforce the Turborepo monorepo structure — packages/core-*, packages/platform-*, packages/feature-*, and the deployable apps (mobile, web, backend, e2e) — per the project skill. Creates new packages/features/apps with correct boundaries and audits dependency direction and deep im

• web-developer

  Use when building frontend features in Next.js and React — pages, components, animations, layouts, and flows. Specifically: <example> Context: Adding a new feature page with data fetching and animations user: "Build a dashboard page with filterable cards, animated transitions between views, and serv

Similar plugins