By junjzhang
Structured human-agent collaboration workflows — brief, learn, explain, design — producing rich visual documents in a per-task workspace.
Research an issue or task and produce a visual HTML briefing with problem breakdown, architecture diagram, and implementation plan.
Propose architecture and data structure decisions for a feature, producing a visual HTML design document for review.
Explain a specific mechanism or concept in depth with visual diagrams, code walkthrough, and concrete examples.
Deep-dive into source code, papers, or references and distill key insights into a visual HTML document.
A Claude Code plugin for structured human-agent collaboration. Four workflows that produce rich visual HTML documents in a per-task workspace.
| Skill | Command | Purpose |
|---|---|---|
| brief | /riff:brief 586 | Research an issue and produce a visual briefing: problem breakdown, architecture diagram, implementation plan |
| learn | /riff:learn offload.py | Deep-dive into code or references, distill key insights and data flows |
| explain | /riff:explain record_stream | Focused explanation of a single mechanism with diagrams and concrete examples |
| design | /riff:design 586 | Propose architecture and data structures for review before implementation |
Each skill produces a self-contained HTML file in .workspace/{task}/ (git-ignored). Open it in a browser to review.
.workspace/
└── 586-activation-offload/
├── brief.html ← /riff:brief 586
├── learn.html ← /riff:learn activation/offload.py
├── explain-record-stream.html ← /riff:explain record_stream
└── design.html ← /riff:design 586
The typical flow: brief (what's the problem?) → learn (understand the code) → design (propose a solution) → implement.
explain is standalone — use it anytime you need a deep explanation of a specific mechanism.
claude plugin marketplace add junjzhang/riff
claude plugin install riff@riff
For local development:
claude --plugin-dir /path/to/riff
All output uses the Tokyo Night color scheme. The CSS is inlined — no external dependencies.
MIT
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub junjzhang/riff --plugin riffA growing collection of Claude-compatible academic workflow bundles. Covers scientific figures, manuscript writing and polishing, reviewer assessment, citation retrieval, data availability, paper reading, literature search, response letters, paper-to-PPTX conversion, and evidence-grounded Chinese invention patent drafting. Rules are organized as reusable skill folders with explicit workflows and quality checks.
Comprehensive feature development workflow with specialized agents for codebase exploration, architecture design, and quality review
Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques
Harness-native ECC operator layer - 67 agents, 271 skills, 92 legacy command shims, reusable hooks, rules, selective install profiles, and production-ready workflows for Claude Code, Codex, OpenCode, Cursor, and related agent harnesses
UI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 15 stacks (React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Nuxt, Jetpack Compose). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.