mblode/agent-skills
20 skills15.7k installs1.4k starsGitHub
Install
npx skills add https://github.com/mblode/agent-skillsSkills in this repo
1Ui Animationui-animation is an agent skill for creating reviewing and debugging UI motion across springs gestures drag clip-path reveals easing CSS transitions keyframes and framer-motion. Core rules animate only transform and opacity for movement, forbid layout property animation and transition all, and never animate keyboard-initiated actions. Implementation priority is CSS transitions over WAAPI keyframes and JS requestAnimationFrame with asymmetric enter and exit timing tuned by interaction frequency. Motion principles demand continuity over teleportation, directional motion matching layout, overlays emerging from triggers, and delight scaling inversely with frequency. Reference files cover decision framework spring animations component patterns clip-path gesture drag performance review format contextual animations and transition recipes for badges dropdowns modals and page slides. Accessibility requires prefers-reduced-motion paths hover gated behind fine pointer media queries and paired elements sharing duration and easing. Review workflow applies ten standards with Before After Why tables and explicit Block or Approve verdicts.7.6kinstalls2Multi Tenant Architecturemulti-tenant-architecture is a Claude Code skill from mblode/agent-skills that walks developers through multi-tenant SaaS design on Cloudflare or Vercel. The skill covers platform choice, domain strategy, tenant identification and isolation, subdomain routing, custom domains and SSL, white-label setup, tenant context propagation, PSL submission, and mapping platform limits to pricing tiers. It triggers on questions like supporting multiple tenants, building a white-label platform, or routing tenants by subdomain. Use define-architecture for general folder structure and scaffold-nextjs for new Next.js repos. Reach for multi-tenant-architecture when tenancy, routing, and isolation decisions must be made before writing integration code.1kinstalls3Ui Auditui-audit is a rule-based web UI quality skill from mblode/agent-skills that audits a page or feature before merge or release. It evaluates accessibility, keyboard interaction, forms, typography surfaces, navigation feedback, layout resilience, performance, motion, and microcopy through 35 prefix-dispatched rules plus separate craft and typography sweep checklists. Findings are reported by file with impact ratings and actionable fixes rather than vague polish notes. Developers reach for ui-audit when they ask to check UI quality, run an accessibility audit, or design-QA a page, while ux-audit in the same repo targets React and Next.js diff-level state and focus bugs. The skill fits frontend teams that want consistent pre-release UI gates without manual checklist drift.642installs4Docs Writingdocs-writing is a documentation skill from mblode/agent-skills that applies 52 rules across 9 categories covering voice, structure, clarity, code examples, formatting, navigation, scanability, content hygiene, and review. The skill follows the Diataxis framework to classify content as tutorials, how-to guides, reference, or explanation, and enforces Stripe-style clarity for developer-facing prose. Developers reach for docs-writing when drafting new documentation, documenting APIs, writing tutorials, auditing an existing README or docs site, or asking to review or improve documentation quality. The skill explicitly defers README-from-scratch creation to readme-creator, AGENTS.md and CLAUDE.md work to agents-md, and marketing copy to copywriting.639installs5Agent Skills Creatoragent-skills-creator is a meta-authoring skill from mblode/agent-skills that documents practical patterns for writing effective SKILL.md files beyond obvious instructions. It covers gotchas sections, filesystem-based progressive disclosure, degrees of freedom, description-field tuning for models, script bundling, on-demand hooks, skill composition, and measuring skill performance across projects. Developers reach for agent-skills-creator when creating or refactoring agent skills that must stay reliable as projects and models change. The guidance complements format-specification.md and pushes agents toward non-obvious, high-signal content instead of restating default coding behavior.585installs6Ui Designui-design is an agent skill from mblode/agent-skills that gives coding agents explicit guidance on shaping interfaces with consistent typography scales, spacing rhythm, color systems, visual hierarchy, and component choices. Instead of accepting default markup, the skill steers agents toward accessible contrast, logical heading structure, aligned grids, and reusable UI patterns that read as intentional product design rather than generic boilerplate. Developers reach for ui-design when agent-generated dashboards, forms, or marketing pages need polish before handoff to design review or production merge. The skill fits early UI scaffolding and refactor passes where small spacing or type decisions compound into noticeably better screens. ui-design complements framework-specific frontend skills by focusing on visual design decisions—what to render and how it should look—rather than routing, data fetching, or test setup.559installs7Optimise Seooptimise-seo is an mblode agent skill for improving on-page SEO across metadata, HTML structure, heading hierarchy, and content patterns. The skill targets ranking and conversion improvements after primary product pages are built, not greenfield app scaffolding. Developers reach for optimise-seo when pages exist but search snippets, titles, descriptions, or internal linking underperform. It audits and recommends concrete SEO fixes rather than writing backend APIs. Use it during launch prep or when refreshing marketing pages for better organic visibility.498installs8Presentation Creatorpresentation-creator is a Claude agent skill from mblode/agent-skills that turns product context into slide decks for demos, investor updates, and internal reviews. The skill assembles narratives alongside code and specification work so decks stay aligned with what the product actually does rather than generic pitch copy. Developers reach for presentation-creator when a feature branch is ready to show, when fundraising or stakeholder meetings need a structured storyline, or when sprint reviews require slides that mirror shipped scope. The workflow expects you to supply product goals, key metrics, and technical highlights; the skill structures sections, talking points, and slide outlines developers can paste into Google Slides, Keynote, or PowerPoint. It fits teams that document in-repo and want presentation output without leaving the agent session.431installs9Typography Audittypography-audit is a Claude Code agent skill from mblode/agent-skills that audits web projects against 90 typography rules across ten categories, covering punctuation, font stacks, sizing, spacing, OpenType features, hierarchy, and typeface pairing. The skill loads rule categories progressively, prioritizes critical punctuation and font setup problems over medium polish items, and reports findings with file locations and concrete CSS fixes instead of redesign suggestions. Developers reach for typography-audit when reviewing CSS typography systems, validating font stack configuration, or catching common web type errors such as straight quotes, faux italics, and font-weight bold fakes before merge or release. typography-audit complements ui-audit surface typography sweeps by going deeper on pairing, brand identity, and display type while staying honest about scope: it audits existing work against best practices rather than inventing new scales. Install with npx skills add https://github.com/mblode/agent-skills --skill typography-audit and invoke during design QA or pre-release frontend reviews.429installs10Define Architecturedefine-architecture is a Claude Code skill from mblode/agent-skills that defines durable TypeScript full-stack architecture defaults and outputs an enforceable architecture brief. It covers monorepo layout, ConnectRPC middleware policies with AsyncLocalStorage-backed RequestContext, backend module contracts (Handler, Service, DAO, Mapper), and server-component-first frontend boundaries. Two workflows are included: a setup path for new codebases and an adoption path that finds domain-informed deepening opportunities in existing repos without prescribing a rewrite. The skill explicitly defers repo scaffolding to scaffold-nextjs or scaffold-cli and tenant strategy to multi-tenant-architecture. Developers reach for define-architecture when starting a TypeScript app, reorganizing a monorepo, standardizing backend services, or asking how to structure modules and middleware before agents or contributors diverge.427installs11Readme Creatorreadme-creator is an agent skill in mblode/agent-skills that writes or rewrites a project's README.md tailored to its detected type. The skill runs a five-phase workflow: detect project type from manifests like package.json or Cargo.toml, select sections from a type matrix covering CLI, library, app, framework, published monorepo, private monorepo, and skill bundle, write each section from reference templates, add badges only for registry-published projects, and score against a quality checklist before declaring done. Developers reach for readme-creator when bootstrapping documentation for a new repo, replacing a default create-next-app scaffold README, or generating install and usage examples agents can refine iteratively. The skill distinguishes itself from docs-writing, which audits existing prose, and agents-md, which targets AGENTS.md instruction files. Catalog data records 312 installs for this skill slug.399installs12Scaffold Nextjsscaffold-nextjs is an mblode/agent-skills agent skill (version 1.0.1) that scaffolds a production-ready Next.js turborepo through an 8-phase workflow: gather project metadata, create the Next.js app, install Blode UI from ui.blode.co, add Agentation, install Ultracite (Biome-based lint/format with husky), convert to Turborepo, configure GitHub and Vercel, and run a pre-launch checklist. The skill enforces opinionated conventions—no src directory, no ESLint (Ultracite replaces it), blode-icons-react instead of lucide-react—and ships reference files for turbo.json, biome.jsonc, next.config.ts, and deploy steps. Developers reach for scaffold-nextjs when spinning up marketing sites or web apps that need consistent TypeScript, Tailwind, shadcn CLI, and CI-ready monorepo structure, with handoffs to optimise-seo and audit-ui skills after deployment.384installs13Scaffold Cliscaffold-cli is an mblode agent-skills generator for bootstrapping command-line tool repositories. It produces project skeletons that include argument parsing setup, package manifest structure, test layout, and release conventions so new CLIs are runnable and publishable without hand-rolling boilerplate. Developers reach for scaffold-cli when starting a internal dev tool, agent-invoked utility, or open-source CLI and want consistent structure across repos. The skill targets the build phase before feature logic is added—pair it with domain-specific implementation skills afterward. It suits Node, Python, or similar CLI ecosystems where packaging and test harness mistakes slow first releases. Specify language, binary name, and subcommands in the prompt for a tighter scaffold aligned with team conventions.369installs14Agents Mdagents-md is an agent-instruction skill from mblode/agent-skills for teams standardizing how Claude Code, Cursor, Codex, and other coding agents work inside a repository. The skill drafts and updates AGENTS.md with repo-specific conventions, toolchain notes, and safe execution boundaries so agents stop guessing project rules on every task. Developers reach for agents-md when onboarding agents to a monorepo, open-source project, or internal service where CLAUDE.md or AGENTS.md should be the single source of agent behavior. The workflow covers initial file creation, convention capture, and ongoing maintenance as tooling or guardrails change. Use it early in agent adoption and revisit when CI rules, package managers, or forbidden commands shift. Skip it for repos that already have complete, current agent instruction files or projects that never use AI coding agents.342installs15Copywritingcopywriting is an mblode/agent-skills skill with two auto-detected modes: Mode A writes new short conversion copy and Mode B edits existing text to remove AI tells. Scope covers landing page heroes, subheads, CTAs, product descriptions, onboarding strings, and email subject lines—not long-form blog posts, slide decks, API docs, or product behavior decisions. Six bundled reference files include frameworks.md with nine copy frameworks, sweeps.md with seven line-level editing sweeps, word-lists.md for Tier 1/2/3 AI vocabulary, ai-patterns.md with P0/P1/P2 triage, page-types.md, and ui-states.md for destructive CTAs and error copy. Mode A requires a confirmed brief covering page purpose, audience, product outcome, and traffic temperature before writing two or three alternatives. Developers reach for it when asked to write copy, fix CTAs, remove AI-isms, or rewrite landing hero text. skills.sh lists 267 installs and the agent-skills repository has 54 GitHub stars.326installs16Autoshipautoship is an mblode/agent-skills workflow that runs the full npm release loop for existing changesets packages. A developer pushes a pending .changeset/*.md file; CI runs changeset version and opens a Version Packages PR; after merge, changeset publish tags and publishes to npm. The skill's five steps cover creating a patch changeset (default), fixing lint/type/test/format gates with up to five iterations each, committing only explicit paths, monitoring GitHub Actions with gh, auto-merging the Version Packages PR when checks pass, and verifying npm view version. It explicitly forbids local npx changeset version, hand-editing CHANGELOG.md, and direct npm publish. Pair autoship with pr-creator for feature work and scaffold-cli for first-time package setup.317installs17Ax Auditax-audit guides Claude Code through accessibility reviews of web or app UI: WCAG-oriented checks, keyboard and screen-reader risks, contrast failures, and prioritized fixes so teams ship inclusive experiences and pass pre-release quality bars.195installs18Pr CreatorPR Creator from mblode agent-skills packages agent-generated diffs into review-ready GitHub pull requests with clear titles, descriptions, and branch hygiene so ship-stage review starts immediately instead of after manual Git chores.189installs19Pr Babysitterpr-babysitter from agent-skills automates pull request hygiene: it watches CI, responds to review feedback, fixes failing checks, resolves conflicts, and keeps GitHub stacks merge-ready without constant manual babysitting.188installs20Pr Reviewerpr-reviewer is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.145installs