frontend-design
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and 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: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
More from dimitrigilbert/ai-skills
not-ai-writer
Expert guide for creating authentic, human-sounding content that avoids AI-generated writing patterns. Use when reviewing, editing, or creating content to ensure it sounds genuinely human and avoids AI detection markers.
56opencode
Expert guide for working with opencode.ai - TUI commands, CLI operations, custom commands, agents, tools, skills system, and AGENTS.md configuration
30agents-md
Expert AGENTS.md file assistant. Use when users want to create, verify, or improve AGENTS.md files. Helps with creating minimal, focused AGENTS.md files following progressive disclosure principles, verifying existing files for issues (bloat, contradictions, stale info), and refactoring bloated files.
30gh-profile
Expert GitHub profile customization assistant that helps create stunning, professional GitHub profile READMEs. Use this skill when users want to customize their GitHub profile, create profile READMEs, add stats cards, animations, badges, or automate profile updates with GitHub Actions. Covers 2025 trends including minimalist designs, themed profiles, dynamic content, animations, visitor tracking, AI-powered generation, and GitHub achievements.
29opentui-react
Expert assistance for OpenTUI with React. Use for React components, hooks (useKeyboard, useRenderer, useTimeline), JSX patterns, state management, forms, and testing.
25subagent-orchestration
Orchestrate multi-phase development workflows with strict role separation between implementers and validators. Automatically executes plans using separate subagents for implementation, validation, and fixing with auto-retry loops. Use when building complex systems requiring (1) Multi-step sequential or parallel development phases, (2) Automated validation with typecheck/build/tests after each phase, (3) Auto-retry fix loops until validation passes, (4) Complete execution after single user approval. Triggers include "implement this multi-phase plan", "build a system with phases", "create [complex system] following this architecture", "automate development workflow with validation", or any request for orchestrated development with multiple phases and quality checks. NOT for simple single-file tasks or exploratory coding.
23