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 skezu/skills
karpathy-guidelines
Behavioral guidelines for reducing LLM coding mistakes, derived from Andrej Karpathy's observations. Use when writing, reviewing, or refactoring code to ensure simplicity, surgical changes, and verifiable success. Essential for maintaining the high-quality standards of Antigravity Kit.
15n8n-workflows-master
A skill for designing, building, validating, and securing n8n automation workflows, using specialized AI personas (Build Captain, QA, Security Architect). Use this skill to create production-ready n8n workflows from plain language specifications.
13spec-driven-dev
Structured approach for building features through iterative spec documents. Use when (1) starting a new feature from a rough idea, (2) needing to create requirements, design, or implementation plans, (3) wanting to break down complex features into manageable coding tasks, (4) executing or implementing tasks from an existing spec, (5) the user mentions "spec", "requirements", "design document", "implementation plan", or "run task". Creates and manages .agent/specs/{feature-name}/.
12pdf
Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
9skill-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.
5cahier-des-charges
Rédige un Cahier des Charges (CdC) professionnel pour application mobile ou web en français. Ce skill transforme les spécifications techniques (requirements.md, design.md) en un document de cadrage formel. Il met l'accent sur les objectifs stratégiques, l'expérience utilisateur (UX/UI), les fonctionnalités détaillées, les contraintes techniques (iOS/Android, Swift/Kotlin) et la collaboration client-développeur.
5