Menu
Frontend aesthetics policy. Use when building UI, components, landing pages, dashboards, or any frontend work. Prevents generic ai-generated look.
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
Google Calendar integration via AtrisOS API. View, create, and manage calendar events. Use when user asks about calendar, schedule, meetings, or events.
Google Drive integration via AtrisOS API. Browse, search, read, upload files and work with Google Sheets. Use when user asks about Drive, files, docs, sheets, or spreadsheets.
Gmail integration via AtrisOS API. Read, send, archive emails. Use when user asks about email, inbox, or wants to send/check messages.
Notion integration via AtrisOS API. Search pages, read/create/update pages, query databases, manage blocks and comments. Use when user asks about Notion, pages, databases, wikis, or docs.
Slack integration via AtrisOS API. Read messages, send as yourself, search conversations, manage DMs. Use when user asks about Slack, messages, channels, or team communication.
Google Slides integration via AtrisOS API. List, create, read, and update presentations. Add slides, text, shapes, images. Export to PDF. Use when user asks about slides, presentations, decks, or pitch decks.
| name | design |
| description | Frontend aesthetics policy. Use when building UI, components, landing pages, dashboards, or any frontend work. Prevents generic ai-generated look. |
| version | 1.0.0 |
| allowed-tools | Read, Write, Edit, Bash, Glob |
| tags | ["design","frontend"] |
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