Jennings's Blog

AI Skeleton

Published on
Last updated on

Agents

specialized agents for various tasks

UI agents

  • rams.ai: A design engineer for your coding agent. Reviews for accessibility issues, visual inconsistencies, and UI polish — then offers to fix them. Works with Claude Code, Cursor, OpenCode, Codex, and Antigravity. Install via curl -fsSL https://rams.ai/install | bash
  • UI Skills: Opinionated constraints for building better interfaces with agents. curl -fsSL https://ui-skills.com/install | bash
  • Vercel Web Interface Guidelines: curl -fsSL https://vercel.com/design/guidelines/install | bash

Skill

Skill was introduced by Anthropic, but it is now widely adopted by other code agents. There are many kinds of skills used in a wide range of tasks beyond coding.

Here I want to maintain some of the skills that are widely used and meaningful for me in my day-to-day work.

skill management

At the very beginning, when skills were not widely adopted, we could only install skills with claude plugin install from a plugin or copy the skill contents to ~/.claude/skills or .claude/skills. As usage has grown, many third-party tools now manage and install skills for different code agents.

  • add-skill to install skills via npx add-skill <owner/repo>
  • skills.sh npx skills add vercel-labs/agent-skills, underlying it uses add-skill
  • openskills npx openskills install anthropics/skills

Skills collections

As so many skills have been created and even more are emerging, we pick those we find valuable for work and life.

Coding

  • UI / Design

    • npx skills add vercel-labs/agent-skills: it has several skills

      • vercel-react-best-practices: Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

      • web-design-guidelines: Review files for compliance with Web Interface Guidelines.

        • Fetch the latest guidelines from the source URL below
        • Read the specified files (or prompt user for files/pattern)
        • Check against all rules in the fetched guidelines
        • Output findings in the terse file:line format

      • React Best Practices: When working with React, always load both this skill and typescript-best-practices together. TypeScript patterns (type-first development, discriminated unions, Zod validation) apply to React code.

    • npx add-skill anthropics/skills: Claude official skills, contains 17 skills

      • frontend-design: This skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic “AI slop” aesthetics. Implements real working code with exceptional attention to aesthetic details and creative choices.

      • Skill Creator: This skill provides guidance for creating effective skills.

    • npx add-skill google-labs-code/stitch-skills

    • pencil: ide with mcp, can integrated with all kinds of claude code, cursor, antigravity automatically when the editor is starting

    • Axiom: Battle-tested Claude Code skills, commands, and references for modern xOS (iOS, iPadOS, tvOS, watchOS) development — Swift 6, SwiftUI, Liquid Glass, Apple Intelligence, and more.

    • ui-ux-pro-max

  • Automation

    • agent-browser with its skill npx skills add vercel-labs/agent-browser

      • Also install its CLI

        npm install -g agent-browser
        agent-browser install  # Download Chromium

    • playwright-skill

    • npx skills add firecrawl/cli

  • Language/Lib specific

    • npx skills add better-auth/skills: Always consult better-auth.com/docs for code examples and the latest API. Better Auth is a TypeScript-first, framework-agnostic auth framework supporting email/password, OAuth, magic links, passkeys, and more via plugins.

  • Development

    • super-skill-claude-artifacts

    • rust-skills: AI-powered Rust development assistant with a meta-cognition framework

    • npx skills add leonardomso/rust-skills: 179 Rust rules your AI coding agent can use to write better code.

    • npx skills add vercel-labs/next-skills: a skill set for Next.js App Router best practices, version upgrades, and performance features like cache components.

Documentation

  • Document-illustrator: 它能智能理解文档内容，自动归纳核心要点，并为每个主题生成专业配图。无需依赖特定文档格式，AI 会理解内容并生成符合你选择风格(渐变玻璃卡片、票据风格、矢量插画)的高质量图片

Multimedia

  • Video/Animation

    • npx skills add remotion-dev/skills: Remotion now has Agent Skills — make videos just with Claude Code!
    • npx skills add https://github.com/op7418/Youtube-clipper-skill: AI-powered YouTube video clipper for Claude Code. Download videos, generate semantic chapters, clip segments, translate subtitles to bilingual format, and burn subtitles into videos.
    • npx skills add adithya-s-k/manim_skill: create manim animations
    • npx skills add black-forest-labs/skills

  • Images/Graph

    • threejs-skills: A curated collection of Three.js skill files that provide Claude Code with foundational knowledge for creating 3D elements and interactive experiences, “

Miscellaneous

  • baoyu-skills: 宝玉 skills collection, contains 12+ skills

    • baoyu-slide-deck
    • baoyu-image-gen
    • baoyu-danger-gemini-web: Image generation skill using Gemini Web
    • baoyu-danger-x-to-markdown: Convert X (Twitter) tweet or article URL to markdown
    • baoyu-xhs-images: Xiaohongshu (Little Red Book) infographic series generator with multiple style options
    • baoyu-infographic: Generate professional infographics with 20 layout types and 17 visual styles

  • npx skills add https://github.com/blader/humanize and npx skills add https://github.com/op7418/Humanizer-zh 去除文本中 AI 生成痕迹的工具

  • npx skills add https://github.com/wshuyi/x-article-publisher-skill : Publish Markdown articles to X (Twitter) Articles with one command. Say goodbye to tedious rich text editing.

  • news-aggregator-skill: 可以获取来自多个来源的实时热点新闻

MCP

Installation

  #!/bin/bash
  npx skills add -g -y --all https://github.com/cclank/news-aggregator-skill
  npx skills add -g -y --all https://github.com/op7418/Humanizer-zh.git
  npx skills add -g -y --all https://github.com/blader/humanizer.git
  npx skills add -g -y --all https://github.com/JimLiu/baoyu-skills
  npx skills add -g -y --all https://github.com/op7418/Youtube-clipper-skill
  npx skills add -g -y --all https://github.com/softaworks/agent-toolkit
  npx skills add -g -y --all firecrawl/cli
  npx skills add -g -y --all coreyhaines31/marketingskills
  npx skills add -g -y --all https://github.com/fleurytian/awesome-claude-skills --skill mckinsey-consultant
  npx skills add -g -y --all https://github.com/rohunvora/x-research-skill


  npx skills add -g -y --all black-forest-labs/skills
  npx skills add -g -y --all https://github.com/CloudAI-X/threejs-skills
  npx skills add -g -y --all adithya-s-k/manim_skill
  npx skills add -g -y --all https://github.com/charleswiltgen/axiom
  npx skills add -g -y --all https://github.com/ehmo/platform-design-skills


  npx skills add -g -y --all better-auth/skills
  npx skills add -g -y --all vercel-labs/agent-skills
  npx skills add -g -y --all vercel-labs/next-skills
  npx skills add -g -y --all supabase/agent-skills
  npx skills add -g -y --all sanyuan0704/code-review-expert
  npx skills add -g -y --all vercel/ai-elements
Back to List