By mblode
Agent skills for creating smooth, professional UI animations and transitions in web applications.
npx claudepluginhub joshuarweaver/cascade-code-general-misc-4 --plugin mblode-agent-skillsAutomates npm release workflows using changesets. Creates a changeset (default patch), fixes lint/test/typecheck/format issues, commits and pushes, watches CI via the Monitor tool, finds and merges the Version Packages PR opened by changesets/action, and watches the release workflow to completion. Use when the user asks to ship, release, publish, autoship, or cut a release for an npm package.
Scaffolds a production-ready Next.js turborepo with TypeScript, Tailwind CSS, the shadcn/ui CLI, Blode UI components from the ui.blode.co registry, blode-icons-react, Oxlint, Oxfmt, Ultracite, and Vercel deployment. Use when creating a new Next.js app, bootstrapping a turborepo, scaffolding a web project, starting a new website, or asking "create a Next.js project."
Designs agent-native applications where agents are first-class citizens with full tool parity, atomic primitives, and explicit completion signals. Covers tool design, context injection, agent-to-UI communication, and mobile checkpoint/resume patterns. Use when architecting an agentic system, designing tool surfaces, building agent-aware UI, implementing context.md patterns, or asking "how do I make my app agent-native."
Guides creation of best-practice agent skills following the open format specification. Covers frontmatter, directory structure, progressive disclosure, reference files, rules folders, degrees of freedom, content patterns, executable scripts, MCP tool references, evaluations, and cross-model testing. Use when creating a new skill, authoring SKILL.md, setting up a rules-based audit skill, structuring a skill bundle, writing scripts inside a skill, evaluating a skill, or asking "how to write a skill."
Audits and writes AGENTS.md files using execution-first standards. Checks commands, gotchas, and signal-to-noise ratio. Use when asked to audit, review, score, refactor, or improve agent instruction files, fix stale commands, reduce bloat, or asking "my AGENTS.md is bad", "help me write a CLAUDE.md", or "improve my agent instructions".
Monitors PR health on a recurring schedule — merge conflicts, CI/CD failures across GitHub Actions, Buildkite, Vercel, and Fly.io, review comment triage and resolution, and merge readiness notifications. Also runs as one-shot comment triage. Use when asked to babysit a PR, watch a PR, monitor CI, fix PR comments, resolve review feedback, triage review threads, keep a PR green, handle merge conflicts, or poll PR status
Generates engaging blog posts from source materials or topic briefs. Supports listicles, tutorials, how-to guides, narrative essays, and thought leadership. Handles research, outlining, drafting, SEO optimization, and polishing. Use when writing a blog post, creating a listicle, turning research into an article, writing a tutorial, or asking "write a blog post about this."
Writes and edits product and marketing copy using persuasion frameworks, and removes AI writing patterns. Writing mode gathers context, locks a brief, discovers brand voice, selects a framework, and outputs 2-3 alternatives. Editing mode audits against persuasion frameworks, strips AI-isms, runs seven sweeps, and outputs a before/after diff. Use when writing landing pages, hero copy, CTAs, product descriptions, onboarding strings, or email subjects. Also use when reviewing copy, "this is a bad sell", "write copy for", "rewrite from first principles", "use Simon Sinek", "show don't tell", "make this shorter", "fix the copy", "write a headline", "improve the CTA", "edit existing copy", "remove AI-isms", "clean up AI writing", "make this sound less like AI", "flag AI patterns", or "scan for AI tells".
Generates folder structures, module contracts, middleware pipelines, and frontend/backend boundaries for TypeScript full-stack applications. Use when starting a project, setting up project structure, organizing a monorepo, configuring middleware, defining folder layout, designing backend modules, establishing team conventions, or asking "how should I structure this app", "design the folder structure", or "set up the architecture".
Writes and audits technical documentation using Diataxis, Stripe-style clarity, and the Eight Rules. 52 rules across 9 categories covering voice, structure, clarity, code examples, formatting, navigation, scanability, content hygiene, and review. Use when writing docs, creating READMEs, documenting APIs, writing tutorials, building a docs site, auditing documentation quality, or asking "review my docs", "improve this documentation", or "write docs for this".
Creates a git worktree from main for a Linear issue. Use when the user pastes a Linear URL (https://linear.app/.../issue/ABC-58/...), a Linear "copy as prompt" string, or just an issue ID like "ABC-58". Handles URL parsing, branch name derivation, and worktree creation as a sibling directory. Also use when asked to "make a worktree for ABC-58", "set up a branch for this issue", or "create a worktree".
Generates Mermaid diagrams from codebases, topics, files, conversations, or specs. Supports flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, C4 architecture, mindmaps, Gantt charts, timelines, user journeys, gitGraphs, pie charts, quadrant charts, requirement diagrams, and beta types (xychart, sankey, block, architecture). Use when asked to create a Mermaid diagram, visualize a process or system, draw a flowchart, sequence diagram, class diagram, state machine, ERD, architecture diagram, mind map, timeline, Gantt chart, user journey, git branching graph, or any "diagram this" request.
Provides architecture guidance for multi-tenant SaaS platforms on Cloudflare or Vercel. Use when defining domain strategy, tenant identification, isolation, subdomain routing, custom domains, white-label setup, tenant separation, plan/limit mapping, building a multi-tenant application, or asking "how do I support multiple tenants" or "build a white-label platform".
Optimises SEO for Next.js App Router apps including sitemaps, meta tags, structured data, canonical URLs, Core Web Vitals, and programmatic SEO. Use when asked to improve SEO, add sitemap.xml, fix meta tags, add structured data, set canonical URLs, improve Core Web Vitals, audit SEO, or build SEO pages at scale. Performs no visual redesigns.
Creates bold, minimal, dark-first presentations with structured narrative arcs, punchy slide copy, high-contrast visual design, and conversational speaker notes. Adapts for live talks or async investor pitch decks. Use when creating a presentation, structuring a deck, writing slides, asking "outline a presentation about...", "write slides for...", "design a deck for...", or building a pitch deck for investors.
Writes or rewrites README.md files tailored to the project type (CLI, library, app, framework, monorepo, or skill bundle). Discovers project context, selects the right structure, writes section by section, and validates against quality checks. Use when creating a README, writing a README from scratch, rewriting a bad README, bootstrapping project documentation, or asking "write a README for this project."
Reviews the current local diff or branch at the end of a coding session for high-confidence bugs and repository instruction-file compliance. Use when asked to run `/review-pr` before commit, before push, or before handing changes off for PR creation or update, and when only certain, actionable findings should be reported while style feedback is ignored.
Scaffolds a production-ready TypeScript CLI project with ESM, tsdown, vitest, oxlint, oxfmt, changesets, GitHub Actions, and an agent skill definition. Use when creating a new CLI tool, bootstrapping a TypeScript project, scaffolding a node CLI, starting a new npm package, or asking "scaffold a CLI project."
Audits web typography for punctuation, font selection, sizing, spacing, OpenType features, hierarchy, layout, typeface pairing, brand identity, and display type. Use when writing CSS/HTML for text, selecting or pairing typefaces, reviewing typography in web designs, configuring font-feature-settings, building a type system, or auditing typographic quality. Triggers on tasks involving font-family, font-size, line-height, letter-spacing, @font-face, font pairing, or typographic correctness.
Creates, reviews, and debugs UI motion and animation implementations. Covers springs, gestures, drag interactions, clip-path reveals, easing, timing, and animation review. Use when designing, implementing, or reviewing motion, CSS transitions, keyframes, framer-motion, spring animations, asking "add animations to", "make this feel smooth", "review my animations", "should this animate", or "add a swipe gesture"
Audits web UI quality across accessibility, interaction, forms, typography, navigation, layout, performance, motion, and microcopy. Use when reviewing or refining frontend UI before merge or release, asking "check my UI", "is this accessible", "polish this page", or when the user asks for a UI, UX, or accessibility audit.
Defines visual systems, colour palettes, typography scales, and layout patterns for web UI. Produces design tokens and component styling for product dashboards (SaaS/admin/data-heavy) or marketing/brand landing pages. Use when choosing visual direction, designing a landing page, building a hero section, selecting colour palettes and fonts, establishing layout patterns, starting a new UI design system, theming a web application, or asking "make this look good", "make this look premium", "design the UI for", "full-bleed hero", or "pick a visual style".
A minimal, opinionated set of skills for planning, design, engineering, and UI quality.
npx skills add mblode/agent-skills -g --all -y
Supports OpenCode, Claude Code, Codex, and Cursor.
| Skill | Phase | What it does |
|---|---|---|
define-architecture | Project start | Repo structure, backend patterns, workflow conventions |
scaffold-cli | Project start | TypeScript CLI scaffold with ESM, tsdown, vitest, oxlint, oxfmt, changesets, and GitHub Actions |
scaffold-nextjs | Project start | Next.js turborepo scaffold with TypeScript, Tailwind, shadcn/ui + ui.blode.co registry components, blode-icons-react, Ultracite, and Vercel deployment |
ui-design | Design | Visual direction for product or marketing UI |
ui-audit | Pre-ship | Accessibility, typography, and UX polish audit |
typography-audit | Design/dev | Punctuation, font selection, sizing, spacing, and typographic quality |
ui-animation | Design/dev | Motion design, springs, gestures, clip-path, and animation review |
presentation-creator | Design/dev | Bold, minimal, dark-first slide decks and pitch decks |
mermaid | Design/dev | Mermaid diagrams — flowcharts, sequence, class, state, ER, C4, mindmap, Gantt, timeline, journey, gitGraph, pie, quadrant, requirement, and beta types |
copywriting | Writing/audit | Writes and edits product copy — persuasion frameworks, AI-ism removal, seven-sweep audit, page-specific guidance, and before/after diffs |
blog-post | Writing/audit | Engaging listicle-style blog posts from source insights |
docs-writing | Writing/audit | Documentation quality rules for voice, structure, clarity, code examples, formatting, and navigation |
readme-creator | Writing/audit | Writes or rewrites README.md files tailored to the project type |
agents-md | Maintenance | AGENTS.md/CLAUDE.md audits, pruning, and hygiene |
review-pr | Pre-merge | Runs a local end-of-session review of the current diff for high-confidence bugs and instruction-file compliance before commit, push, or handoff |
babysit-pr | Pre-merge | Monitors PR health on a schedule — merge conflicts, CI/CD failures, review comment triage, and merge readiness. Also runs as one-shot comment triage |
optimise-seo | Pre-launch | Metadata, structured data, sitemaps, and Core Web Vitals |
agent-native | Architecture | Designs agent-native apps with tool parity, atomic primitives, completion signals, and context injection |
multi-tenant-architecture | Architecture | Multi-tenant domain strategy, isolation, and routing on Cloudflare/Vercel |
autoship | Release | Automates npm releases: changesets, changelogs, quality gates, CI monitoring, Version Packages PR merge, and npm-publish watch |
agent-skills-creator | Authoring | Best-practice skill creation following the open format specification |
linear-worktree | Development | Creates a git worktree from main for a Linear issue — parses URLs, copy-as-prompt strings, or bare issue IDs, then sets up branch and worktree |
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Creative skill for generating algorithmic and generative art. Produces visual designs using mathematical patterns, fractals, and procedural generation.
Frontend design skill for UI/UX implementation
Humanise text and remove AI writing patterns. Detects and fixes 24 AI tell-tales including inflated language, promotional tone, AI vocabulary, filler phrases, sycophantic tone, and formulaic structure.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). Proactively activates in projects with cacheComponents: true, providing patterns for 'use cache' directive, cacheLife(), cacheTag(), cache invalidation, and parameter permutation rendering.