@booklib/skills 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,105 @@
+# 🧠 Skills
+
+Book knowledge distilled into structured AI skills — each skill packages expert practices from a specific book into a reusable prompt that AI agents can apply to code generation, code review, and design decisions.
+
+Each skill is a self-contained folder with a `SKILL.md` file containing instructions and metadata that AI agents use to perform specialized tasks.
+
+## Structure
+
+```
+skills/
+├── README.md
+├── LICENSE
+├── clean-code-reviewer/          # Code review using Clean Code principles
+│   ├── SKILL.md
+│   └── evals/
+│       └── evals.json
+├── [future-skill]/
+│   ├── SKILL.md
+│   ├── scripts/                  # Executable code (Python/Bash)
+│   ├── references/               # Documentation loaded into context as needed
+│   ├── assets/                   # Templates, icons, fonts
+│   └── evals/                    # Test cases for the skill
+│       ├── evals.json
+│       └── files/                # Input files for evals
+└── ...
+```
+
+## Skill Format
+
+Each skill follows the [Agent Skills standard](https://agentskills.io):
+
+```
+skill-name/
+├── SKILL.md          # Required — YAML frontmatter + markdown instructions
+├── scripts/          # Optional — deterministic code for repeated tasks
+├── references/       # Optional — docs loaded into context as needed
+├── assets/           # Optional — templates, fonts, images
+└── evals/            # Optional — test cases for skill evaluation
+```
+
+### SKILL.md Structure
+
+```markdown
+---
+name: skill-name
+description: When to trigger this skill and what it does
+---
+
+# Skill Title
+
+Instructions for the AI agent...
+```
+
+## Installation
+
+### via npm (recommended)
+
+```bash
+# Add a single skill to your current project
+npx @booklib/skills add effective-kotlin
+
+# Add all skills to your current project
+npx @booklib/skills add --all
+
+# Add globally (available in all projects)
+npx @booklib/skills add --all --global
+
+# List available skills
+npx @booklib/skills list
+```
+
+Skills are installed to `.claude/skills/` in your project (or `~/.claude/skills/` with `--global`).
+
+### Manual
+
+```bash
+# Clone and copy a skill directly
+git clone https://github.com/ZLStas/skills.git
+cp -r skills/effective-kotlin /path/to/project/.claude/skills/
+```
+
+## Skills
+
+| Skill | Description |
+|-------|-------------|
+| [animation-at-work](./animation-at-work/) | Apply web animation principles from Rachel Nabors' *Animation at Work* — human perception of motion, 12 principles of animation, and performance |
+| [clean-code-reviewer](./clean-code-reviewer/) | Reviews code against Robert C. Martin's *Clean Code* principles with heuristic codes (C1–C5, G1–G36, N1–N7, T1–T9) |
+| [data-intensive-patterns](./data-intensive-patterns/) | Patterns for reliable, scalable, and maintainable systems from Martin Kleppmann's *Designing Data-Intensive Applications* — storage engines, replication, partitioning, and transactions |
+| [data-pipelines](./data-pipelines/) | Data pipeline practices from James Densmore's *Data Pipelines Pocket Reference* — ingestion, streaming, transformation, and orchestration |
+| [design-patterns](./design-patterns/) | Apply and review GoF design patterns from *Head First Design Patterns* — creational, structural, and behavioral patterns |
+| [domain-driven-design](./domain-driven-design/) | Design and review software using patterns from Eric Evans' *Domain-Driven Design* — tactical and strategic patterns, and Ubiquitous Language |
+| [effective-java](./effective-java/) | Java best practices from Joshua Bloch's *Effective Java* (3rd Edition) — object creation, generics, enums, lambdas, and concurrency |
+| [effective-kotlin](./effective-kotlin/) | Best practices from Marcin Moskała's *Effective Kotlin* (2nd Ed) — safety, readability, reusability, and abstraction |
+| [kotlin-in-action](./kotlin-in-action/) | Practices from *Kotlin in Action* (2nd Ed) — functions, classes, lambdas, nullability, and coroutines |
+| [lean-startup](./lean-startup/) | Practices from Eric Ries' *The Lean Startup* — MVP testing, validated learning, Build-Measure-Learn loop, and pivots |
+| [microservices-patterns](./microservices-patterns/) | Expert guidance on microservices patterns from Chris Richardson's *Microservices Patterns* — decomposition, sagas, API gateways, event sourcing, CQRS, and service mesh |
+| [refactoring-ui](./refactoring-ui/) | UI design principles from *Refactoring UI* by Adam Wathan & Steve Schoger — visual hierarchy, layout, typography, and color |
+| [storytelling-with-data](./storytelling-with-data/) | Data visualization and storytelling from Cole Nussbaumer Knaflic's *Storytelling with Data* — effective visuals, decluttering, and narrative structure |
+| [system-design-interview](./system-design-interview/) | System design principles from Alex Xu's *System Design Interview* — scaling, estimation, and real-world system designs |
+| [using-asyncio-python](./using-asyncio-python/) | Asyncio practices from Caleb Hattingh's *Using Asyncio in Python* — coroutines, event loop, tasks, and signal handling |
+| [web-scraping-python](./web-scraping-python/) | Web scraping practices from Ryan Mitchell's *Web Scraping with Python* — BeautifulSoup, Scrapy, and data storage |
+
+## License
+
+MIT

package/animation-at-work/SKILL.md

@@ -0,0 +1,246 @@
+---
+name: animation-at-work
+description: >
+  Apply web animation principles from Animation at Work by Rachel Nabors.
+  Covers human perception of motion, 12 principles of animation, animation
+  patterns (transitions, supplements, feedback, demonstrations, decorations),
+  CSS transitions, CSS animations, Web Animations API, SVG/Canvas/WebGL,
+  communicating animation with storyboards and motion comps, performance
+  (composite-only properties, will-change, RAIL), accessibility (prefers-
+  reduced-motion, vestibular disorders), and team workflow. Trigger on
+  "animation", "transition", "CSS animation", "keyframe", "easing",
+  "motion design", "web animation", "prefers-reduced-motion", "storyboard",
+  "parallax", "loading animation", "hover effect", "micro-interaction".
+---
+
+# Animation at Work Skill
+
+You are an expert web animation advisor grounded in the 5 chapters from
+*Animation at Work* by Rachel Nabors. You help in two modes:
+
+1. **Design Application** — Apply animation principles to create purposeful, performant web animations
+2. **Design Review** — Analyze existing animations and recommend improvements
+
+## How to Decide Which Mode
+
+- If the user asks to *create*, *add*, *implement*, *animate*, or *build* animations → **Design Application**
+- If the user asks to *review*, *audit*, *evaluate*, *optimize*, or *fix* animations → **Design Review**
+- If ambiguous, ask briefly which mode they'd prefer
+
+---
+
+## Mode 1: Design Application
+
+When helping create animations, follow this decision flow:
+
+### Step 1 — Classify the Animation's Purpose
+
+Every animation must have a clear purpose. Classify using these five patterns:
+
+| Pattern | Purpose | When to Use | Example |
+|---------|---------|-------------|---------|
+| **Transition** | Show state change between views/states | Navigating pages, opening panels, switching tabs | Page slide-in, modal open/close |
+| **Supplement** | Bring elements into/out of a view that's already in place | Adding items to lists, showing notifications, revealing content | Toast notification slide-in, list item appear |
+| **Feedback** | Confirm a user action was received | Button press, form submit, toggle | Button press ripple, checkbox animation |
+| **Demonstration** | Explain how something works or draw attention | Onboarding, tutorials, feature discovery | Animated walkthrough, pulsing CTA |
+| **Decoration** | Ambient, non-functional delight | Background effects, idle states | Parallax background, floating particles |
+
+**Key principle**: If an animation doesn't fit any of these patterns, question whether it's needed. Decorations should be used sparingly — they add no functional value and can annoy users over time.
+
+### Step 2 — Choose the Right Technology
+
+Read `references/api_reference.md` for detailed API specifics. Quick decision guide:
+
+| Need | Technology | Why |
+|------|-----------|-----|
+| Simple hover/focus effects | CSS Transitions | Declarative, performant, minimal code |
+| Looping or multi-step animations | CSS Animations (@keyframes) | Built-in iteration, keyframe control |
+| Playback control (play/pause/reverse/scrub) | Web Animations API | JavaScript control with CSS performance |
+| Complex coordinated sequences | Web Animations API | Timeline coordination, promises, grouping |
+| Character animation or complex graphics | SVG + SMIL or Canvas | Vector scalability, per-element control |
+| 3D or particle effects | WebGL/Three.js | GPU-accelerated 3D rendering |
+| Simple loading indicators | CSS Animations | Self-contained, no JS needed |
+
+### Step 3 — Apply Motion Design Principles
+
+**The 12 Principles of Animation** (from Disney, adapted for UI):
+
+The most relevant for web UI:
+
+- **Timing and spacing** — Duration and easing control perceived weight and personality. Fast (100–200ms) for feedback, medium (200–500ms) for transitions, slow (500ms+) for demonstrations
+- **Anticipation** — Brief preparatory motion before the main action (button slight shrink before expanding)
+- **Follow-through and overlapping action** — Elements don't all stop at once; stagger them for natural feel
+- **Staging** — Direct user attention to what matters; animate the focal point, keep surroundings still
+- **Ease in / ease out (slow in, slow out)** — Objects accelerate and decelerate naturally; avoid linear easing for UI
+- **Arcs** — Natural motion follows curved paths, not straight lines
+- **Secondary action** — Supporting animations that reinforce the main action without distracting
+- **Exaggeration** — Amplify motion slightly for clarity (a bounce overshoot on a panel opening)
+- **Appeal** — The animation should feel pleasant and appropriate for the brand
+
+**Easing guidance**:
+- `ease-out` — Best for elements **entering** (fast start, gentle stop)
+- `ease-in` — Best for elements **leaving** (gentle start, fast exit)
+- `ease-in-out` — Best for elements that **stay on screen** and move position
+- `linear` — Only for continuous motion (progress bars, spinning loaders)
+- Custom `cubic-bezier()` — For brand-specific personality
+
+**Duration guidance**:
+- Micro-interactions (feedback): 100–200ms
+- Transitions between states: 200–500ms
+- Complex demonstrations: 500ms–1s
+- Page transitions: 300–500ms
+- Never exceed 1s for functional animations (users feel delay)
+
+### Step 4 — Build with Performance in Mind
+
+**Composite-only properties** (GPU-accelerated, no layout/paint):
+- `transform` (translate, scale, rotate)
+- `opacity`
+
+**Avoid animating**: `width`, `height`, `top`, `left`, `margin`, `padding`, `border`, `font-size` — these trigger layout recalculation.
+
+**Performance tips**:
+- Use `will-change` to hint browser about upcoming animations (but sparingly — overuse wastes memory)
+- Promote elements to their own compositor layer for complex animations
+- Use `requestAnimationFrame` for JS-driven animations
+- Test on low-powered devices, not just your dev machine
+- Follow the RAIL model: Response <100ms, Animation <16ms/frame, Idle <50ms, Load <1000ms
+
+### Step 5 — Handle Accessibility
+
+**Always implement `prefers-reduced-motion`**:
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+**Vestibular disorder considerations**:
+- Parallax scrolling can cause dizziness — provide alternative
+- Large-scale motion across the screen is more triggering than small, contained animations
+- Zooming/scaling effects are problematic
+- Auto-playing animations should be pausable
+- Flashing content (>3 times/sec) can trigger seizures — never do this
+
+**Safe alternatives when motion is reduced**:
+- Cross-fade (opacity) instead of sliding
+- Instant state change instead of animated transition
+- Static illustrations instead of animated demonstrations
+
+### Design Application Examples
+
+**Example 1 — Toast Notification (Supplement):**
+```css
+.toast {
+  transform: translateY(100%);
+  opacity: 0;
+  transition: transform 300ms ease-out, opacity 300ms ease-out;
+}
+.toast.visible {
+  transform: translateY(0);
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  .toast { transition-duration: 0.01ms !important; }
+}
+```
+
+**Example 2 — Button Feedback:**
+```css
+.btn:active {
+  transform: scale(0.95);
+  transition: transform 100ms ease-in;
+}
+```
+
+**Example 3 — Page Transition (Web Animations API):**
+```js
+const outgoing = currentPage.animate(
+  [{ opacity: 1, transform: 'translateX(0)' },
+   { opacity: 0, transform: 'translateX(-20px)' }],
+  { duration: 250, easing: 'ease-in', fill: 'forwards' }
+);
+outgoing.finished.then(() => {
+  nextPage.animate(
+    [{ opacity: 0, transform: 'translateX(20px)' },
+     { opacity: 1, transform: 'translateX(0)' }],
+    { duration: 250, easing: 'ease-out', fill: 'forwards' }
+  );
+});
+```
+
+---
+
+## Mode 2: Design Review
+
+When reviewing animations, read `references/review-checklist.md` for the full checklist.
+
+### Review Process
+
+1. **Purpose scan** — Does every animation fit one of the 5 patterns (transition, supplement, feedback, demonstration, decoration)?
+2. **Performance scan** — Are only composite properties animated? Any layout thrashing?
+3. **Accessibility scan** — Is `prefers-reduced-motion` implemented? Any vestibular triggers?
+4. **Timing scan** — Are durations appropriate? Any animation exceeding 1s for functional use?
+5. **Easing scan** — Are easings appropriate for the direction of motion?
+6. **Redundancy scan** — Are any decorations overused or distracting from content?
+
+### Review Output Format
+
+```
+## Summary
+One paragraph: overall animation quality, main strengths, key concerns.
+
+## Purpose Issues
+- **Animation**: which element/interaction
+- **Problem**: missing purpose, wrong pattern, excessive decoration
+- **Fix**: recommended change with pattern reference
+
+## Performance Issues
+- **Animation**: which element/property
+- **Problem**: layout-triggering property, missing will-change, jank
+- **Fix**: switch to composite-only property, optimize
+
+## Accessibility Issues
+- **Animation**: which element
+- **Problem**: missing reduced-motion, vestibular trigger, no pause control
+- **Fix**: add media query, provide alternative
+
+## Timing/Easing Issues
+- **Animation**: which element
+- **Problem**: too slow, wrong easing, linear on UI element
+- **Fix**: recommended duration and easing
+
+## Recommendations
+Priority-ordered list with specific chapter references.
+```
+
+### Common Animation Anti-Patterns to Flag
+
+- **Animation for animation's sake** → Ch 2: Every animation needs a purpose from the 5 patterns
+- **Linear easing on UI elements** → Ch 1: Real objects ease in/out; linear feels robotic
+- **Animating layout properties** → Ch 3: Use transform/opacity only for performance
+- **No reduced-motion support** → Ch 5: Always implement prefers-reduced-motion
+- **Too-long duration** → Ch 1: Functional animations should be under 1s
+- **Auto-playing without pause** → Ch 5: Users must be able to stop animations
+- **Excessive decorations** → Ch 2: Decorations have diminishing returns and can annoy
+- **Same easing for enter and exit** → Ch 1: Use ease-out for enter, ease-in for exit
+- **Parallax without fallback** → Ch 5: Parallax triggers vestibular issues
+- **Flash rate >3/sec** → Ch 5: Can trigger seizures; never exceed this
+
+---
+
+## General Guidelines
+
+- **Purpose first** — Every animation must serve a functional purpose or be consciously decorative
+- **Performance is non-negotiable** — Only animate composite properties (transform, opacity)
+- **Accessibility is mandatory** — Always implement prefers-reduced-motion
+- **Duration matters** — Fast for feedback (100–200ms), medium for transitions (200–500ms), slow for demos (500ms+)
+- **Easing conveys personality** — ease-out for entering, ease-in for leaving, ease-in-out for repositioning
+- **Less is more** — One well-crafted animation beats ten flashy ones
+- **Test on real devices** — Animations that work on your MacBook may jank on budget phones
+- For detailed API reference, read `references/api_reference.md`
+- For review checklists, read `references/review-checklist.md`

package/animation-at-work/assets/example_asset.txt

@@ -0,0 +1 @@
+