OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add sickn33/agentic-awesome-skills --skill frontend-design
Design and implement a distinctive frontend within the product’s existing brand, accessibility, performance and framework constraints.
npx skills add sickn33/agentic-awesome-skills --skill frontend-design
Modified by AAS maintainers on 2026-09-05: clarified design constraints, subjective scoring and verification. The bundled Apache-2.0 license is preserved.
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.
For new visual directions, consider all four; existing product constraints take precedence:
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 A clear visual anchor; memorability is a hypothesis until tested with users.
Cohesive Restraint No random decoration. Every flourish must serve the aesthetic thesis.
Reuse an established design system when it serves the task. Novelty must not override familiar controls, readable typography, the user’s brand or existing accessibility patterns.
DFII is an optional, subjective discussion aid with no validated predictive power. Prefer concrete user tasks and measurable checks over a total score.
| 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? |
Arithmetic range: -1 → +19 when each dimension is scored from 1 to 5. This is not a certification or a release gate.
| DFII | Meaning | Action |
|---|---|---|
| 12–19 | Excellent | Discuss the tradeoffs |
| 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.
Preserve brand fonts and use system fonts when they improve speed, readability or platform fit
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:
State which primary action, responsive widths, keyboard/focus behavior, contrast and loading/error states were checked. Include observed results and remaining gaps.
Before finalizing output:
Use for a new page, component or deliberate visual refresh with a known primary user action. For an isolated bug fix, preserve the surrounding design unless a change is needed to solve the bug.
Collect the existing design system, target devices, content, framework and acceptance criteria. Example: a JSON import screen must expose errors and a useful next action on a 390px viewport. Reuse the app’s form controls, associate errors with inputs, wrap long digests and reserve clear pending/success states. Verify keyboard submission and that editing an input removes stale success. Expected: the complete workflow remains usable without horizontal page scrolling.