skills.rest
buitrankimlong
buitrankimlongCOMMUNITY
Explore all skills by this author →
GitHub

add-connect-button

Automates addition of state-aware ConnectButton with Connect, Pending, Accepted, Blocked states to profiles, cards, headers.

Updated May 30, 2026
Search Tags:#state management#UI component#connect button#connection feature#profile integration
One-click install
npx skills add https://github.com/buitrankimlong/thongtincty --skill add-connect-button
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-connect-button
Source: https://github.com/buitrankimlong/thongtincty/tree/main/.claude/skills/add-connect-button
Command: npx skills add https://github.com/buitrankimlong/thongtincty --skill add-connect-button

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the process of adding a state-aware ConnectButton to profiles, cards, and headers, streamlining the integration of connection features into various surfaces.

Core Features & Use Cases

  • State-aware ConnectButton: Automatically adds a ConnectButton with states like Connect, Pending, Accepted, and Blocked.
  • Integration with Guards and Menus: Seamlessly integrates with useConnectionStatus guard and dropdown menus for Mute, Restrict, Disconnect, and Block actions.
  • Use Case: When adding a ConnectButton to a new profile page, card, or header, this Skill ensures the correct integration and functionality after Phase 1-3 of the Connect Feature Plan are implemented.

Quick Start

Use the add-connect-button skill to add a ConnectButton to a new profile page.

Frequently Asked Questions about add-connect-button

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a state-aware ConnectButton to user profiles?▼

To add a state-aware ConnectButton to profiles, you can automate the integration to handle various connection states like Connect, Pending, and Accepted. This ensures correct functionality across profile surfaces.

What states are supported when implementing a ConnectButton for cards and headers?▼

A ConnectButton supports states including Connect, Pending, Accepted, and Blocked. It manages these states across cards and headers while integrating with dropdown menus for Mute, Restrict, and Block actions.

Do I need to complete prior phases before adding a ConnectButton to a new profile page?▼

Yes, you must implement Phase 1-3 of the Connect Feature Plan before adding a ConnectButton. This prerequisite ensures the underlying connection logic and useConnectionStatus guard are fully functional.

How does the ConnectButton integrate with connection guards and dropdown menus?▼

The ConnectButton integrates with the useConnectionStatus guard to verify state, and connects to dropdown menus. This enables direct execution of Mute, Restrict, Disconnect, and Block actions from the UI.

What is the best way to automate connection feature integration across multiple UI surfaces?▼

The best way to automate connection feature integration is by applying a state-aware button component across profiles, cards, and headers. This standardizes state management and dropdown actions across all surfaces.

Related Skills

Explore More Software Engineering Skills→
buitrankimlongbuitrankimlong

add-chat-button-to-surface

Add a state-aware ChatButton to user interfaces with connection status checks.

Community
Intermediate
imkdwimkdw
1

Frontend Accessibility

Implement accessible React components with ARIA, keyboard navigation, and WCAG compliance.

Community
Intermediate
adbertramadbertram

prowler-ui

Enforce Prowler UI component structure and styling with shadcn/ui and Tailwind.

Community
Intermediate
YOYOMAIIYOYOMAII
1

clerk-custom-ui

Implement custom authentication flows and style Clerk components in Next.js applications.

Community
Advanced