patricio0312rev/skills
3 skills6.7k installs135 starsGitHub
Install
npx skills add https://github.com/patricio0312rev/skillsSkills in this repo
1Framer Motion AnimatorFramer Motion Animator is an agent skill that walks solo builders through declarative React animations using Framer Motion. It is for indie developers shipping marketing sites, dashboards, or mobile web apps who want polished motion without hiring a motion designer. Trigger it when users ask to add animation, page transitions, micro-interactions, or Framer Motion specifically. The skill structures work as a repeatable pipeline: classify the need (entrance, exit, hover, gesture), pick simple versus variants versus layout modes, set motion values, tune transitions, orchestrate sequences, and trim for performance. It pairs npm install guidance with TSX examples for fade-ins, scale-on-hover, and spring-based feedback. The outcome is implementation-ready patterns that fit Claude Code, Cursor, or Codex workflows on existing React trees rather than one-off chat snippets.6kinstalls2Eslint Prettier Configeslint-prettier-config is an agent skill that walks solo and indie builders through a repeatable setup for ESLint and Prettier on TypeScript and React projects. It follows a six-step workflow: install ESLint, Prettier, and the right plugins; define ESLint rules using the flat config format introduced in ESLint v9; set Prettier formatting options; merge the two so formatting does not fight lint rules; add package.json lint and format scripts; and optionally hook validation into pre-commit. The skill includes concrete eslint.config.mjs examples with ignores for node_modules, dist, build, .next, and coverage, plus recommended extends for JavaScript baseline and TypeScript-specific language options. Invoke it when a user asks for ESLint setup, Prettier config, linting configuration, code formatting, or lint rules—especially when starting a new repo or migrating off legacy .eslintrc. The outcome is a repo where agents and humans share one enforced style, which makes later ship-phase review and CI much cheaper.723installs3Mcp Server Buildermcp-server-builder is an agent skill for solo builders who want Claude—and compatible hosts—to reach their APIs, files, or workflows through the Model Context Protocol. When someone asks to create an MCP server, build a Claude tool, or ship custom MCP integration, the skill walks a seven-step path: clarify purpose, pick stdio or HTTP/SSE transport, design JSON-schema tools and handlers, optionally expose resources and prompt templates, test with the MCP inspector, then configure Claude Desktop or API deployment. The embedded architecture diagram frames JSON-RPC over stdio between host and your app. TypeScript setup snippets accelerate a new repo without replacing your domain logic. Intermediate builders benefit most: you should understand basic Node tooling and what “tool schema” means for your use case. It delivers a runnable server package, not a hosted marketplace listing—pair with security review before exposing secrets or production data.1installs