Menu
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.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration", "Golden Ticket", "Silver Ticket", "AS-REP roasting", "NTLM relay", or needs guidance on Windows domain penetration testing.
This skill should be used when the user asks to "pentest AWS", "test AWS security", "enumerate IAM", "exploit cloud infrastructure", "AWS privilege escalation", "S3 bucket testing", "metadata SSRF", "Lambda exploitation", or needs guidance on Amazon Web Services security assessment.
Use this skill before any creative or constructive work (features, components, architecture, behavior changes, or functionality). This skill transforms vague ideas into validated designs through disciplined, incremental reasoning and collaboration.
This skill should be used when the user asks to "perform cloud penetration testing", "assess Azure or AWS or GCP security", "enumerate cloud resources", "exploit cloud misconfigurations", "test O365 security", "extract secrets from cloud environments", or "audit cloud infrastructure". It provides comprehensive techniques for security assessment across major cloud platforms.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
Workflow de consultoria iterativa. Transforma ideias vagas em especificações técnicas usando Framework das 3 Perguntas, loop de perguntas categorizadas (máx 5 rodadas), e documentação hierárquica. Ver `~/.config/opencode/workflows/consultor-consolidated.md` para detalhes completos.
| name | frontend-design |
| description | 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. |
| license | Complete terms in LICENSE.txt |
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: