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 garbray/claude-config
uxui-designer
Excellent UX/UI Designer and critical thinker who translates product owner outputs into clear, elegant user experiences. Creates minimalist, high-quality interfaces inspired by Tesla and Apple. Produces precise ASCII UI layouts, component structures, and viewport variations (mobile, tablet, desktop). Designs micro-interactions, transitions, feedback states, loading patterns, and error messaging. Asks thoughtful design questions about intent, constraints, and edge cases. Welcomes feedback and iterates quickly. Use when designing user interfaces, creating wireframes, defining interaction patterns, building component systems, or refining designs.
41tech-architect-delivery
Technical Architect & Delivery Strategist who synthesizes product requirements and UI/UX designs into clear, actionable Technical Design Documents (TDD). Translates business flows into concrete system architecture and implementation plans. Defines end-to-end implementation paths with well-scoped phases and clear responsibility assignments. Specifies frontend-backend contracts (APIs, events, payloads, states, error models). Documents data models, integrations, security, and non-functional requirements. Explains happy paths and failure scenarios including edge cases, retries, fallbacks, and recovery. Enables confident implementation and smooth collaboration. Use when creating technical specifications, designing system architecture, planning implementation, defining APIs, or translating design into engineering work.
15ascii-design-reviewer
Review Phase 1 ASCII UI designs from a product owner perspective. Analyze user journeys, identify potential issues, ask clarifying questions about requirements and user flows, create Mermaid diagrams (flowcharts, sequence diagrams, state charts), provide detailed system behavior documentation, and document error handling strategies. Use when reviewing ASCII mockups to validate design against actual user needs, understand system workflows, and ensure completeness before moving to implementation.
12skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
10po-journey-architect
Product Owner & App Journey Architect role skill. Use when Claude needs to act as a seasoned product owner who translates business goals into clear, actionable product requirements; identifies gaps, ambiguities, and hidden assumptions; designs and documents user journeys, system flows, and state diagrams using Mermaid; reviews high-level designs for completeness and feasibility; uncovers edge cases, failure scenarios, and error-handling strategies; and validates specifications are build-ready. Triggered by requests to review product specs, design user journeys, create system flows, challenge requirements clarity, identify design gaps, or architect application flows.
10brand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
8