anthropics/skills180kfrontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
前端开发
When you want to integrate an external tool, API, MCP server, or service into a project — the wizard walks you through auth, config, env vars, client wrapper code, example usage, and an optional smoke test. Scoped to Next.js and Rails projects. Interactive Q&A — starts with the tool name, asks structured questions until the integration is specified, then scaffolds files. Examples — Stripe, Kit, Sanity, Notion, Neon, Supabase, Resend, Postmark, Twilio, Anthropic, OpenAI, Vercel Blob, custom internal APIs. For MCP servers, also handles the .mcp.json wiring. Triggers on "/toolify," "integrate X," "add X to this project," "wire up X," "set up the X integration," "hook up X," "connect X," "add MCP for X." Part of the -ify trifecta (skillify / toolify / loopify). NOT for adding new SKILL.md files — that's skillify. NOT for cron/agent loops — that's loopify.
把这段话发给 Claude Code、Codex 或 Cursor。智能体会先检查安全性,你确认后才安装。
读取 https://funcoding.ai/skills/coreyhaines31/makerskills/toolify/install.md ,按里面的步骤帮我安装这个 Skill。
Interactive wizard for adding an external tool / API / MCP into a project. Ends with working code + env vars set + a verification path.
.mcp.json wiring (if MCP server).Ask if not provided: "Which tool are we integrating?"
Detect category from name:
| Category | Examples | Extra steps |
|---|---|---|
| Payments | Stripe, LemonSqueezy, Paddle | Webhook signature verification, customer model, event handlers |
| Auth | NextAuth/Auth.js, Clerk, Supabase Auth, Devise | Session management, protected routes, callbacks |
| Resend, Postmark, SendGrid, Kit | From address, template setup, unsubscribe handling | |
| CMS/DB | Sanity, Prisma, Drizzle, Neon, Supabase | Schema location, migration path, client singleton pattern |
| AI/LLM | Anthropic, OpenAI, Gemini, Vercel AI SDK | Model choice, streaming vs non-streaming, rate limits |
| Analytics | Fathom, PostHog, Plausible | Script placement, event tracking API |
| Scheduling/Comms | SavvyCal, Cal.com, Twilio, Riverside | Webhook events, embed patterns |
| Scraping | ScrapeCreators, Apify, Playwright | Rate limits, response caching, retry policy |
| Affiliate/Referral | Rewardful, PartnerStack | Cookie handling, webhook events, dashboard access |
| Storage | Vercel Blob, S3, R2 | Bucket setup, signed URL pattern, presigned upload |
| MCP server | Any MCP — Sanity, Stripe, GitHub, Kit, etc. | .mcp.json entry + env vars, no client wrapper |
| Custom / other | Internal API, unknown tool | Ask more questions |
If category detection fails, ask 2 questions to place it: "Is it an API you call, a webhook receiver, or both?" / "Does it have an official SDK?"
Ask the following in order (skip questions that don't apply based on category):
package.json vs Gemfile; ask if both)SCREAMING_SNAKE_CASE matching official convention — e.g., STRIPE_SECRET_KEY, RESEND_API_KEY)src/lib/<tool>.ts for Next.js; app/services/<tool>_client.rb for Rails)Show the user the answers as a summary before scaffolding — one chance to correct before writing files.
Pull the current official quickstart. Prefer context7 if your agent has it (fresher docs than training data); otherwise fetch the official quickstart URL with your agent's URL-fetch tool (WebFetch in Claude Code) or curl.
Read once, then work from cached content. Don't re-fetch mid-scaffold. Note the SDK version cited so package.json gets the right pin.
For a standard Next.js integration, generate:
src/lib/<tool>.ts # client singleton + typed wrappers
src/app/api/webhooks/<tool>/route.ts # webhook handler (if applicable)
src/app/api/<tool>/example/route.ts # one working example route
.env.local.example # env var template with placeholder values
For Rails:
config/initializers/<tool>.rb # SDK config
app/services/<tool>_client.rb # client wrapper
app/controllers/webhooks/<tool>_controller.rb # webhook handler if applicable
config/routes.rb # webhook route
.env.example # env vars
For an MCP server, only:
.mcp.json # add or update with the new server entry
.env.local # add the env vars the MCP needs
Every scaffolded file should have a comment at the top like:
// Scaffolded by /toolify on 2026-06-30. Official docs: <url>. SDK version: <version>.
// The client wrapper is scoped to plumbing only — business logic lives elsewhere.
Apply the right auth pattern per tool category. Never invent — use the pattern the official docs specify. Common patterns:
Authorization: Bearer <key> or X-<Vendor>-Key: <key> — check vendor's exact spellingAdd to the appropriate file:
.env.local (Next.js) / .env (Rails) — NEVER committedNEXT_PUBLIC_*) — these get inlined into the client bundle at build time and are ALREADY public. Use --no-sensitive so you can audit them later:
vercel env add NEXT_PUBLIC_APP_URL production --value "<url>" --no-sensitive --yes
--sensitive behavior so the value is write-only via the CLI (can't be read back via vercel env pull):
vercel env add STRIPE_SECRET_KEY production --value "<key>" --sensitive --yes
vercel env add STRIPE_WEBHOOK_SECRET production --value "<secret>" --sensitive --yes
NEXT_PUBLIC_* uses --no-sensitive. Everything else uses --sensitive. Getting this wrong means server secrets are readable via vercel env pull in someone's local terminal — same class of leak as committing them.references/vercel-env-vars.md for the full policy + verification via vercel env pull + brackets-check.heroku config:set <VAR>=<value> -a <app-name>Also update .env.example / .env.local.example with the placeholder so teammates know the var is needed.
Generate a one-line verification the user can run:
# Example for a REST API:
curl -H "Authorization: Bearer $STRIPE_SECRET_KEY" https://api.stripe.com/v1/customers?limit=1
# Example for an SDK:
node -e "const s = require('./src/lib/stripe.ts').default; s.customers.list({limit:1}).then(console.log)"
# For MCP: restart your agent so it reloads MCP config, run any command that touches the MCP server
Show the expected output shape. If the call fails, the wizard should be first to catch it, not the user in prod.
Report:
package.json / GemfileOffer:
loopify cron to check the webhook is still receiving events daily?"skillify from-chat?"Full recipes for common tools live in references/ (populate as they're used):
references/stripe-nextjs.md — payment integration + webhook + customer portalreferences/kit-nextjs.md — Kit (ConvertKit) MCP + subscriber APIreferences/sanity-nextjs.md — Sanity CMS + MCP + Studio embedreferences/anthropic-nextjs.md — Claude API + streaming + rate limitsreferences/scrapecreators-nextjs.md — social scraping API + retry policyreferences/rewardful-nextjs.md — referral tracking + webhook eventsIf a recipe doesn't exist yet, the wizard fetches the official docs, scaffolds fresh, and offers to save the recipe as ${MAKERSKILLS_CONFIG:-$HOME/.config/makerskills}/toolify/recipes/<tool>-<stack>.md for reuse (never inside the skill folder — upgrades wipe it). When looking up recipes, check both references/ (shipped) and the config recipes dir (yours).
skillify — sibling in -ify trifecta. Use skillify when the goal is a new SKILL.md, not an integration.loopify — sibling. Use loopify for setting up cron/agent-loop patterns on top of the toolified integration (e.g., poll a webhook, sync data daily).compound-engineering:context7 — fetch current SDK docs (fresher than training data).makerskills:watch-video — if the user has a Loom of an integration walkthrough, feed it in to synthesize the recipe..env.local and .env are gitignored — verify before finishing.package.json / Gemfile.lock. Note the version in the file header comment.references/ or $MAKERSKILLS_CONFIG/toolify/recipes/ and adapt, don't re-derive.
anthropics/skills180kGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
前端开发
anthropics/skills180kSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
前端开发
addyosmani/agent-skills103kGuides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
前端开发
addyosmani/agent-skills103kBuilds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
前端开发
addyosmani/agent-skills103kOptimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
前端开发
nexu-io/open-design100kOpenDesign's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.
前端开发