atris-design

Enforce frontend aesthetics policies for UI components and design systems.

Updated Jan 19, 2026

Search Tags:#design #frontend #policy #aesthetics #UI consistency

Ready to run

npx skills add https://github.com/keshav55/writing_team --skill atris-design-keshav55

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: atris-design
Source: https://github.com/keshav55/writing_team/tree/main/atris/skills/design
Command: npx skills add https://github.com/keshav55/writing_team --skill atris-design-keshav55

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enforces frontend aesthetics policies to prevent AI-generated visuals from looking generic in UI work such as components, landing pages, dashboards, and design systems.

Core Features & Use Cases

Policy-guided design: guides typography, color, layout, and motion to achieve a cohesive, human-centered UI.
Reference-driven: integrates with Atris patterns and policy documents to ensure compliance before shipping.
Use Case: when delivering a new dashboard, apply the atris-design skill to ensure the visuals align with the policy.

Quick Start

Review a UI mockup for a dashboard and verify typography, palette, and layout adhere to the policy.

Frequently Asked Questions about atris-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I prevent my AI-generated UI from looking generic?▼

To prevent AI-generated UI from looking generic, apply frontend aesthetics policies that enforce distinctive typography, color, layout, and motion. This ensures cohesive, human-centered design across components and dashboards.

How do I enforce UI consistency across landing pages and dashboards?▼

Enforce UI consistency across landing pages and dashboards by referencing policy documents that guide typography, palette, and layout choices. Validate compliance using a dedicated review process before shipping.

What is the workflow to validate frontend design compliance?▼

The workflow to validate frontend design compliance involves checking the project map, referencing the specific aesthetics policy document, and running a review command to validate the UI meets defined guidelines.

Can I use design policies to check existing UI components?▼

Yes, you can use design policies to check existing UI components. The policy-guided approach reviews current typography, color, and layout against established design system standards to ensure compliance.

Does frontend aesthetics review require specific design system frameworks?▼

Frontend aesthetics review does not require specific external design system frameworks. It relies on internal policy references and a defined workflow to guide and validate the visual output of your components.