๐ŸŽฏ

frontend-design

๐ŸŽฏSkill

from mrgoonie/claudekit-skills

VibeIndex|
What it does
|

Designs distinctive, production-grade frontend interfaces with creative aesthetics, avoiding generic AI design and focusing on purposeful, memorable visual experiences.

๐Ÿ“ฆ

Same repository

mrgoonie/claudekit-skills(31 items)

frontend-design

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code
npx vibeindex add mrgoonie/claudekit-skills --skill frontend-design
skills.sh Installโš  Installs to .agents/skills/ - may not be auto-recognized by Claude Code
npx skills add mrgoonie/claudekit-skills --skill frontend-design
Manual InstallCopy SKILL.md content and save to the path below
~/.claude/skills/frontend-design/SKILL.md

SKILL.md

246Installs
-
AddedFeb 4, 2026

More from this repository10

๐ŸŽฏ
backend-development๐ŸŽฏSkill

Guides building robust backend systems with modern technologies like Node.js, Python, Go, and Rust, covering API design, database integration, authentication, security best practices, and scalability patterns.

๐ŸŽฏ
sequential-thinking๐ŸŽฏSkill

Enables structured problem-solving through iterative step-by-step reasoning with the ability to revise thoughts, branch into alternatives, and dynamically adjust scope.

๐ŸŽฏ
threejs๐ŸŽฏSkill

Three.js development skill for building high-performance 3D web apps covering WebGL/WebGPU rendering, PBR materials, custom shaders, VR/XR, physics, and post-processing effects

๐ŸŽฏ
devops๐ŸŽฏSkill

Deploys and manages cloud infrastructure across Cloudflare Workers, Docker, Google Cloud, and Kubernetes with CI/CD, GitOps, and security audit capabilities.

๐ŸŽฏ
chrome-devtools๐ŸŽฏSkill

Automates browser interactions, debugging, and performance analysis using Puppeteer CLI scripts that output JSON for easy parsing.

๐ŸŽฏ
ui-styling๐ŸŽฏSkill

UI styling skill for creating accessible user interfaces with shadcn/ui components (Radix UI + Tailwind), utility-first Tailwind CSS styling, canvas-based visual designs, and consistent theming including dark mode

๐ŸŽฏ
problem-solving๐ŸŽฏSkill

Creative problem-solving skill collection with techniques for breaking through stuck points, including collision-zone thinking, inversion, pattern recognition, and simplification approaches

๐ŸŽฏ
media-processing๐ŸŽฏSkill

Processes multimedia files with FFmpeg for video/audio encoding, conversion, and streaming, and ImageMagick for image manipulation, batch processing, and effects.

๐ŸŽฏ
code-review๐ŸŽฏSkill

Enforces rigorous code review practices by systematically evaluating feedback, requesting reviews, and verifying technical correctness before claiming task completion.

๐ŸŽฏ
aesthetic๐ŸŽฏSkill

Aesthetic design skill for creating beautiful interfaces following proven design principles, covering visual hierarchy, color theory, micro-interactions, and design system guidance with chrome-devtools and AI multimodal integration