frontend-design

bdecrem/vibeceo

Comprehensive frontend design principles for creating distinctive, aesthetically compelling web interfaces. Use when creating HTML artifacts, React components, or any frontend UI work to avoid generic "AI slop" aesthetics and instead produce creative, surprising, and delightful designs.

2 stars

3 forks

22 views

View on GitHub Add to Favorites

Installation

Option 1: Use slash command in Claude Code

/install-skill https://github.com/bdecrem/vibeceo/tree/main/sms-bot/documentation/claude-skills/frontend-design-extracted

Option 2: Clone to skills directory

# Global (all projects)

git clone https://github.com/bdecrem/vibeceo/tree/main/sms-bot/documentation/claude-skills/frontend-design-extracted ~/.claude/skills/vibeceo

# Project-specific

git clone https://github.com/bdecrem/vibeceo/tree/main/sms-bot/documentation/claude-skills/frontend-design-extracted .claude/skills/vibeceo

Add MCP server to .cursor/mcp.json:

{
  "mcpServers": {
    "skillz": {
      "command": "npx",
      "args": ["-y", "skillz-mcp", "https://github.com/bdecrem/vibeceo/tree/main/sms-bot/documentation/claude-skills/frontend-design-extracted"]
    }
  }
}

Restart Cursor after adding the configuration.

Option 1: Use Gemini CLI command

gemini extensions install https://github.com/bdecrem/vibeceo/tree/main/sms-bot/documentation/claude-skills/frontend-design-extracted

Option 2: Clone to extensions directory

git clone https://github.com/bdecrem/vibeceo/tree/main/sms-bot/documentation/claude-skills/frontend-design-extracted ~/.gemini/extensions/vibeceo

Related Skills

eightctl

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

gemini

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

camsnap

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

clawdis-canvas

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞