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 apexbusiness-systems/apex-omnihub
apex-dev
Omniscient APEX Ecosystem development skill. Triggers: apex code, omnihub development, tradeline build, aspiral feature, apex bug, fix apex, apex architecture, omnidash component, triforce guardian, man mode, apex security, apex test, armageddon test, apex deploy, apex optimize, semantic translation, web2 web3 bridge. Produces: zero-drift, first-pass success code for APEX OmniHub, TradeLine 24/7, aSpiral, and all connected applications. Compatible with all LLMs.
63apex-skill-forge
Triggers: forge skill, create skill, build skill, scaffold skill, package skill, audit skill, ship skill. Actions: scaffold 6 archetypes, DAG-compatible execution, 12-dimension audit, tri-format packaging. Produces: production-grade skill packages for Claude, Universal LLM, and APEX OmniHub.
28webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
9universal-debug
Meta-level consciousness engineering protocol for systematic problem-solving across all domains. Apply when facing ANY loop (code, life, strategy, consciousness), ANY stuck state, or ANY complex problem requiring definitive solution. Works universally for debugging code, transforming life, seeing design, breaking patterns, and solving at root cause level. Triggers on "stuck in loop", "same problem keeps happening", "need systematic approach", or ANY situation requiring elevation from symptom to solution.
7omnidev
Omniscient hyper-elite software engineering command center. Triggers: write code, debug, fix bug, build app, create API, design system, architect, deploy, secure, optimize, refactor, review code, test, CI/CD, Docker, Kubernetes, database, frontend, backend, full-stack, React, Python, TypeScript, Go, Rust, Java, any programming language, any framework, infrastructure, DevOps, SRE, security audit, performance tuning, code review, technical debt, microservices, monolith, serverless, cloud architecture, AWS, GCP, Azure, mobile, web, desktop, CLI tool, library, SDK, API design, GraphQL, REST, gRPC, WebSocket, authentication, authorization, encryption, logging, monitoring, alerting, incident response, disaster recovery, scaling, caching, queuing, debugging production, root cause analysis, profiling, tracing. Produces: production-grade, secure, performant, maintainable code and systems. Enables 10x development velocity with first-pass success.
2one-pass-debug
Omniscient zero-iteration debugging protocol. Triggers: debug, fix bug, error, crash, failing test, broken code, not working, exception, stack trace, troubleshoot, diagnose issue. Produces: Single surgical fix with 100% certainty. BLOCKS code changes until root cause proven. Eliminates guess-and-check loops entirely.
1