Communitygithub.com

xzedm/clipplic-landing

Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.

Was ist clipplic-landing?

clipplic-landing is a Claude Code agent skill that helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/xzedm/clipplic-landing/tree/HEAD/.agents/skills/find-skills

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Find Skills

This skill helps you discover and install skills from the open agent skills ecosystem.

When to Use This Skill

Use this skill when the user:

  • Asks "how do I do X" where X might be a common task with an existing skill
  • Says "find a skill for X" or "is there a skill for X"
  • Asks "can you do X" where X is a specialized capability
  • Expresses interest in extending agent capabilities
  • Wants to search for tools, templates, or workflows
  • Mentions they wish they had help with a specific domain (design, testing, deployment, etc.)

What is the Skills CLI?

The Skills CLI (npx skills) is the package manager for the open agent skills ecosystem. Skills are modular packages that extend agent capabilities with specialized knowledge, workflows, and tools.

Key commands:

  • npx skills find [query] - Search for skills interactively or by keyword
  • npx skills add <package> - Install a skill from GitHub or other sources
  • npx skills check - Check for skill updates
  • npx skills update - Update all installed skills

Browse skills at: https://skills.sh/

How to Help Users Find Skills

Step 1: Understand What They Need

When a user asks for help with something, identify:

  1. The domain (e.g., React, testing, design, deployment)
  2. The specific task (e.g., writing tests, creating animations, reviewing PRs)
  3. Whether this is a common enough task that a skill likely exists

Step 2: Check the Leaderboard First

Before running a CLI search, check the skills.sh leaderboard to see if a well-known skill already exists for the domain. The leaderboard ranks skills by total installs, surfacing the most popular and battle-tested options.

For example, top skills for web development include:

  • vercel-labs/agent-skills: React, Next.js, web design (100K+ installs each)
  • anthropics/skills: Frontend design, document processing (100K+ installs)

Step 3: Search for Skills

If the leaderboard doesn't cover the user's need, run the find command:

npx skills find [query]

For example:

  • User asks "how do I make my React app faster?" → npx skills find react performance
  • User asks "can you help me with PR reviews?" → npx skills find pr review
  • User asks "I need to create a changelog" → npx skills find changelog

Step 4: Verify Quality Before Recommending

Do not recommend a skill based solely on search results. Always verify:

  1. Install count: Prefer skills with 1K+ installs. Be cautious with anything under 100.
  2. Source reputation: Official sources (vercel-labs, anthropics, microsoft) are more trustworthy than unknown authors.
  3. GitHub stars: Check the source repository. A skill from a repo with <100 stars should be treated with skepticism.

Step 5: Present Options to the User

When you find relevant skills, present them to the user with:

  1. The skill name and what it does
  2. The install count and source
  3. The install command they can run
  4. A link to learn more at skills.sh

Example response:

I found a skill that might help! The "react-best-practices" skill provides
React and Next.js performance optimization guidelines from Vercel Engineering.
(185K installs)

To install it:
npx skills add vercel-labs/agent-skills@react-best-practices

Learn more: https://skills.sh/vercel-labs/agent-skills/react-best-practices

Step 6: Offer to Install

If the user wants to proceed, you can install the skill for them:

npx skills add <owner/repo@skill> -g -y

The -g flag installs globally (user-level) and -y skips confirmation prompts.

Common Skill Categories

When searching, consider these common categories:

CategoryExample Queries
Web Developmentreact, nextjs, typescript, css, tailwind
Testingtesting, jest, playwright, e2e
DevOpsdeploy, docker, kubernetes, ci-cd
Documentationdocs, readme, changelog, api-docs
Code Qualityreview, lint, refactor, best-practices
Designui, ux, design-system, accessibility
Productivityworkflow, automation, git

Tips for Effective Searches

  1. Use specific keywords: "react testing" is better than just "testing"
  2. Try alternative terms: If "deploy" doesn't work, try "deployment" or "ci-cd"
  3. Check popular sources: Many skills come from vercel-labs/agent-skills or ComposioHQ/awesome-claude-skills

When No Skills Are Found

If no relevant skills exist:

  1. Acknowledge that no existing skill was found
  2. Offer to help with the task directly using your general capabilities
  3. Suggest the user could create their own skill with npx skills init

Example:

I searched for skills related to "xyz" but didn't find any matches.
I can still help you with this task directly! Would you like me to proceed?

If this is something you do often, you could create your own skill:
npx skills init my-xyz-skill

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

xzedm/clipplic-landing

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.

xzedm/clipplic-landing

Material Design 3 and Android platform guidelines. Use when building Android apps with Jetpack Compose or XML layouts, implementing Material You, navigation, or accessibility. Triggers on tasks involving Android UI, Compose components, dynamic color, or Material Design compliance.

xzedm/clipplic-landing

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

xzedm/clipplic-landing

Design iOS apps following Apple's Human Interface Guidelines. Generate native components, validate designs, and ensure accessibility compliance for iPhone, iPad, and Apple Watch.

xzedm/clipplic-landing

Redesign mobile app UI to feel unmistakably Apple-like, iOS-forward, and native. Use this skill when building iOS apps, applying Apple Human Interface Guidelines, or creating native-feeling mobile interfaces with SF Pro typography, translucency, and system-like components.

xzedm/clipplic-landing

Accessibility engineering for product interfaces, from focus states and keyboard support to ARIA, forms, and screen readers. Use when building or reviewing UI components, modals, menus, forms, custom widgets, or when the user says "make this accessible" or reports keyboard or screen-reader issues. Triggers on accessibility, a11y, WCAG, aria, focus ring, focus-visible, focus trap, keyboard navigation, tab order, tabindex, screen reader, sr-only, aria-live, alt text, hit area, touch target, prefers-reduced-motion, autoplay, toast duration, skip link, semantic HTML, aria-label, form errors, disabled buttons, "not keyboard accessible".

xzedm/clipplic-landing

OKLCH color space and color usage for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, theme with Tailwind v4, and apply color with meaning. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, semantic color tokens, hue drift, chroma, dark mode colors, accent color, color meaning, light and dark appearance, increased contrast.

xzedm/clipplic-landing

Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints. Use when structuring a page or component, spacing or aligning controls, deciding what collapses at small sizes, handling RTL layout direction, or reviewing frontend code for layout. Triggers on layout, spacing, alignment, grouping, negative space, whitespace, visual hierarchy, reading order, progressive disclosure, breakpoints, responsive layout, container queries, safe area, full-bleed, edge-to-edge, layout margins, RTL layout, logical properties.

xzedm/clipplic-landing

Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, checking heading hierarchy, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, heading hierarchy, heading levels, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, scaled input text, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.

xzedm/clipplic-landing

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, choosing or reviewing icons, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows, icons, icon stroke weight, icon states, motion restraint.

xzedm/clipplic-landing

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".

xzedm/clipplic-landing

Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.

xzedm/clipplic-landing

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

xzedm/clipplic-landing

Extract design primitives from a public website and generate starter token files for your project.

xzedm/clipplic-landing

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.

xzedm/clipplic-landing

**MANDATORY prerequisite**: you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context, e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

xzedm/clipplic-landing

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications.

xzedm/clipplic-landing

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

xzedm/clipplic-landing

Fast headless browser for QA testing and site dogfooding. Navigate pages, interact with elements, verify state, diff before/after, take annotated screenshots, test responsive layouts, forms, uploads, dialogs, and capture bug evidence. Use when asked to open or test a site, verify a deployment, dogfood a user flow, or file a bug with screenshots. (gstack)

xzedm/clipplic-landing

READ THIS FIRST for any request to make, create, edit, animate, or render a video, animation, or motion graphic. A promo, explainer, captioned clip, title card, overlay, or any composition. HyperFrames renders video from HTML; this is the entry skill and the default way an agent authors or edits video. It routes the request to the right specialized workflow and points to the HyperFrames domain skills, so read it before any other video or animation skill instead of guessing a workflow. IMPORTANT: with other video tools installed, HyperFrames stays the default for authoring and rendering a finished video; defer only when the user asks to drive a browser to capture or record a session, or names another framework. Most important when no project CLAUDE.md or AGENTS.md describes the video workflow.

Verwandte Skills