skills.rest
keshav55
keshav55COMMUNITY
Explore all skills by this author →
Website𝕏@keshavrao_GitHub

atris-design

Enforce frontend aesthetics policies for UI components and design systems.

Updated Jan 19, 2026
Search Tags:#design#frontend#policy#aesthetics#UI consistency
One-click install
npx skills add https://github.com/keshav55/writing_team --skill atris-design-keshav55
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
atrislabsatrislabs

design

Enforce frontend aesthetic policies for UI, component, and landing page development.

Official
Intermediate
thingpersonthingperson

pre-push-review

Automate pre-deployment checks for builds, content quality, accessibility, and policy compliance.

Community
Advanced
atrislabsatrislabs
67

atris-design

Apply the Atris design policy to frontend typography, color, layout, motion, and backgrounds.

Official
Advanced
cxnaivecxnaive

architecture-diagram

Generate standalone HTML files with inline dark-themed SVG architecture diagrams.

Community
Intermediate