Skills

Skills for React/React Native Engineers. Straight from my .claude directory.

These are the skills I reach for every day — my own best practices, distilled into small, composable SKILL.md files. They encode how I build a React and React Native codebase that stays clean and scalable as it grows, with a heavy focus on the three things I care about most:

• Animations that feel native and hold 60/120fps — GSAP on the web, Reanimated and Skia on mobile.
• Components that are well-structured, strictly typed, and genuinely reusable.
• Clean code — naming, small functions, comments, formatting, error handling — enforced, not merely suggested.

They're model-agnostic, opinionated, and meant to be forked. Every code example is in TypeScript and themed around Harry Potter, because reading the same foo/bar for the hundredth time is how skills die. Make them your own.

Install

Three ways in, depending on whether you want to fork, subscribe, or vendor.

Quickstart — skills.sh

Copies the skills into your project so you can hack on them and make them your own. Works with Claude Code, Codex, Cursor, and any Agent-Skills-compatible harness:

npx skills@latest add hzblj/skills

Pick the skills you want and which agents to install them on.

Claude Code plugin

Prefer a plug-and-play install you don't maintain by hand? These skills also ship as a native Claude Code plugin — a read-only, always-current bundle that updates when I ship a new version. You subscribe rather than fork, and you get the agents and commands too.

Inside Claude Code:

/plugin marketplace add hzblj/skills
/plugin install hzblj-skills@hzblj

Or from your shell:

claude plugin marketplace add hzblj/skills
claude plugin install hzblj-skills@hzblj

Vendor into a project — commit the skills to your repo

Want the skills checked into a project so your whole team gets them over git, with no per-machine install? Clone this repo and run the vendor script — it copies every skill into the project's .claude/skills/, flattened to a single level so Claude Code's project-skill scan (which only looks a level or two deep) actually finds them:

# from inside your project — writes to ./.claude/skills
bash /path/to/skills/scripts/vendor-skills.sh

# or from a clone of this repo, targeting a project
yarn vendor-skills /path/to/your/project

Destination folders are domain-prefixed (mobile-animations-reanimated-core) so leaf names never collide, and each skill's cross-links are rewritten to the flattened sibling paths. Re-running refreshes and prunes cleanly, touching only the folders it created. Scope it with --only web, --only mobile,shared, etc. — shared is a common dependency of the platform skills, so include it unless you know you don't need it.

• skills.sh copies the skills in so you can edit them — skills only.
• The plugin keeps them as a managed bundle you don't edit, and ships the agents and commands alongside the skills.
• vendor-skills commits them into a project's .claude/skills/ — team-wide over git, no install step for teammates.

How I use them

I don't invoke skills by hand much — I describe the task, and the agent reaches for the right ones. These are the prompts I actually type, and the skills each one pulls in:

Implement this design from Figma.

Implement this design from Figma.
@https://www.figma.com/design/AbC123DeF456/My-Screen?node-id=12-345&m=dev

→ component-architecture · surfaces · typography · interactions · css-animations · tailwind · type-safety

Build a hero where the headline reveals on scroll and the image pins.

→ gsap-timelines · gsap-scroll-trigger · gsap-text · gsap-react · motion

This feed is janky on mobile — make it 60fps.

→ lists · reanimated-core · reanimated-timing · native-feel

A swipeable card stack with a spring snap-back.

→ reanimated-gestures · reanimated-core · reanimated-timing

Review my changes before I open the PR. — /clean-review

→ clean-code-reviewer over functions · meaningful-names · error-handling

Refactor this file to my standards. — /refactor <path>

→ code-refactorer — const arrows, named exports, guard clauses, cn(), type over interface

Scaffold a new feature package. — /new-feature <name>

→ monorepo-architect + project

Skills

Each skill is a self-contained SKILL.md. Related skills are grouped into category folders; there are no umbrella files, so you can enable exactly what you want.

Shared — both platforms

Clean code — the standards I enforce for readable, maintainable code, with Harry Potter examples:

• meaningful-names — intention-revealing names, boolean prefixes, UPPERCASE constants, no type encoding
• functions — small, do one thing, few arguments, guard clauses, command-query, DRY
• comments — why over how, no dead comments, self-explaining code
• formatting — vertical ordering (stepdown), declare near use, cn() classNames
• objects-and-data — Tell Don't Ask, Law of Demeter, objects vs. data, contract-first
• error-handling — exceptions over error codes, wrap third-party APIs, no catch-as-if

UI — components, architecture, and cross-platform design-engineering polish:

• component-architecture — component structure, prop typing, responsibility separation
• compound-components — compound/composer parts sharing context, state/actions/meta, exposed Provider
• atomic-design — core-ui as atoms/molecules/organisms/templates; promote feature UI to core-ui on the second use
• performance — memoization, stable references, re-render prevention
• typography — text wrapping, font smoothing, tabular numbers, Dynamic Type
• surfaces — concentric radius, optical alignment, shadows/elevation, hit areas
• motion — interruptible animations, stagger enter, subtle exit, icon cross-fade
• interactions — press feedback, haptics, hover, focus, hit area

Foundations:

• hooks — custom hooks: naming, logic extraction, view/logic separation
• type-safety — strict TypeScript: 22 rules (no any, no as, discriminated unions, constructive modeling, branded types, boundary validation) + worked examples
• project — Turborepo monorepo: core-*/feature-* packages, platform-* apps, dependency direction
• orchestration — tiered multi-agent delegation: which agent gets what, context isolation, cost model
• why — code archaeology: fan out across git/tickets/docs/chat, return a cited, confidence-calibrated read
• how — architectural walkthroughs: parallel explorers map a subsystem, then an explainer builds the mental model
• teach — explain a change or subsystem so it actually lands: plain account, diagrams built up one part at a time
• unslop — strip AI tells from prose: no em dashes, no puffery, plain speech, real voice

Mobile — React Native / Expo

Reanimated (3/4):

• reanimated-core — shared values, animated styles, worklets, UI vs. JS thread
• reanimated-layout-animations — entering/exiting, layout transitions, keyframes
• reanimated-gestures — gesture-handler v2, pan/swipe/pinch, withDecay, composition
• reanimated-timing — withTiming/withSpring/withDecay, easing, reduced motion
• reanimated-text-and-numbers — animated counters, ReText, per-character reveals

Also:

• skia — Canvas API, SkSL shaders, charts, GPU-driven drawing
• lists — FlashList, stable renderItem, extracted item components
• native-feel — iOS/Android conventions, haptics, safe areas, accessibility
• react-navigation — typed routes, navigator structure, deep linking

Web — Next.js / React

Animations — plain CSS by default, GSAP when you need a timeline:

• css-animations — pure-CSS transitions & keyframes, staggered enter, icon cross-fade, scale-on-press

GSAP (3):

• gsap-timelines — sequencing, stagger, labels, control methods
• gsap-scroll-trigger — scrub, pin, toggleActions, batch, matchMedia
• gsap-text — SplitText reveals, line masking, font readiness, a11y revert
• gsap-react — useGSAP, scope, contextSafe, cleanup, SSR
• gsap-performance — transform/opacity, will-change, reduced motion

Also:

• tailwind — utility-first, class ordering, dark mode, cn()
• nextjs-routing — App Router, server/client components, dynamic routes, metadata

Agents

Custom subagents in agents/:

• deep-reasoner — reasoning tier (Fable): architecture, package boundaries, hard type gymnastics, non-obvious bugs
• animation-specialist — motion across web + mobile (GSAP, Reanimated, Skia, gestures)
• clean-code-reviewer — read-only review against clean-code + type-safety; Before/After findings
• code-refactorer — applies the clean-code standards to existing code, preserving behavior
• monorepo-architect — scaffolds/enforces the Turborepo monorepo
• mobile-developer — senior React Native + Expo engineer
• web-developer — senior Next.js + React engineer
• fast-worker — execution tier (Haiku): boilerplate, barrels, test skeletons, renames, import rewrites

Commands

Slash commands in commands/:

• /clean-review — review the current diff against clean-code + type-safety
• /refactor <path> — refactor a file to the standards
• /new-feature <name> — scaffold a feature-* package
• /new-component <Name> — scaffold a component
• /make-composer <path> — refactor a prop-heavy component into a composer
• /polish <path> — interface-polish pass
• /audit-imports — audit monorepo boundaries
• /orchestrate <task> — plan a task, then delegate across the tiered agents

Credits

Most of this repo is my own .claude directory. Five skills come from cursor/plugins pstack (MIT), because they were already better than anything I'd have written:

Skill here	Upstream	What I changed
unslop	pstack/skills/unslop	Their pattern list, reorganized into this repo's tables, plus a common-mistakes section and a review checklist
why	pstack/skills/why	Rewritten for Claude Code — the Agent tool and the orchestration tiers instead of Cursor's subagents; the eight per-source playbooks folded into one roster table
how	pstack/skills/how	Only the subagent config, retargeted from Cursor's agent types and model ids to Claude Code's (Explore for the read-only explorers, deep-reasoner for the explainer, a fable/opus/sonnet critic panel). The four references/ prompts are verbatim
teach	pstack/skills/teach	Nothing. Taken verbatim
type-safety	pstack/skills/typescript-best-practices	Merged into my existing skill: their rule-table layout, plus constructive modeling, simplest total type, the narrowing hierarchy, boundary validation, schema-derived types, and object args. Examples rewritten in TypeScript house style with the Harry Potter theme

Each of those files carries the same attribution at the bottom. Everything else is mine.

More libraries

The other libraries from the same author are at libraries.janblazej.dev.

Sponsorship

License

MIT © Jan Blazej