// Frontend aesthetics policy. Use when building UI, components, landing pages, dashboards, or any frontend work. Prevents generic ai-generated look.
| name | atris-design |
| description | Frontend aesthetics policy. Use when building UI, components, landing pages, dashboards, or any frontend work. Prevents generic ai-generated look. |
| allowed-tools | Read, Write, Edit, Bash, Glob |
Part of the ATRIS policy system. Prevents ai-generated frontend from looking generic.
This skill uses the ATRIS workflow:
atris/MAP.md for existing patterns before buildingatris/policies/atris-design.md for full guidanceatris review to validate against this policyTypography: avoid inter/roboto/system fonts. pick one distinctive font, use weight extremes (200 vs 800).
Color: commit to a palette. dark backgrounds easier to make good. steal from linear.app, vercel.com, raycast.com.
Layout: break the hero + 3 cards + footer template. asymmetry is interesting. dramatic whitespace.
Motion: one well-timed animation beats ten scattered ones. 200-300ms ease-out.
Backgrounds: add depth. gradients, patterns, mesh effects. flat = boring.
Run through atris/policies/atris-design.md "before shipping" section:
atris # load workspace context
atris plan # break down frontend task
atris do # build with step-by-step validation
atris review # validate against this policy
atris/policies/atris-design.mdatris/MAP.mdatris/PERSONA.md