kith-ux-polisher — community kith-ux-polisher, community, ide skills, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing advanced UI/UX design system integration with Kith's visual identity. Kith is a modern, user friendly, family tree application.

sf-bcca sf-bcca
[0]
[0]
Updated: 3/5/2026

Agent Capability Analysis

The kith-ux-polisher skill by sf-bcca is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance.

Ideal Agent Persona

Perfect for Frontend Agents needing advanced UI/UX design system integration with Kith's visual identity.

Core Value

Empowers agents to enforce a consistent design language using rounded corners, soft shadows, and glassmorphism, streamlining user experience with `backdrop-blur-md` and semi-transparent backgrounds like `bg-white/80`.

↓ Capabilities Granted for kith-ux-polisher

Standardizing UI components with `rounded-3xl` and `rounded-2xl` classes
Enhancing modal and card designs with `shadow-lg` and `shadow-primary/20`
Implementing overlays with `backdrop-blur-md` for improved visual depth

! Prerequisites & Limits

  • Requires Kith application integration
  • Limited to specific design system components like containers, modals, and cards
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

kith-ux-polisher

Install kith-ux-polisher, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Kith UX Polisher

This skill acts as the guardian of Kith's visual identity and user experience.

Design System

1. Core Aesthetics

  • Rounded Corners: Use rounded-3xl for main containers/modals, rounded-2xl for cards, rounded-xl for inputs/buttons.
  • Shadows: Use soft, colored shadows for depth (e.g., shadow-lg shadow-primary/20).
  • Glassmorphism: Use backdrop-blur-md and semi-transparent backgrounds (bg-white/80) for overlays and sticky headers.

2. Interaction Patterns

  • Modals: Must have animate-in fade-in zoom-in entrance animations and close on backdrop click.
  • Buttons:
    • Primary: bg-primary text-white shadow-lg hover:scale-[1.02] active:scale-[0.98]
    • Secondary: bg-slate-100 text-slate-600 hover:bg-slate-200
  • Feedback: All interactive elements must provide visual feedback (hover, active, focus states).

3. Data Visualization (Trees & Charts)

  • Consistency: Use consistent node sizes (w-40, h-16) and stroke widths (stroke-2) across different tree views.
  • Lines: Use orthogonal (right-angle) connectors with rounded corners for hierarchy.
  • Controls: All charts must support Pan & Zoom interactions via consistent controls (top-right overlay).

Accessibility & Responsiveness

1. Accessibility (a11y)

  • Contrast: Ensure text passes WCAG AA. Use text-slate-500 for secondary text, never lighter unless on dark backgrounds.
  • Labels: All icon-only buttons MUST have an aria-label or title.
  • Keyboard: Ensure all interactive elements are focusable and have visible focus rings (focus:ring-2).

2. Responsive Strategy

  • Mobile First: Design for touch targets (min 44px) on small screens.
  • Overflow: Complex charts should overflow with scroll (overflow-auto) on mobile rather than shrinking to illegibility.
  • Navigation: Use the bottom navigation bar (BottomNav.tsx) pattern for mobile views.

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is kith-ux-polisher?

Perfect for Frontend Agents needing advanced UI/UX design system integration with Kith's visual identity. Kith is a modern, user friendly, family tree application.

How do I install kith-ux-polisher?

Run the command: npx killer-skills add sf-bcca/Kith/kith-ux-polisher. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for kith-ux-polisher?

Key use cases include: Standardizing UI components with `rounded-3xl` and `rounded-2xl` classes, Enhancing modal and card designs with `shadow-lg` and `shadow-primary/20`, Implementing overlays with `backdrop-blur-md` for improved visual depth.

Which IDEs are compatible with kith-ux-polisher?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for kith-ux-polisher?

Requires Kith application integration. Limited to specific design system components like containers, modals, and cards.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add sf-bcca/Kith/kith-ux-polisher. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use kith-ux-polisher immediately in the current project.

Related Skills

Looking for an alternative to kith-ux-polisher or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI