Vibe Index
🎯

frontend-design

🎯Skill

from hotriluan/alkana-dashboard

VibeIndex|
What it does

Transforms design references into polished, production-ready frontend interfaces with exceptional aesthetic precision and technical implementation.

πŸ“¦

Part of

hotriluan/alkana-dashboard(7 items)

frontend-design

Installation

pip installInstall dependencies
pip install -r requirements.txt
PythonRun Python server
python -m src.main init
PythonRun Python server
python -m src.main load
PythonRun Python server
python -m src.main transform
npm runRun npm script
npm run dev

+ 3 more commands

πŸ“– Extracted from docs: hotriluan/alkana-dashboard
Need more details? View full documentation on GitHub β†’
1Installs
-
AddedFeb 4, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.

Overview

Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention.

Workflow Selection

Choose workflow based on input type:

| Input | Workflow | Reference |

|-------|----------|-----------|

| Screenshot | Replicate exactly | ./references/workflow-screenshot.md |

| Video | Replicate with animations | ./references/workflow-video.md |

| Screenshot/Video (describe only) | Document for devs | ./references/workflow-describe.md |

| 3D/WebGL request | Three.js immersive | ./references/workflow-3d.md |

| Quick task | Rapid implementation | ./references/workflow-quick.md |

| Complex/award-quality | Full immersive | ./references/workflow-immersive.md |

| From scratch | Design Thinking below | - |

All workflows: Activate ui-ux-pro-max skill FIRST for design intelligence.

Screenshot/Video Replication (Quick Reference)

  1. Analyze with ai-multimodal skill - extract colors, fonts, spacing, effects
  2. Plan with ui-ux-designer subagent - create phased implementation
  3. Implement - match source precisely
  4. Verify - compare to original
  5. Document - update ./docs/design-guidelines.md if approved

See specific workflow files for detailed steps.

Design Thinking (From Scratch)

Before coding, commit to a BOLD aesthetic direction:

  • Purpose: What problem does this interface solve? Who uses it?
  • Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
  • Constraints: Technical requirements (framework, performance, accessibility).
  • Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Execute with precision. Bold maximalism and refined minimalism both work - intentionality is key.

Aesthetics Guidelines

  • Typography: Avoid Arial/Inter; use distinctive, characterful fonts. Pair display + body fonts.
  • Color: Commit to cohesive palette. CSS variables. Dominant colors with sharp accents.
  • Motion: CSS-first, anime.js for complex (./references/animejs.md). Orchestrated page loads > scattered micro-interactions.
  • Spatial: Unexpected layouts. Asymmetry. Overlap. Negative space OR controlled density.
  • Backgrounds: Atmosphere over solid colors. Gradients, noise, patterns, shadows, grain.
  • Assets: Generate with ai-multimodal, process with media-processing

Asset & Analysis References

| Task | Reference |

|------|-----------|

| Generate assets | ./references/asset-generation.md |

| Analyze quality | ./references/visual-analysis-overview.md |

| Extract guidelines | ./references/design-extraction-overview.md |

| Optimization | ./references/technical-overview.md |

| Animations | ./references/animejs.md |

Quick start: ./references/ai-multimodal-overview.md

Anti-Patterns (AI Slop)

NEVER use:

  • Overused fonts: Inter, Roboto, Arial, Space Grotesk
  • Cliched colors: purple gradients on white
  • Predictable layouts, cookie-cutter patterns

DO:

  • Vary themes (light/dark), fonts, aesthetics per project
  • Match complexity to vision (maximalist = elaborate; minimalist = precise)
  • Make unexpected, context-specific choices

Remember: Claude is capable of extraordinary creative work. Commit fully to distinctive visions.

More from this repository6

🎯
frontend-dev-guidelines🎯Skill

Provides comprehensive frontend development guidelines and best practices for maintaining clean, consistent, and efficient web application code.

🎯
devops🎯Skill

Streamlines cloud deployment across Cloudflare, Docker, Google Cloud, and Kubernetes with automated infrastructure management and CI/CD workflows.

🎯
ui-ux-pro-max🎯Skill

Enhances UI/UX design workflow by providing advanced design insights, component analysis, and optimization recommendations for dashboard interfaces.

🎯
copywriting🎯Skill

Generates high-converting copywriting using proven formulas, templates, and writing styles for headlines, emails, landing pages, and marketing content.

🎯
media-processing🎯Skill

Processes media files using FFmpeg, ImageMagick, and RMBG for encoding, conversion, resizing, background removal, and batch transformations.

🎯
ui-styling🎯Skill

Applies custom UI styling and theming configurations to enhance the visual design and user interface of the Alkana dashboard.