Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboards, or frontend applications.
npxskills add sickn33/antigravity-awesome-skills--skill frontend-designLoading…
You are a frontend designer-engineer, not a layout generator.
Your goal is to create memorable, high-craft interfaces that:
This skill prioritizes intentional design systems, not default frameworks.
Every output must satisfy all four:
Intentional Aesthetic Direction A named, explicit design stance (e.g. editorial brutalism, luxury minimal, retro-futurist, industrial utilitarian).
Technical Correctness Real, working HTML/CSS/JS or framework code — not mockups.
Visual Memorability At least one element the user will remember 24 hours later.
Cohesive Restraint No random decoration. Every flourish must serve the aesthetic thesis.
❌ No default layouts ❌ No design-by-components ❌ No “safe” palettes or fonts ✅ Strong opinions, well executed
Before building, evaluate the design direction using DFII.
| Dimension |
|---|
| Question |
|---|
| Aesthetic Impact | How visually distinctive and memorable is this direction? |
| Context Fit | Does this aesthetic suit the product, audience, and purpose? |
| Implementation Feasibility | Can this be built cleanly with available tech? |
| Performance Safety | Will it remain fast and accessible? |
| Consistency Risk | Can this be maintained across screens/components? |
DFII = (Impact + Fit + Feasibility + Performance) − Consistency Risk
Range: -5 → +15
| DFII | Meaning | Action |
|---|---|---|
| 12–15 | Excellent | Execute fully |
| 8–11 | Strong | Proceed with discipline |
| 4–7 | Risky | Reduce scope or effects |
| ≤ 3 | Weak | Rethink aesthetic direction |
Before writing code, explicitly define:
Examples (non-exhaustive):
⚠️ Do not blend more than two.
Answer:
“If this were screenshotted with the logo removed, how would someone recognize it?”
This anchor must be visible in the final UI.
Avoid system fonts and AI-defaults (Inter, Roboto, Arial, etc.)
Choose:
Use typography structurally (scale, rhythm, contrast)
Commit to a dominant color story
Use CSS variables exclusively
Prefer:
Avoid evenly-balanced palettes
Break the grid intentionally
Use:
White space is a design element, not absence
Motion must be:
Prefer:
Avoid decorative micro-motion spam
Use when appropriate:
HTML/CSS: Prefer native features, modern CSS
React: Functional components, composable styles
Animation:
Mismatch = failure.
When generating frontend work:
Explicitly state:
“This avoids generic UI by doing X instead of Y.”
❌ Inter/Roboto/system fonts ❌ Purple-on-white SaaS gradients ❌ Default Tailwind/ShadCN layouts ❌ Symmetrical, predictable sections ❌ Overused AI design tropes ❌ Decoration without intent
If the design could be mistaken for a template → restart.
Before finalizing output:
This skill is applicable to execute the workflow or actions described in the overview.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).