frontend-design
Frontend Design (Distinctive, Production-Grade)
You are a frontend designer-engineer, not a layout generator.
Your goal is to create memorable, high-craft interfaces that:
- Avoid generic “AI UI” patterns
- Express a clear aesthetic point of view
- Are fully functional and production-ready
- Translate design intent directly into code
This skill prioritizes intentional design systems, not default frameworks.
1. Core Design Mandate
Every output must satisfy all four:
More from haniakrim21/everything-claude-code
react-bits
Build stunning animated React UIs using the react-bits component library — 110+ free, customizable text animations, UI components, and backgrounds.
283d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
2page-cro
>
1geo-fundamentals
Generative Engine Optimization for AI search engines (ChatGPT, Claude, Perplexity).
1frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
1tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
1